anix/feat: add recommendations and watching pages to discovery

app/components/Discovery/DiscussingToday.tsx

@@ -24,13 +24,18 @@ export const DiscussingToday = () => {
 
   return (
     <div>
-      <p className="mb-2 text-lg font-bold">Обсуждаемое сегодня</p>
-      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 xl:grid-cols-5">
+      <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
+        <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
+          Обсуждаемое сегодня
+        </h1>
+      </div>
+      <div className="flex gap-2 my-4 overflow-auto">
         {data.content.map((item) => {
           return (
             <Link
               key={`discover-discussing-${item.id}`}
               href={`/release/${item.id}`}
+              className="min-w-[256px]"
             >
               <PosterWithStuff
                 settings={{ showDescription: false, showGenres: false }}

app/discovery/recommendations/page.tsx

@@ -0,0 +1,12 @@
+import { DiscoverRecommendationsPage } from "#/pages/DiscoverRecommendations";
+
+export const metadata = {
+  title: "Обзор - Рекомендации",
+  description: "",
+};
+
+export const dynamic = "force-static";
+
+export default function Discover() {
+  return <DiscoverRecommendationsPage />;
+}

app/discovery/watching/page.tsx

@@ -0,0 +1,12 @@
+import { DiscoverWatchingPage } from "#/pages/DiscoverWatching";
+
+export const metadata = {
+  title: "Обзор - Смотрят сейчас",
+  description: "Релизы которые сейчас смотрят",
+};
+
+export const dynamic = "force-static";
+
+export default function Discover() {
+  return <DiscoverWatchingPage />;
+}

app/pages/DiscoverRecommendations.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useSWRfetcher } from "#/api/utils";
+import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
+import { Spinner } from "#/components/Spinner/Spinner";
+import { useScrollPosition } from "#/hooks/useScrollPosition";
+import { useUserStore } from "#/store/auth";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import useSWRInfinite from "swr/infinite";
+
+export const DiscoverRecommendationsPage = () => {
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  const [previousPage, setPreviousPage] = useState(0);
+  const [content, setContent] = useState(null);
+
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+
+    let url: string;
+    url = `${ENDPOINTS.discover.recommendations}/${pageIndex}?previous_page=${previousPage}&token=${userStore.token}`;
+
+    return url;
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    useSWRfetcher
+  );
+
+  useEffect(() => {
+    if (data) {
+      let allContent = [];
+      for (let i = 0; i < data.length; i++) {
+        allContent.push(...data[i].content);
+      }
+      setContent(allContent);
+    }
+  }, [data]);
+
+  const scrollPosition = useScrollPosition();
+  useEffect(() => {
+    if (scrollPosition >= 98 && scrollPosition <= 99) {
+      setPreviousPage(size);
+      setSize(size + 1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+
+  useEffect(() => {
+    if (userStore.state === "finished" && !userStore.token) {
+      router.push(`/login?redirect=/discovery/recommendations`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userStore.state, userStore.token]);
+
+  return (
+    <>
+      {error ?
+        <main className="flex items-center justify-center min-h-screen">
+          <div className="flex flex-col gap-2">
+            <h1 className="text-2xl font-bold">Ошибка</h1>
+            <p className="text-lg">
+              Произошла ошибка при загрузке рекомендаций. Попробуйте обновить
+              страницу или зайдите позже.
+            </p>
+          </div>
+        </main>
+      : !content ?
+        <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
+          <Spinner />
+        </div>
+      : <ReleaseSection content={content} sectionTitle={"Рекомендации"} />}
+      {content && isLoading ?
+        <div className="flex flex-col items-center justify-center min-w-full min-h-16">
+          <Spinner />
+        </div>
+      : ""}
+    </>
+  );
+};

app/pages/DiscoverWatching.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useSWRfetcher } from "#/api/utils";
+import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
+import { Spinner } from "#/components/Spinner/Spinner";
+import { useScrollPosition } from "#/hooks/useScrollPosition";
+import { useUserStore } from "#/store/auth";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import useSWRInfinite from "swr/infinite";
+
+export const DiscoverWatchingPage = () => {
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  const [content, setContent] = useState(null);
+
+  const getKey = (pageIndex: number, previousPageData: any) => {
+    if (previousPageData && !previousPageData.content.length) return null;
+
+    let url: string;
+    url = `${ENDPOINTS.discover.watching}/${pageIndex}`;
+
+    if (userStore.token) {
+      url += `?token=${userStore.token}`;
+    }
+
+    return url;
+  };
+
+  const { data, error, isLoading, size, setSize } = useSWRInfinite(
+    getKey,
+    useSWRfetcher
+  );
+
+  useEffect(() => {
+    if (data) {
+      let allContent = [];
+      for (let i = 0; i < data.length; i++) {
+        allContent.push(...data[i].content);
+      }
+      setContent(allContent);
+    }
+  }, [data]);
+
+  const scrollPosition = useScrollPosition();
+  useEffect(() => {
+    if (scrollPosition >= 98 && scrollPosition <= 99) {
+      setSize(size + 1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+
+  return (
+    <>
+      {error ?
+        <main className="flex items-center justify-center min-h-screen">
+          <div className="flex flex-col gap-2">
+            <h1 className="text-2xl font-bold">Ошибка</h1>
+            <p className="text-lg">
+              Произошла ошибка при загрузке. Попробуйте обновить страницу или
+              зайдите позже.
+            </p>
+          </div>
+        </main>
+      : !content ?
+        <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
+          <Spinner />
+        </div>
+      : <ReleaseSection content={content} sectionTitle={"Смотрят сейчас"} />}
+      {content && isLoading ?
+        <div className="flex flex-col items-center justify-center min-w-full min-h-16">
+          <Spinner />
+        </div>
+      : ""}
+    </>
+  );
+};