diff --git a/app/pages/Collections.tsx b/app/pages/Collections.tsx index 54abe73..bb0413b 100644 --- a/app/pages/Collections.tsx +++ b/app/pages/Collections.tsx @@ -2,8 +2,7 @@ import useSWR from "swr"; import { CollectionCourusel } from "#/components/CollectionCourusel/CollectionCourusel"; import { Spinner } from "#/components/Spinner/Spinner"; -const fetcher = (...args: any) => - fetch([...args] as any).then((res) => res.json()); +import { useSWRfetcher } from "#/api/utils"; import { useUserStore } from "#/store/auth"; import { ENDPOINTS } from "#/api/config"; import { useRouter } from "next/navigation"; @@ -25,12 +24,15 @@ export function CollectionsPage() { } } - const { data } = useSWR(url, fetcher); - return [data]; + const { data, error } = useSWR(url, useSWRfetcher); + return [data, error]; } - const [userCollections] = useFetchReleases("userCollections"); - const [favoriteCollections] = useFetchReleases("userFavoriteCollections"); + const [userCollections, userCollectionsError] = + useFetchReleases("userCollections"); + const [favoriteCollections, favoriteCollectionsError] = useFetchReleases( + "userFavoriteCollections" + ); useEffect(() => { if (userStore.state === "finished" && !userStore.token) { @@ -114,6 +116,18 @@ export function CollectionsPage() { content={favoriteCollections.content} /> )} + + {(userCollectionsError || favoriteCollectionsError) && ( +
+
+

Ошибка

+

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

+
+
+ )} ); } diff --git a/app/pages/CollectionsFull.tsx b/app/pages/CollectionsFull.tsx index 144efa7..ba3e6ee 100644 --- a/app/pages/CollectionsFull.tsx +++ b/app/pages/CollectionsFull.tsx @@ -8,20 +8,7 @@ import { useUserStore } from "../store/auth"; import { Button } from "flowbite-react"; import { ENDPOINTS } from "#/api/config"; import { useRouter } from "next/navigation"; - -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(); -}; +import { useSWRfetcher } from "#/api/utils"; export function CollectionsFullPage(props: { type: "favorites" | "profile" | "release"; @@ -30,13 +17,12 @@ export function CollectionsFullPage(props: { release_id?: number; }) { const userStore = useUserStore(); - const [isLoadingEnd, setIsLoadingEnd] = useState(false); const router = useRouter(); const getKey = (pageIndex: number, previousPageData: any) => { if (previousPageData && !previousPageData.content.length) return null; - let url; + let url: string; if (props.type == "favorites") { url = `${ENDPOINTS.collection.favoriteCollections}/all/${pageIndex}`; @@ -55,7 +41,7 @@ export function CollectionsFullPage(props: { const { data, error, isLoading, size, setSize } = useSWRInfinite( getKey, - fetcher, + useSWRfetcher, { initialSize: 2 } ); @@ -67,7 +53,6 @@ export function CollectionsFullPage(props: { allReleases.push(...data[i].content); } setContent(allReleases); - setIsLoadingEnd(true); } }, [data]); @@ -90,26 +75,45 @@ export function CollectionsFullPage(props: { // eslint-disable-next-line react-hooks/exhaustive-deps }, [userStore.state, userStore.token]); + if (isLoading) { + return ( +
+ +
+ ); + }; + + if (error) { + return ( +
+
+

Ошибка

+

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

+
+
+ ); + }; + return ( <> - {content && content.length > 0 ? ( + {content && content.length > 0 ? - ) : !isLoadingEnd || isLoading ? ( -
- -
- ) : ( -
+ :

Тут пока ничего нет...

- )} + } {data && data[data.length - 1].current_page < data[data.length - 1].total_page_count && ( diff --git a/app/pages/ViewCollection.tsx b/app/pages/ViewCollection.tsx index d7b5872..abf995b 100644 --- a/app/pages/ViewCollection.tsx +++ b/app/pages/ViewCollection.tsx @@ -6,7 +6,6 @@ import { useState, useEffect } from "react"; import { useScrollPosition } from "#/hooks/useScrollPosition"; import { useUserStore } from "../store/auth"; import { ENDPOINTS } from "#/api/config"; -import { useRouter } from "next/navigation"; import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection"; import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics"; @@ -14,24 +13,10 @@ import { InfoLists } from "#/components/InfoLists/InfoLists"; import { CollectionInfoControls } from "#/components/CollectionInfo/CollectionInfoControls"; import { CommentsMain } from "#/components/Comments/Comments.Main"; -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(); -}; +import { useSWRfetcher } from "#/api/utils"; export const ViewCollectionPage = (props: { id: number }) => { const userStore = useUserStore(); - const [isLoadingEnd, setIsLoadingEnd] = useState(false); - const router = useRouter(); function useFetchCollectionInfo(type: "info" | "comments") { let url: string; @@ -46,8 +31,8 @@ export const ViewCollectionPage = (props: { id: number }) => { url += `${type != "info" ? "&" : "?"}token=${userStore.token}`; } - const { data, isLoading } = useSWR(url, fetcher); - return [data, isLoading]; + const { data, error, isLoading } = useSWR(url, useSWRfetcher); + return [data, error, isLoading]; } const getKey = (pageIndex: number, previousPageData: any) => { if (previousPageData && !previousPageData.content.length) return null; @@ -58,14 +43,17 @@ export const ViewCollectionPage = (props: { id: number }) => { return url; }; - const [collectionInfo, collectionInfoIsLoading] = + const [collectionInfo, collectionInfoError, collectionInfoIsLoading] = useFetchCollectionInfo("info"); - const [collectionComments, collectionCommentsIsLoading] = - useFetchCollectionInfo("comments"); + const [ + collectionComments, + collectionCommentsError, + collectionCommentsIsLoading, + ] = useFetchCollectionInfo("comments"); const { data, error, isLoading, size, setSize } = useSWRInfinite( getKey, - fetcher, + useSWRfetcher, { initialSize: 2 } ); @@ -77,7 +65,6 @@ export const ViewCollectionPage = (props: { id: number }) => { allReleases.push(...data[i].content); } setContent(allReleases); - setIsLoadingEnd(true); } }, [data]); @@ -89,14 +76,35 @@ export const ViewCollectionPage = (props: { id: number }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [scrollPosition]); + if (isLoading) { + return ( +
+ +
+ ); + } + + if (error || collectionInfoError) { + return ( +
+
+

Ошибка

+

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

+
+
+ ); + } + return ( <> - {collectionInfoIsLoading ? ( + {collectionInfoIsLoading ?
- ) : ( - collectionInfo && ( + : collectionInfo && ( <>
{ )}
- {isLoading || !content || !isLoadingEnd ? ( -
- -
- ) : ( + {content && ( { )} ) - )} + } ); };