From 2615c47f0c8ff512aeccd42105874abc7089cd4d Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sat, 20 Apr 2024 14:39:03 +0500
Subject: [PATCH] frontend: add load more button on index page. add title
 trimming for long release titles.

---
 frontend/app/components/CardList/CardList.jsx | 14 ++++
 .../{NavigationRail.js => NavigationRail.jsx} |  2 +-
 .../{ReleaseCard.js => ReleaseCard.jsx}       |  4 +-
 frontend/app/page.js                          | 78 ++++++++++++++-----
 4 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 frontend/app/components/CardList/CardList.jsx
 rename frontend/app/components/NavigationRail/{NavigationRail.js => NavigationRail.jsx} (90%)
 rename frontend/app/components/ReleaseCard/{ReleaseCard.js => ReleaseCard.jsx} (67%)

diff --git a/frontend/app/components/CardList/CardList.jsx b/frontend/app/components/CardList/CardList.jsx
new file mode 100644
index 0000000..8b5ce92
--- /dev/null
+++ b/frontend/app/components/CardList/CardList.jsx
@@ -0,0 +1,14 @@
+import { ReleaseCard } from "@/app/components/ReleaseCard/ReleaseCard";
+
+export const CardList = (props) => {
+  return props.data.map((item) => {
+    return (
+      <ReleaseCard key={item.id}
+        id={item.id}
+        title={item.title_ru}
+        poster={item.image}
+        description={item.description}
+      />
+    );
+  });
+};
diff --git a/frontend/app/components/NavigationRail/NavigationRail.js b/frontend/app/components/NavigationRail/NavigationRail.jsx
similarity index 90%
rename from frontend/app/components/NavigationRail/NavigationRail.js
rename to frontend/app/components/NavigationRail/NavigationRail.jsx
index 6c79f01..269f66d 100644
--- a/frontend/app/components/NavigationRail/NavigationRail.js
+++ b/frontend/app/components/NavigationRail/NavigationRail.jsx
@@ -45,7 +45,7 @@ export const NavigationRail = () => {
         <div>share</div>
       </a> */}
       <span className="max"></span>
-      <button className="circle transparent end-align" onClick={() => themeStore.changeTheme(themeStore.theme == "dark" ? "light" : "dark")}>
+      <button className="circle transparent" onClick={() => themeStore.changeTheme(themeStore.theme == "dark" ? "light" : "dark")}>
         <i>palette</i>
       </button>
     </nav>
diff --git a/frontend/app/components/ReleaseCard/ReleaseCard.js b/frontend/app/components/ReleaseCard/ReleaseCard.jsx
similarity index 67%
rename from frontend/app/components/ReleaseCard/ReleaseCard.js
rename to frontend/app/components/ReleaseCard/ReleaseCard.jsx
index 6ecd373..ba7ab01 100644
--- a/frontend/app/components/ReleaseCard/ReleaseCard.js
+++ b/frontend/app/components/ReleaseCard/ReleaseCard.jsx
@@ -8,8 +8,8 @@ export const ReleaseCard = (props) => {
       <article className="no-padding round fill" style={{"aspectRatio": "9/16"}}>
         <img className="responsive large top-round" src={props.poster} />
         <div className="padding">
-          <h6>{props.title}</h6>
-          <p>{props.description}</p>
+          <h6>{`${props.title.substring(0, 36)}${[...props.title].length > 36 ? "..." : ""}`}</h6>
+          <p>{`${props.description}${[...props.description].length > 160 ? "..." : ""}`}</p>
         </div>
       </article>
     </Link>
diff --git a/frontend/app/page.js b/frontend/app/page.js
index c37edc7..8830ad1 100644
--- a/frontend/app/page.js
+++ b/frontend/app/page.js
@@ -1,26 +1,61 @@
 "use client";
 
-import { ReleaseCard } from "./components/ReleaseCard/ReleaseCard";
 import { getData } from "./api/api-utils";
 import { endpoints } from "./api/config";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { CardList } from "./components/CardList/CardList";
 
 import { useSearchParams } from "next/navigation";
-import Link from "next/link";
 
 export default function Home() {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [list, setList] = useState();
+  const [releases, setReleases] = useState();
+  const [page, setPage] = useState(0);
+
   const searchParams = useSearchParams();
-  const [list, setList] = useState("last");
-  const [releases, setReleases] = useState(null);
+  const createQueryString = useCallback(
+    (name, value) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams]
+  );
 
   useEffect(() => {
-    async function getReleases() {
-      setReleases(await getData(endpoints.index[list]));
-    }
+    setList(searchParams.get("list") || "last");
+  }, []);
+
+  async function getReleases() {
+    const data = await getData(`${endpoints.index[list]}`);
+    setReleases(data.content);
+  }
+
+  async function getPage() {
+    const data = await getData(`${endpoints.index[list]}?page=${page}`);
+    setReleases([...releases, ...data.content]);
+  }
+
+  useEffect(() => {
+    router.push(pathname + "?" + createQueryString("list", list));
     setReleases(null);
-    getReleases();
+    setPage(0);
+    if (list) {
+      getReleases();
+    }
   }, [list]);
 
+  useEffect(() => {
+    if (list && releases) {
+      getPage();
+    }
+  }, [page]);
+
   return (
     <>
       <div>
@@ -59,19 +94,20 @@ export default function Home() {
       </div>
 
       <div className="grid">
-        {releases
-          ? releases.content.map((item) => {
-              return (
-                <ReleaseCard
-                  id={item.id}
-                  title={item.title_ru}
-                  poster={item.image}
-                  description={item.description}
-                />
-              );
-            })
-          : ""}
+        {releases ? <CardList data={releases} /> : <progress></progress>}
       </div>
+
+      <nav className="large-margin center-align">
+        <button
+          className="large"
+          onClick={() => {
+            setPage(page + 1);
+          }}
+        >
+          <i>add</i>
+          <span>загрузить ещё</span>
+        </button>
+      </nav>
     </>
   );
 }