From 7d15eef691c45f502118909c54c17632b9300f9a Mon Sep 17 00:00:00 2001 From: Radiquum Date: Wed, 27 Aug 2025 23:40:28 +0500 Subject: [PATCH] anix/feat: add recommendations and watching pages to discovery --- app/components/Discovery/DiscussingToday.tsx | 9 ++- app/discovery/recommendations/page.tsx | 12 +++ app/discovery/watching/page.tsx | 12 +++ app/pages/DiscoverRecommendations.tsx | 84 ++++++++++++++++++++ app/pages/DiscoverWatching.tsx | 79 ++++++++++++++++++ 5 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 app/discovery/recommendations/page.tsx create mode 100644 app/discovery/watching/page.tsx create mode 100644 app/pages/DiscoverRecommendations.tsx create mode 100644 app/pages/DiscoverWatching.tsx diff --git a/app/components/Discovery/DiscussingToday.tsx b/app/components/Discovery/DiscussingToday.tsx index 71a4692..948273b 100644 --- a/app/components/Discovery/DiscussingToday.tsx +++ b/app/components/Discovery/DiscussingToday.tsx @@ -24,13 +24,18 @@ export const DiscussingToday = () => { return (
-

Обсуждаемое сегодня

-
+
+

+ Обсуждаемое сегодня +

+
+
{data.content.map((item) => { return ( ; +} diff --git a/app/discovery/watching/page.tsx b/app/discovery/watching/page.tsx new file mode 100644 index 0000000..799d3f0 --- /dev/null +++ b/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 ; +} diff --git a/app/pages/DiscoverRecommendations.tsx b/app/pages/DiscoverRecommendations.tsx new file mode 100644 index 0000000..8578993 --- /dev/null +++ b/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 ? +
+
+

Ошибка

+

+ Произошла ошибка при загрузке рекомендаций. Попробуйте обновить + страницу или зайдите позже. +

+
+
+ : !content ? +
+ +
+ : } + {content && isLoading ? +
+ +
+ : ""} + + ); +}; diff --git a/app/pages/DiscoverWatching.tsx b/app/pages/DiscoverWatching.tsx new file mode 100644 index 0000000..5ab4256 --- /dev/null +++ b/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 ? +
+
+

Ошибка

+

+ Произошла ошибка при загрузке. Попробуйте обновить страницу или + зайдите позже. +

+
+
+ : !content ? +
+ +
+ : } + {content && isLoading ? +
+ +
+ : ""} + + ); +};