feat: add bookmarks & bookmarks category pages

app/api/bookmarks/route.js

@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import { fetchDataViaGet } from "../utils";
+import { ENDPOINTS } from "../config";
+
+const list = {
+  watching: 1,
+  planned: 2,
+  watched: 3,
+  delayed: 4,
+  abandoned: 5,
+};
+
+const sort = {
+  adding_descending: 1,
+  adding_ascending: 2,
+  // year_descending: 3,
+  // year_ascending: 4,
+  alphabet_descending: 5,
+  alphabet_ascending: 6,
+};
+
+export async function GET(request) {
+  const page = parseInt(request.nextUrl.searchParams.get(["page"])) || 0;
+  const listName = request.nextUrl.searchParams.get(["list"]) || null;
+  const token = request.nextUrl.searchParams.get(["token"]) || null;
+  const sortName = request.nextUrl.searchParams.get(["sort"]) || "adding_descending";
+
+  if (!token || token == "null") {
+    return NextResponse.json({ message: "No token provided" }, { status: 403 });
+  }
+
+  if (!listName || listName == "null") {
+    return NextResponse.json({ message: "No list provided" }, { status: 400 });
+  }
+
+  if (!list[listName]) {
+    return NextResponse.json({ message: "Unknown list" }, { status: 400 });
+  }
+
+  if (!sort[sortName]) {
+    return NextResponse.json({ message: "Unknown sort" }, { status: 400 });
+  }
+
+  let url = new URL(`${ENDPOINTS.user.bookmark}/${list[listName]}/${page}`);
+  url.searchParams.set("token", token);
+  url.searchParams.set("sort", sort[sortName]);
+
+  const response = await fetchDataViaGet(url.toString());
+  return NextResponse.json(response);
+}

app/api/config.js

@@ -7,18 +7,23 @@ export const ENDPOINTS = {
     info: `${API_URL}/release`,
     episode: `${API_URL}/episode`,
   },
-  profile: `${API_URL}/profile`,
-  filter: `${API_URL}/filter`,
-  auth: `${API_URL}/auth/signIn`,
   user: {
+    profile: `${API_URL}/profile`,
+    bookmark: `${API_URL}/profile/list/all`,
     history: `${API_URL}/history`,
-    watching: `${API_URL}/profile/list/all/1`,
-    planned: `${API_URL}/profile/list/all/2`,
-    watched: `${API_URL}/profile/list/all/3`,
-    delayed: `${API_URL}/profile/list/all/4`,
-    abandoned: `${API_URL}/profile/list/all/5`,
     favorite: `${API_URL}/favorite`,
   },
+  filter: `${API_URL}/filter`,
+  auth: `${API_URL}/auth/signIn`,
+  // user: {
+  //   history: `${API_URL}/history`,
+  //   watching: `${API_URL}/profile/list/all/1`,
+  //   planned: `${API_URL}/profile/list/all/2`,
+  //   watched: `${API_URL}/profile/list/all/3`,
+  //   delayed: `${API_URL}/profile/list/all/4`,
+  //   abandoned: `${API_URL}/profile/list/all/5`,
+  //   favorite: `${API_URL}/favorite`,
+  // },
   search: `${API_URL}/search/releases`,
   statistic: {
     addHistory: `${API_URL}/history/add`,

app/api/profile/[id]/route.js

@@ -4,7 +4,7 @@ import { ENDPOINTS } from "@/app/api/config";
 
 export async function GET(request, params) {
   const token = request.nextUrl.searchParams.get(["token"]) || null;
-  let url = new URL(`${ENDPOINTS.profile}/${params["params"]["id"]}`);
+  let url = new URL(`${ENDPOINTS.user.profile}/${params["params"]["id"]}`);
   if (token) {
     url.searchParams.set("token", token);
   }

app/bookmarks/[slug]/page.js

@@ -0,0 +1,27 @@
+import { BookmarksCategoryPage } from "@/app/pages/BookmarksCategory";
+
+const SectionTitleMapping = {
+  watching: "Смотрю",
+  planned: "В планах",
+  watched: "Просмотрено",
+  delayed: "Отложено",
+  abandoned: "Заброшено",
+};
+
+export async function generateMetadata({ params }) {
+  return {
+    title: SectionTitleMapping[params.slug],
+  };
+}
+
+export default function Index({ params }) {
+  const metadata = {
+    title: "AniX | " + SectionTitleMapping[params.slug],
+  };
+  return (
+    <BookmarksCategoryPage
+      slug={params.slug}
+      SectionTitleMapping={SectionTitleMapping}
+    />
+  );
+}

app/bookmarks/page.js

@@ -0,0 +1,10 @@
+export const metadata = {
+    title: "AniX | Закладки",
+  };
+  
+  import { BookmarksPage } from "@/app/pages/Bookmarks";
+  
+  export default function Index() {
+    return <BookmarksPage />;
+  }
+  

app/components/ReleaseSection/ReleaseSection.jsx

@@ -1,22 +1,20 @@
-
 import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
 
 export const ReleaseSection = (props) => {
   return (
     <section>
-      <div className="flex justify-between px-4 border-b-2 border-black">
-        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
-          {props.sectionTitle}
-        </h1>
-      </div>
+      {props.sectionTitle && (
+        <div className="flex justify-between px-4 border-b-2 border-black">
+          <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+            {props.sectionTitle}
+          </h1>
+        </div>
+      )}
       <div className="m-4">
         <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2 min-w-full">
           {props.content.map((release) => {
             return (
-              <div
-                key={release.id}
-                className="w-full h-full aspect-video"
-              >
+              <div key={release.id} className="w-full h-full aspect-video">
                 <ReleaseLink {...release} />
               </div>
             );

app/pages/Bookmarks.jsx

@@ -0,0 +1,81 @@
+"use client";
+import useSWR from "swr";
+import { ReleaseCourusel } from "@/app/components/ReleaseCourusel/ReleaseCourusel";
+import { Spinner } from "@/app/components/Spinner/Spinner";
+const fetcher = (...args) => fetch(...args).then((res) => res.json());
+import { useUserStore } from "@/app/store/auth";
+
+export function BookmarksPage() {
+  const token = useUserStore((state) => state.token);
+
+  function useFetchReleases(list) {
+    let url;
+    url = `/api/bookmarks?list=${list}&token=${token}`;
+
+    const { data } = useSWR(url, fetcher);
+    return [data];
+  }
+
+  const [watchingData] = useFetchReleases("watching");
+  const [plannedData] = useFetchReleases("planned");
+  const [watchedData] = useFetchReleases("watched");
+  const [delayedData] = useFetchReleases("delayed");
+  const [abandonedData] = useFetchReleases("abandoned");
+
+  return (
+    <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      {!watchingData ||
+      !plannedData ||
+      !watchedData ||
+      !delayedData ||
+      !abandonedData ? (
+        <div className="flex items-center justify-center min-w-full min-h-screen">
+          <Spinner />
+        </div>
+      ) : (
+        ""
+      )}
+      {watchingData &&
+        watchingData.content &&
+        watchingData.content.length > 0 && (
+          <ReleaseCourusel
+            sectionTitle="Смотрю"
+            showAllLink="/bookmarks/watching"
+            content={watchingData.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/pages/BookmarksCategory.jsx

@@ -0,0 +1,120 @@
+"use client";
+import useSWRInfinite from "swr/infinite";
+import { ReleaseSection } from "@/app/components/ReleaseSection/ReleaseSection";
+import { Spinner } from "@/app/components/Spinner/Spinner";
+import { useState, useEffect } from "react";
+import { useScrollPosition } from "@/app/hooks/useScrollPosition";
+import { useUserStore } from "../store/auth";
+import { Dropdown } from "flowbite-react";
+
+const fetcher = async (url) => {
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    const error = new Error("An error occurred while fetching the data.");
+    error.info = await res.json();
+    error.status = res.status;
+    throw error;
+  }
+
+  return res.json();
+};
+
+const sort = {
+  descendingIcon: "material-symbols--sort",
+  ascendingIcon: "[transform:rotateX(180deg)] material-symbols--sort",
+  values: [
+    {
+      name: "Сначала новые",
+      value: "adding_descending",
+    },
+    {
+      name: "Сначала старые",
+      value: "adding_ascending",
+    },
+    {
+      name: "А-Я",
+      value: "alphabet_descending",
+    },
+    {
+      name: "Я-А",
+      value: "alphabet_ascending",
+    },
+  ],
+};
+
+export function BookmarksCategoryPage(props) {
+  const token = useUserStore((state) => state.token);
+  const [selectedSort, setSelectedSort] = useState(0);
+  const getKey = (pageIndex, previousPageData) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+    return `/api/bookmarks?list=${props.slug}&page=${pageIndex}&token=${token}&sort=${sort.values[selectedSort].value}`;
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    fetcher,
+    { initialSize: 2, revalidateFirstPage: false }
+  );
+
+  const [content, setContent] = useState(null);
+  useEffect(() => {
+    if (data) {
+      let allReleases = [];
+      for (let i = 0; i < data.length; i++) {
+        allReleases.push(...data[i].content);
+      }
+      setContent(allReleases);
+    }
+  }, [data]);
+
+  const scrollPosition = useScrollPosition();
+  useEffect(() => {
+    if (scrollPosition >= 98 && scrollPosition <= 99) {
+      setSize(size + 1);
+    }
+  }, [scrollPosition]);
+
+  if (error) return <div>failed to load</div>;
+
+  return (
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+      <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+          {props.SectionTitleMapping[props.slug]}
+        </h1>
+        <Dropdown label={sort.values[selectedSort].name} dismissOnClick={true}>
+          {sort.values.map((item, index) => (
+            <Dropdown.Item key={index} onClick={() => setSelectedSort(index)}>
+              <span
+                className={`w-6 h-6 iconify ${
+                  sort.values[index].value.split("_")[1] == "descending"
+                    ? sort.descendingIcon
+                    : sort.ascendingIcon
+                }`}
+              ></span>
+              {item.name}
+            </Dropdown.Item>
+          ))}
+        </Dropdown>
+      </div>
+      {isLoading && (
+        <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
+          <Spinner />
+        </div>
+      )}
+      {content && <ReleaseSection content={content} />}
+      {data &&
+        data[data.length - 1].current_page <
+          data[data.length - 1].total_page_count && (
+          <button
+            className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
+            onClick={() => setSize(size + 1)}
+          >
+            <span className="w-10 h-10 iconify mdi--plus"></span>
+            <span className="text-lg">Загрузить ещё</span>
+          </button>
+        )}
+    </main>
+  );
+}

app/pages/IndexCategory.jsx

@@ -6,7 +6,7 @@ import { useState, useEffect } from "react";
 import { useScrollPosition } from "@/app/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 
-const fetcher = async url => {
+const fetcher = async (url) => {
   const res = await fetch(url);
 
   if (!res.ok) {
@@ -33,7 +33,7 @@ export function IndexCategoryPage(props) {
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
     getKey,
     fetcher,
-    {"initialSize": 2, "revalidateFirstPage": false}
+    { initialSize: 2, revalidateFirstPage: false }
   );
 
   const [content, setContent] = useState(null);
@@ -50,9 +50,9 @@ export function IndexCategoryPage(props) {
   const scrollPosition = useScrollPosition();
   useEffect(() => {
     if (scrollPosition >= 98 && scrollPosition <= 99) {
-        setSize(size + 1)
+      setSize(size + 1);
     }
-    }, [scrollPosition]);
+  }, [scrollPosition]);
 
   if (error) return <div>failed to load</div>;
   if (isLoading)
@@ -64,13 +64,28 @@ export function IndexCategoryPage(props) {
 
   return (
     <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
-      {content && (
+      {content && content.length > 0 ? (
         <ReleaseSection
           sectionTitle={props.SectionTitleMapping[props.slug]}
           content={content}
         />
+      ) : (
+        <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
+          <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
+          <p>
+            В списке {props.SectionTitleMapping[props.slug]} пока ничего нет...
+          </p>
+        </div>
+      )}
+      {data && data[data.length - 1].content.length == 25 && (
+        <button
+          className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition"
+          onClick={() => setSize(size + 1)}
+        >
+          <span className="w-10 h-10 iconify mdi--plus"> </span>
+          <span className="text-lg">Загрузить ещё</span>
+        </button>
       )}
-      <button className="mx-auto w-[calc(100%-10rem)] border border-black rounded-lg p-2 mb-6 flex items-center justify-center gap-2 hover:bg-black hover:text-white transition" onClick={() => setSize(size + 1)}> <span className="w-10 h-10 iconify mdi--plus"> </span> <span className="text-lg">Загрузить ещё</span></button>
     </main>
   );
 }

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "flowbite": "^2.4.1",
+    "flowbite-react": "^0.10.1",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",

tailwind.config.js

@@ -1,4 +1,5 @@
 const { addIconSelectors } = require("@iconify/tailwind");
+import flowbite from "flowbite-react/tailwind";
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -6,9 +7,11 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    flowbite.content(),
   ],
   plugins: [
     addIconSelectors(["mdi", "material-symbols", "twemoji"]),
-    require('tailwind-scrollbar')
+    require('tailwind-scrollbar'),
+    flowbite.plugin(),
   ],
 };