frontend: add history page.

frend: make releaseOverview component

frontend/app/api/config.js

@@ -11,5 +11,13 @@ export const endpoints = {
   user: {
     profile: `${API_URL}/profile`,
     auth: `${API_URL}/auth`,
+    history: `${API_URL}/favorites/history`,
+    bookmarks: {
+      watching: `${API_URL}/favorites/watching`,
+      planned: `${API_URL}/favorites/planned`,
+      watched: `${API_URL}/favorites/watched`,
+      delayed: `${API_URL}/favorites/delayed`,
+      abandoned: `${API_URL}/favorites/abandoned`,
+    },
   },
 };

frontend/app/components/ReleasesOverview/ReleasesOverview.jsx

@@ -0,0 +1,47 @@
+import { CardList } from "@/app/components/CardList/CardList";
+
+export default function ReleasesOverview(props) {
+  return (
+    <>
+      {props.chips && (
+        <div>
+          {props.chips.map((item) => {
+            return (
+              <button
+                key={item.list}
+                className={`chip ${props.list == item.list ? "fill" : ""}`}
+                onClick={() => {
+                  props.setList(item.list);
+                }}
+              >
+                <span>{item.title}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {props.releases ? (
+        <>
+          <div className="grid">
+            <CardList data={props.releases} />
+          </div>
+
+          <nav className="large-margin center-align">
+            <button
+              className="large"
+              onClick={() => {
+                props.setPage(props.page + 1);
+              }}
+            >
+              <i>add</i>
+              <span>загрузить ещё</span>
+            </button>
+          </nav>
+        </>
+      ) : (
+        <progress className="s1"></progress>
+      )}
+    </>
+  );
+}

frontend/app/history/page.js

@@ -1,10 +1,51 @@
 "use client";
 
 import { LogInNeeded } from "@/app/components/LogInNeeded/LogInNeeded";
+import ReleasesOverview from "../components/ReleasesOverview/ReleasesOverview";
 import { useUserStore } from "@/app/store/user-store";
+import { endpoints } from "../api/config";
+import { useEffect, useState } from "react";
+import { getData } from "../api/api-utils";
 
 export default function History() {
   const userStore = useUserStore();
 
-  return <>{!userStore.isAuth ? <LogInNeeded /> : ""}</>;
+  const [releases, setReleases] = useState();
+  const [page, setPage] = useState(0);
+
+  async function fetchData(page = 0) {
+    if (userStore.token) {
+      const url = `${endpoints.user.history}?page=${page}&token=${userStore.token}`;
+      const data = await getData(url);
+
+      // Handle initial load (page 0) or subsequent pagination
+      if (page === 0) {
+        setReleases(data.content);
+      } else {
+        setReleases([...releases, ...data.content]);
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userStore]);
+
+  useEffect(() => {
+    if (releases) {
+      fetchData(page); // Use fetchData for pagination
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page]);
+
+  return (
+    <>
+      {!userStore.isAuth ? (
+        <LogInNeeded />
+      ) : (
+        <ReleasesOverview page={page} setPage={setPage} releases={releases} />
+      )}
+    </>
+  );
 }

frontend/app/page.js

@@ -4,8 +4,8 @@ import { getData } from "./api/api-utils";
 import { endpoints } from "./api/config";
 import { useEffect, useState, useCallback } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { CardList } from "./components/CardList/CardList";
 import { useSearchParams } from "next/navigation";
+import ReleasesOverview from "./components/ReleasesOverview/ReleasesOverview";
 
 export default function Home() {
   const router = useRouter();
@@ -86,44 +86,13 @@ export default function Home() {
   ];
 
   return (
-    <>
-      <div>
-        {chips.map((item) => {
-          return (
-            <button
-              key={item.list}
-              className={`chip ${list == item.list ? "fill" : ""}`}
-              onClick={() => {
-                setList(item.list);
-              }}
-            >
-              <span>{item.title}</span>
-            </button>
-          );
-        })}
-      </div>
-
-      {releases ? (
-        <>
-          <div className="grid">
-            <CardList data={releases} />
-          </div>
-
-          <nav className="large-margin center-align">
-            <button
-              className="large"
-              onClick={() => {
-                setPage(page + 1);
-              }}
-            >
-              <i>add</i>
-              <span>загрузить ещё</span>
-            </button>
-          </nav>
-        </>
-      ) : (
-        <progress className="s1"></progress>
-      )}
-    </>
+    <ReleasesOverview
+      chips={chips}
+      setList={setList}
+      page={page}
+      setPage={setPage}
+      list={list}
+      releases={releases}
+    />
   );
 }