From bf24cd10636aa6f2febd3d8d23acc6238ddbbd73 Mon Sep 17 00:00:00 2001 From: Radiquum Date: Wed, 27 Aug 2025 23:11:04 +0500 Subject: [PATCH] anix/feat: add collections page for discovery page --- .../Discovery/CollectionsOfTheWeek.tsx | 2 +- app/discovery/collections/page.tsx | 12 ++ app/discovery/popular/page.tsx | 12 -- app/pages/Discover.tsx | 8 +- app/pages/DiscoverCollections.tsx | 154 ++++++++++++++++++ 5 files changed, 174 insertions(+), 14 deletions(-) create mode 100644 app/discovery/collections/page.tsx delete mode 100644 app/discovery/popular/page.tsx create mode 100644 app/pages/DiscoverCollections.tsx diff --git a/app/components/Discovery/CollectionsOfTheWeek.tsx b/app/components/Discovery/CollectionsOfTheWeek.tsx index a132684..cec280a 100644 --- a/app/components/Discovery/CollectionsOfTheWeek.tsx +++ b/app/components/Discovery/CollectionsOfTheWeek.tsx @@ -24,7 +24,7 @@ export const CollectionsOfTheWeek = () => { return ( ); diff --git a/app/discovery/collections/page.tsx b/app/discovery/collections/page.tsx new file mode 100644 index 0000000..ff026f3 --- /dev/null +++ b/app/discovery/collections/page.tsx @@ -0,0 +1,12 @@ +import { DiscoverCollectionsPage } from "#/pages/DiscoverCollections"; + +export const metadata = { + title: "Обзор - Коллекции", + description: "", +}; + +export const dynamic = "force-static"; + +export default function Discover() { + return ; +} diff --git a/app/discovery/popular/page.tsx b/app/discovery/popular/page.tsx deleted file mode 100644 index f16fc9d..0000000 --- a/app/discovery/popular/page.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { DiscoverPage } from "#/pages/Discover"; - -export const metadata = { - title: "Обзор - Популярное", - description: "Популярные релизы", -}; - -export const dynamic = "force-static"; - -export default function Discover() { - return ; -} diff --git a/app/pages/Discover.tsx b/app/pages/Discover.tsx index ab70259..13f33c9 100644 --- a/app/pages/Discover.tsx +++ b/app/pages/Discover.tsx @@ -6,9 +6,11 @@ import { PopularModal } from "#/components/Discovery/Modal/PopularModal"; import { RecommendedCarousel } from "#/components/Discovery/RecommendedCarousel"; import { WatchingNowCarousel } from "#/components/Discovery/WatchingNowCarousel"; import { Button } from "flowbite-react"; +import { useRouter } from "next/navigation"; import { useState } from "react"; export const DiscoverPage = () => { + const router = useRouter(); const [PopularModalOpen, setPopularModalOpen] = useState(false); return ( @@ -27,7 +29,11 @@ export const DiscoverPage = () => { Расписание - diff --git a/app/pages/DiscoverCollections.tsx b/app/pages/DiscoverCollections.tsx new file mode 100644 index 0000000..22b1aee --- /dev/null +++ b/app/pages/DiscoverCollections.tsx @@ -0,0 +1,154 @@ +"use client"; + +import { ENDPOINTS } from "#/api/config"; +import { useSWRfetcher } from "#/api/utils"; +import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection"; +import { Spinner } from "#/components/Spinner/Spinner"; +import { useScrollPosition } from "#/hooks/useScrollPosition"; +import { useUserStore } from "#/store/auth"; +import { Button, ButtonGroup } from "flowbite-react"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useEffect, useState } from "react"; +import useSWRInfinite from "swr/infinite"; + +export const DiscoverCollectionsSort = [ + { + id: "all_time_popular", + name: "Популярные за всё время", + where: 1, + sort: 1, + }, + { + id: "year_popular", + name: "Популярные за год", + where: 1, + sort: 2, + }, + { + id: "season_popular", + name: "Популярные за сезон", + where: 1, + sort: 3, + }, + { + id: "week_popular", + name: "Популярные за неделю", + where: 1, + sort: 4, + }, + { + id: "recent", + name: "Недавно добавленные", + where: 1, + sort: 5, + }, + { + id: "random", + name: "Случайные", + where: 1, + sort: 6, + }, +]; + +export const DiscoverCollectionsPage = () => { + const userStore = useUserStore(); + const searchParams = useSearchParams(); + const router = useRouter(); + + const [previousPage, setPreviousPage] = useState(0); + const [selectedSort, setSelectedSort] = useState( + searchParams.get("sort") || "recent" + ); + const [content, setContent] = useState(null); + + const getKey = (pageIndex: number, previousPageData: any) => { + if (previousPageData && !previousPageData.content.length) return null; + + let where = null; + let sort = null; + let obj = null; + obj = DiscoverCollectionsSort.find((item) => item.id == selectedSort); + + if (obj) { + where = obj.where; + sort = obj.sort; + } else { + where = DiscoverCollectionsSort[5].where; + sort = DiscoverCollectionsSort[5].sort; + } + + let url: string; + url = `${ENDPOINTS.discover.collections}/${pageIndex}?where=${where}&sort=${sort}&previous_page=${previousPage}`; + + if (userStore.token) { + url += `&token=${userStore.token}`; + } + + return url; + }; + + const { data, error, isLoading, size, setSize } = useSWRInfinite( + getKey, + useSWRfetcher + ); + + useEffect(() => { + router.replace("/discovery/collections?sort=" + selectedSort); + setContent(null); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedSort]); + + 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]); + + return ( + <> +
+ + {Object.entries(DiscoverCollectionsSort).map(([key, item]) => { + return ( + + ); + })} + +
+ {error ? +
+
+

Ошибка

+

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

+
+
+ : isLoading || !content ? +
+ +
+ : } + + ); +};