feat: add logged in user favorite and owned collection fetching

app/api/config.ts

@@ -21,4 +21,15 @@ export const ENDPOINTS = {
     addHistory: `${API_PREFIX}/history/add`,
     markWatched: `${API_PREFIX}/episode/watch`,
   },
+  collection: {
+    base: `${API_PREFIX}/collection`,
+    list: `${API_PREFIX}/collection/list`,
+    create: `${API_PREFIX}/collectionMy/create`,
+    delete: `${API_PREFIX}/collectionMy/delete`,
+    edit: `${API_PREFIX}/collectionMy/edit`,
+    editImage: `${API_PREFIX}/collectionMy/editImage`,
+    releaseInCollections: `${API_PREFIX}/collection/all/release`,
+    userCollections: `${API_PREFIX}/collection/all/profile`,
+    favoriteCollections: `${API_PREFIX}/collectionFavorite`,
+  }
 };

app/components/Chip/Chip.tsx

@@ -1,12 +1,25 @@
 export const Chip = (props: {
+  icon_name?: string;
+  icon_color?: string;
   name?: string;
   name_2?: string;
   devider?: string;
   bg_color?: string;
 }) => {
   return (
-    <div className={`rounded-sm ${props.bg_color || "bg-gray-500"}`}>
+    <div
-      <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
+      className={`px-2 sm:px-4 py-0.5 sm:py-1 rounded-sm ${
+        props.bg_color || "bg-gray-500"
+      } ${props.icon_name ? "flex items-center justify-center gap-1" : ""}`}
+    >
+      {props.icon_name && (
+        <span
+          className={`iconify w-6 h-6 ${props.icon_name} fill-${
+            props.icon_color || "white"
+          }`}
+        ></span>
+      )}
+      <p className="text-xs text-white xl:text-base">
         {props.name}
         {props.name && props.devider ? props.devider : " "}
         {props.name_2}

app/components/CollectionCourusel/CollectionCourusel.tsx

@@ -57,6 +57,13 @@ export const CollectionCourusel = (props: {
       <div className="m-4">
         <div className="swiper">
           <div className="swiper-wrapper">
+            {props.isMyCollections && (
+              <div className="swiper-slide" style={{ width: "fit-content" }}>
+                <div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
+                  <AddCollectionLink />
+                </div>
+              </div>
+            )}
             {props.content.map((collection) => {
               return (
                 <div
@@ -70,13 +77,6 @@ export const CollectionCourusel = (props: {
                 </div>
               );
             })}
-            {props.isMyCollections && (
-              <div className="swiper-slide" style={{ width: "fit-content" }}>
-                <div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
-                  <AddCollectionLink />
-                </div>
-              </div>
-            )}
           </div>
           <div
             className={`swiper-button-prev ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-left aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`}

app/components/CollectionLink/CollectionLink.tsx

@@ -2,91 +2,32 @@ import Link from "next/link";
 import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "#/components/Chip/Chip";
 
-const profile_lists = {
-  // 0: "Не смотрю",
-  1: { name: "Смотрю", bg_color: "bg-green-500" },
-  2: { name: "В планах", bg_color: "bg-purple-500" },
-  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
-  4: { name: "Отложено", bg_color: "bg-yellow-500" },
-  5: { name: "Брошено", bg_color: "bg-red-500" },
-};
-
 export const CollectionLink = (props: any) => {
-  const grade = props.grade.toFixed(1);
-  const profile_list_status = props.profile_list_status;
-  let user_list = null;
-  if (profile_list_status != null || profile_list_status != 0) {
-    user_list = profile_lists[profile_list_status];
-  }
   return (
-    <Link href={`/release/${props.id}`}>
+    <Link href={`/collection/${props.id}`}>
       <div className="w-full aspect-video group">
-        <div className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] " style={{
+        <div
+          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
+          style={{
             backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
-          }}>
+          }}
+        >
           <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
-            <Chip
-              bg_color={
-                grade == 0
-                  ? "hidden"
-                  : grade < 2
-                  ? "bg-red-500"
-                  : grade < 3
-                  ? "bg-orange-500"
-                  : grade < 4
-                  ? "bg-yellow-500"
-                  : "bg-green-500"
-              }
-              name={grade}
-            />
-            {user_list && (
-              <Chip bg_color={user_list.bg_color} name={user_list.name} />
-            )}
-            {props.status ? (
-              <Chip name={props.status.name} />
-            ) : (
-              props.status_id != 0 && (
-                <Chip
-                  name={
-                    props.status_id == 1
-                      ? "Завершено"
-                      : props.status_id == 2
-                      ? "Онгоинг"
-                      : props.status_id == 3 && "Анонс"
-                  }
-                />
-              )
-            )}
-            <Chip
-              name={props.episodes_released && props.episodes_released}
-              name_2={
-                props.episodes_total ? props.episodes_total + " эп." : "? эп."
-              }
-              devider="/"
-            />
-            {props.last_view_episode && (
-              <Chip
-                name={
-                  props.last_view_episode.name
-                    ? props.last_view_episode.name
-                    : `${props.last_view_episode.position + 1} серия`
-                }
-                name_2={
-                  "last_view_timestamp" in props &&
-                  sinceUnixDate(props.last_view_timestamp)
-                }
-                devider=", "
-              />
-            )}
-            {props.category && <Chip name={props.category.name} />}
             {props.is_favorite && (
               <div className="flex items-center justify-center bg-pink-500 rounded-sm">
                 <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
               </div>
             )}
+            {props.is_private && (
+              <div className="flex items-center justify-center bg-yellow-400 rounded-sm">
+                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--lock"></span>
+              </div>
+            )}
+            <Chip icon_name="material-symbols--favorite" name_2={props.favorites_count} />
+            <Chip icon_name="material-symbols--comment" name_2={props.comment_count} />
           </div>
           <p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
-            {props.title_ru}
+            {props.title}
           </p>
         </div>
       </div>

app/pages/Collections.tsx

@@ -5,96 +5,64 @@ import { Spinner } from "#/components/Spinner/Spinner";
 const fetcher = (...args: any) =>
   fetch([...args] as any).then((res) => res.json());
 import { useUserStore } from "#/store/auth";
-import { BookmarksList } from "#/api/utils";
 import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export function CollectionsPage() {
-  const token = useUserStore((state) => state.token);
+  const userStore = useUserStore();
-  const authState = useUserStore((state) => state.state);
   const router = useRouter();
 
-  //   function useFetchReleases(listName: string) {
+  function useFetchReleases(section: string) {
-  //     let url: string;
+    let url: string;
 
-  //     if (token) {
+    if (userStore.token && userStore.user) {
-  //       url = `${ENDPOINTS.user.bookmark}/all/${BookmarksList[listName]}/0?token=${token}`;
+      if (section == "userCollections") {
-  //     }
+        url = `${ENDPOINTS.collection.userCollections}/${userStore.user.id}/0?token=${userStore.token}`;
+      } else if (section == "userFavoriteCollections") {
+        url = `${ENDPOINTS.collection.favoriteCollections}/all/0?token=${userStore.token}`;
+      }
+    }
 
-  //     const { data } = useSWR(url, fetcher);
+    const { data } = useSWR(url, fetcher);
-  //     return [data];
+    return [data];
-  //   }
+  }
 
-  //   const [watchingData] = useFetchReleases("watching");
+  const [userCollections] = useFetchReleases("userCollections");
-  //   const [plannedData] = useFetchReleases("planned");
+  const [favoriteCollections] = useFetchReleases("userFavoriteCollections");
-  //   const [watchedData] = useFetchReleases("watched");
-  //   const [delayedData] = useFetchReleases("delayed");
-  //   const [abandonedData] = useFetchReleases("abandoned");
 
   useEffect(() => {
-    if (authState === "finished" && !token) {
+    if (userStore.state === "finished" && !userStore.token) {
       router.push("/login?redirect=/collections");
     }
-  }, [authState, token]);
+  }, [userStore.state, userStore.token]);
 
   return (
     <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
-      <CollectionCourusel
+      {userStore.state === "loading" &&
-        sectionTitle="Мои коллекции"
+        (!userCollections || !favoriteCollections) && (
-        // showAllLink="/bookmarks/watching"
-        content={[]}
-        isMyCollections={true}
-      />
-      {/* {authState === "loading" &&
-        (!watchingData ||
-          !plannedData ||
-          !watchedData ||
-          !delayedData ||
-          !abandonedData) && (
           <div className="flex items-center justify-center min-w-full min-h-screen">
             <Spinner />
           </div>
-        )} */}
+        )}
-      {/* {watchingData &&
+
-        watchingData.content &&
+      {userCollections && userCollections.content && (
-        watchingData.content.length > 0 && (
+        <CollectionCourusel
-          <ReleaseCourusel
+          sectionTitle="Мои коллекции"
-            sectionTitle="Смотрю"
+          showAllLink={`/profile/${userStore.user.id}/collections`}
-            showAllLink="/bookmarks/watching"
+          content={userCollections.content}
-            content={watchingData.content}
+          isMyCollections={true}
+        />
+      )}
+      {favoriteCollections &&
+        favoriteCollections.content &&
+        favoriteCollections.content.length > 0 && (
+          <CollectionCourusel
+            sectionTitle="Избранные коллекции"
+            showAllLink="/collections/favorites"
+            content={favoriteCollections.content}
           />
         )}
-      {plannedData && plannedData.content && plannedData.content.length > 0 && (
-        <ReleaseCourusel
-          sectionTitle="В планах"
-          showAllLink="/bookmarks/planned"
-          content={plannedData.content}
-        />
-      )}
-      {watchedData && watchedData.content && watchedData.content.length > 0 && (
-        <ReleaseCourusel
-          sectionTitle="Просмотрено"
-          showAllLink="/bookmarks/watched"
-          content={watchedData.content}
-        />
-      )}
-      {delayedData && delayedData.content && delayedData.content.length > 0 && (
-        <ReleaseCourusel
-          sectionTitle="Отложено"
-          showAllLink="/bookmarks/delayed"
-          content={delayedData.content}
-        />
-      )}
-      {abandonedData &&
-        abandonedData.content &&
-        abandonedData.content.length > 0 && (
-          <ReleaseCourusel
-            sectionTitle="Заброшено"
-            showAllLink="/bookmarks/abandoned"
-            content={abandonedData.content}
-          />
-        )} */}
     </main>
   );
 }

app/store/auth.ts

@@ -5,7 +5,7 @@ import { getJWT, removeJWT, fetchDataViaGet } from "#/api/utils";
 interface userState {
   _hasHydrated: boolean;
   isAuth: boolean;
-  user: Object | null;
+  user: any | null;
   token: string | null;
   state: string;
   login: (user: Object, token: string) => void;