"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"; import { CollectionInfoControls } from "#/components/CollectionInfo/CollectionInfoControls"; 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 ? (
) : ( collectionInfo && ( <>
{userStore.token && !isLoading && (
)}
{isLoading || !content || !isLoadingEnd ? (
) : ( )} ) )}
); };