Merge remote-tracking branch 'origin/feat_player'

app/pages/IndexCategory.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
+import { Spinner } from "#/components/Spinner/Spinner";
+import { useState, useEffect } from "react";
+import { useScrollPosition } from "#/hooks/useScrollPosition";
+import { useUserStore } from "../store/auth";
+import { _FetchHomePageReleases } from "#/api/utils";
+
+export function IndexCategoryPage(props) {
+  const token = useUserStore((state) => state.token);
+  const [isLoading, setIsLoading] = useState(true);
+  const [content, setContent] = useState(null);
+  const [page, setPage] = useState(0);
+
+  useEffect(() => {
+    async function _loadInitialReleases() {
+      setIsLoading(true);
+      setContent(null);
+
+      const data: any = await _FetchHomePageReleases(props.slug, token, page);
+
+      setContent(data.content);
+      setIsLoading(false);
+    }
+
+    _loadInitialReleases();
+  }, [token]);
+
+  useEffect(() => {
+    async function _loadNextReleasesPage() {
+      const data: any = await _FetchHomePageReleases(props.slug, token, page);
+      const newContent = [...content, ...data.content];
+      setContent(newContent);
+    }
+    if (content) {
+      _loadNextReleasesPage();
+    }
+  }, [page]);
+
+  const scrollPosition = useScrollPosition();
+  useEffect(() => {
+    if (scrollPosition == 98) {
+      setPage(page + 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">
+      {content && content.length > 0 ? (
+        <ReleaseSection
+          sectionTitle={props.SectionTitleMapping[props.slug]}
+          content={content}
+        />
+      ) : isLoading ? (
+        <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
+          <Spinner />
+        </div>
+      ) : (
+        <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>
+      )}
+      <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={() => setPage(page + 1)}
+      >
+        <span className="w-10 h-10 iconify mdi--plus"> </span>
+        <span className="text-lg">Загрузить ещё</span>
+      </button>
+    </main>
+  );
+}