From 9a5d1eb6bd8bc1150bbbd2d644db299ed9655f63 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Wed, 14 Aug 2024 14:54:21 +0500 Subject: [PATCH] feat: add view of release name, description, image, author, releases in lists and releases in collection --- app/collection/[id]/page.tsx | 33 +++++ .../CollectionInfo/CollectionInfo.Basics.tsx | 47 +++++++ .../CollectionInfo/CollectionInfoLists.tsx | 58 +++++++++ app/pages/ViewCollection.tsx | 118 ++++++++++++++++++ 4 files changed, 256 insertions(+) create mode 100644 app/collection/[id]/page.tsx create mode 100644 app/components/CollectionInfo/CollectionInfo.Basics.tsx create mode 100644 app/components/CollectionInfo/CollectionInfoLists.tsx create mode 100644 app/pages/ViewCollection.tsx diff --git a/app/collection/[id]/page.tsx b/app/collection/[id]/page.tsx new file mode 100644 index 0000000..b29a028 --- /dev/null +++ b/app/collection/[id]/page.tsx @@ -0,0 +1,33 @@ +import { ViewCollectionPage } from "#/pages/ViewCollection"; +import { fetchDataViaGet } from "#/api/utils"; +import type { Metadata, ResolvingMetadata } from "next"; + +export async function generateMetadata( + { params }, + parent: ResolvingMetadata +): Promise { + const id = params.id; + const collection = await fetchDataViaGet( + `https://api.anixart.tv/collection/${id}` + ); + const previousOG = (await parent).openGraph; + + return { + title: "коллекция - " + collection.collection.title, + description: collection.collection.description, + openGraph: { + ...previousOG, + images: [ + { + url: collection.collection.image, // Must be an absolute URL + width: 600, + height: 800, + }, + ], + }, + }; +} + +export default async function Collections({ params }) { + return ; +} diff --git a/app/components/CollectionInfo/CollectionInfo.Basics.tsx b/app/components/CollectionInfo/CollectionInfo.Basics.tsx new file mode 100644 index 0000000..6bc0d7b --- /dev/null +++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx @@ -0,0 +1,47 @@ +import { Card, Button, Avatar } from "flowbite-react"; +import { useState } from "react"; +import { unixToDate } from "#/api/utils"; +import Link from "next/link"; + +export const CollectionInfoBasics = (props: { + image: string; + title: string; + description: string; + authorAvatar: string; + authorLogin: string; + authorId: number; + creationDate: number; + updateDate: number; +}) => { + return ( + +
+
+

создана: {unixToDate(props.creationDate, "full")}

+

обновлена: {unixToDate(props.updateDate, "full")}

+
+ + +
+
{props.authorLogin}
+
Автор
+
+ + +
+
+ +
+
+

{props.title}

+

{props.description}

+
+ + ); +}; diff --git a/app/components/CollectionInfo/CollectionInfoLists.tsx b/app/components/CollectionInfo/CollectionInfoLists.tsx new file mode 100644 index 0000000..bcd64a7 --- /dev/null +++ b/app/components/CollectionInfo/CollectionInfoLists.tsx @@ -0,0 +1,58 @@ +import { Card } from "flowbite-react"; + +export const CollectionInfoLists = (props: { + completed: number; + planned: number; + abandoned: number; + delayed: number; + watching: number; + total: number; +}) => { + return ( + +
+
+
+
+
+
+
+
+
+

+ + Смотрю {props.watching} +

+

+ + В планах {props.planned} +

+

+ + Просмотрено {props.completed} +

+

+ + Отложено {props.delayed} +

+

+ + Брошено {props.abandoned} +

+
+ + ); +}; diff --git a/app/pages/ViewCollection.tsx b/app/pages/ViewCollection.tsx new file mode 100644 index 0000000..f724c0f --- /dev/null +++ b/app/pages/ViewCollection.tsx @@ -0,0 +1,118 @@ +"use client"; +import useSWRInfinite from "swr/infinite"; +import useSWR from "swr"; +import { Spinner } from "#/components/Spinner/Spinner"; +import { useState, useEffect } from "react"; +import { useScrollPosition } from "#/hooks/useScrollPosition"; +import { useUserStore } from "../store/auth"; +import { Button, Card } from "flowbite-react"; +import { ENDPOINTS } from "#/api/config"; +import { useRouter } from "next/navigation"; +import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection"; + +import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics"; +import { CollectionInfoLists } from "#/components/CollectionInfo/CollectionInfoLists"; + +const fetcher = async (url: string) => { + const res = await fetch(url); + + if (!res.ok) { + const error = new Error( + `An error occurred while fetching the data. status: ${res.status}` + ); + error.message = await res.json(); + throw error; + } + + return res.json(); +}; + +export const ViewCollectionPage = (props: { id: number }) => { + const userStore = useUserStore(); + const [isLoadingEnd, setIsLoadingEnd] = useState(false); + const router = useRouter(); + + function useFetchCollectionInfo() { + let url: string = `${ENDPOINTS.collection.base}/${props.id}`; + + if (userStore.token) { + url += `?token=${userStore.token}`; + } + + const { data, isLoading } = useSWR(url, fetcher); + return [data, isLoading]; + } + const getKey = (pageIndex: number, previousPageData: any) => { + if (previousPageData && !previousPageData.content.length) return null; + let url: string = `${ENDPOINTS.collection.base}/${props.id}/releases/${pageIndex}`; + if (userStore.token) { + url += `?token=${userStore.token}`; + } + return url; + }; + + const [collectionInfo, collectionInfoIsLoading] = useFetchCollectionInfo(); + + const { data, error, isLoading, size, setSize } = useSWRInfinite( + getKey, + fetcher, + { initialSize: 2 } + ); + + const [content, setContent] = useState(null); + useEffect(() => { + if (data) { + let allReleases = []; + for (let i = 0; i < data.length; i++) { + allReleases.push(...data[i].content); + } + setContent(allReleases); + setIsLoadingEnd(true); + } + }, [data]); + + const scrollPosition = useScrollPosition(); + useEffect(() => { + if (scrollPosition >= 98 && scrollPosition <= 99) { + setSize(size + 1); + } + }, [scrollPosition]); + + return ( +
+ {collectionInfoIsLoading ? ( + + ) : ( + <> +
+ + {userStore.token && !isLoading && ( + + )} +
+ {isLoading || !content || !isLoadingEnd ? ( + + ) : ( + + )} + + )} +
+ ); +};