feat(frontend/release): add ability to change boormarks list on releases page for authorized users

backend/modules/release/release.py

@@ -9,8 +9,10 @@ router = APIRouter()
 
 
 @router.get("/{release_id}", summary="Get release info")
-async def GetReleaseById(request: Request, release_id: str):
-    return await apiRequest(request, ENDPOINTS["release"]["info"], release_id)
+async def GetReleaseById(request: Request, release_id: str, token: str = ""):
+    return await apiRequest(
+        request, ENDPOINTS["release"]["info"], release_id, query=f"?token={token}"
+    )
 
 
 @router.get("/{release_id}/voiceover", summary="Get release voiceover info")

backend/modules/user/profile.py

@@ -28,3 +28,25 @@ async def getUserById(
         },
         "is_my_profile": res["is_my_profile"],
     }
+
+
+@router.get("/{release_id}/{list}/add", summary="Add release to bookmarks list")
+async def addReleaseToBookmarks(
+    request: Request, release_id: int, list: int, token: str
+):
+    return await apiRequest(
+        request,
+        f"{ENDPOINTS['profile']}/list/add/{list}/{release_id}",
+        query=f"?token={token}",
+    )
+
+
+@router.get("/{release_id}/{list}/delete", summary="Remove release from bookmarks list")
+async def deleteReleaseFromBookmarks(
+    request: Request, release_id: int, list: int, token: str
+):
+    return await apiRequest(
+        request,
+        f"{ENDPOINTS['profile']}/list/delete/{list}/{release_id}",
+        query=f"?token={token}",
+    )

frontend/app/components/Release/ReleaseInfo.jsx

@@ -4,20 +4,69 @@ import { useEffect, useState } from "react";
 import { getData } from "@/app/api/api-utils";
 import { endpoints } from "@/app/api/config";
 import { ReleaseCard } from "../ReleaseCard/ReleaseCard";
+import { useUserStore } from "@/app/store/user-store";
 
 export const ReleaseInfo = (props) => {
+  const userStore = useUserStore();
   const [releaseInfo, setReleaseInfo] = useState();
+  const [list, setList] = useState();
+  const [timer, seTimer] = useState();
 
   useEffect(() => {
     async function _fetchInfo() {
-      const release = await getData(`${endpoints.release}/${props.id}`);
+      let url = `${endpoints.release}/${props.id}`;
+
+      if (userStore.token) {
+        url = `${endpoints.release}/${props.id}?token=${userStore.token}`;
+      }
+
+      const release = await getData(url);
       setReleaseInfo(release);
+      if (userStore.token) {
+        setList(release.release.profile_list_status || 0);
+      }
+    }
+
+    // I really think it's not the way it is should be done
+    // but it works
+    // FIX: double requests, 1st without token, and second with it.
+    // now it's only 1 request with or w/o token, if page is reloaded.
+    if (userStore.token) {
+      clearTimeout(timer);
     }
     if (props.id) {
+      seTimer(
+        setTimeout(() => {
           _fetchInfo();
+        }, 1000),
+      );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [userStore.token]);
+
+  useEffect(() => {
+    async function _setList() {
+      const url = `${endpoints.user.profile}/${props.id}/${list}/add?token=${userStore.token}`;
+      await getData(url);
+    }
+    if (
+      userStore.token &&
+      releaseInfo &&
+      list != releaseInfo.release.profile_list_status
+    ) {
+      _setList();
+      releaseInfo.release.profile_list_status = list;
+    }
+  }, [userStore.token, list]);
+
+  const lists = [
+    { list: 0, name: "Не смотрю" },
+    { list: 1, name: "Смотрю" },
+    { list: 2, name: "В планах" },
+    { list: 3, name: "Просмотрено" },
+    { list: 4, name: "Отложено" },
+    { list: 5, name: "Брошено" },
+  ];
 
   return (
     <>
@@ -30,10 +79,36 @@ export const ReleaseInfo = (props) => {
               </div>
               <div className="s9">
                 <div className="padding">
+                  <div className="grid">
+                    <div className="s9">
                       <h5>{releaseInfo.release.title_ru}</h5>
                       <h6 className="small no-margin">
                         {releaseInfo.release.title_original}
                       </h6>
+                    </div>
+                    <div className="s3 right-align">
+                      {list >= 0 && (
+                        <button className="responsive">
+                          <span>{lists[list].name}</span>
+                          <i>arrow_drop_down</i>
+                          <menu>
+                            {lists.map((item) => {
+                              return (
+                                <a
+                                  key={item.list}
+                                  onClick={() => {
+                                    setList(item.list);
+                                  }}
+                                >
+                                  {item.name}
+                                </a>
+                              );
+                            })}
+                          </menu>
+                        </button>
+                      )}
+                    </div>
+                  </div>
                   <p className="small no-margin">
                     {releaseInfo.release.country} •{" "}
                     {releaseInfo.release.status.name} •{" "}
@@ -47,6 +122,7 @@ export const ReleaseInfo = (props) => {
               </div>
             </div>
           </article>
+          {releaseInfo.release.related_releases.length > 0 && (
             <article className="grid">
               <div className="row s12">
                 <i>hub</i>
@@ -71,6 +147,7 @@ export const ReleaseInfo = (props) => {
                 })}
               </nav>
             </article>
+          )}
         </>
       ) : (
         <div className="center-align">