feat: update fetcher for collections

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) =>
+import { useSWRfetcher } from "#/api/utils";
-  fetch([...args] as any).then((res) => res.json());
 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);
+    const { data, error } = useSWR(url, useSWRfetcher);
-    return [data];
+    return [data, error];
   }
 
-  const [userCollections] = useFetchReleases("userCollections");
+  const [userCollections, userCollectionsError] =
-  const [favoriteCollections] = useFetchReleases("userFavoriteCollections");
+    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) && (
+        <main className="flex items-center justify-center min-h-screen">
+          <div className="flex flex-col gap-2">
+            <h1 className="text-2xl font-bold">Ошибка</h1>
+            <p className="text-lg">
+              Произошла ошибка при загрузке коллекций. Попробуйте обновить
+              страницу или зайдите позже.
+            </p>
+          </div>
+        </main>
+      )}
     </>
   );
 }

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";
-
+import { useSWRfetcher } from "#/api/utils";
-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 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 (
+      <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
+        <Spinner />
+      </div>
+    );
+  };
+
+  if (error) {
+    return (
+      <main className="flex items-center justify-center min-h-screen">
+        <div className="flex flex-col gap-2">
+          <h1 className="text-2xl font-bold">Ошибка</h1>
+          <p className="text-lg">
+            Произошла ошибка при загрузке коллекций. Попробуйте обновить страницу
+            или зайдите позже.
+          </p>
+        </div>
+      </main>
+    );
+  };
+
   return (
     <>
-      {content && content.length > 0 ? (
+      {content && content.length > 0 ?
         <CollectionsSection
           sectionTitle={props.title}
           content={content}
           isMyCollections={
-            props.type == "profile" && userStore.user && props.profile_id == userStore.user.id
+            props.type == "profile" &&
+            userStore.user &&
+            props.profile_id == userStore.user.id
           }
         />
-      ) : !isLoadingEnd || isLoading ? (
+      : <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
-        <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
-          <Spinner />
-        </div>
-      ) : (
-        <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
           <span className="w-24 h-24 iconify-color twemoji--broken-heart"></span>
           <p>Тут пока ничего нет...</p>
         </div>
-      )}
+      }
       {data &&
         data[data.length - 1].current_page <
           data[data.length - 1].total_page_count && (

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) => {
+import { useSWRfetcher } from "#/api/utils";
-  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(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);
+    const { data, error, isLoading } = useSWR(url, useSWRfetcher);
-    return [data, isLoading];
+    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] =
+  const [
-    useFetchCollectionInfo("comments");
+    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 (
+      <div className="flex items-center justify-center w-full h-screen">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (error || collectionInfoError) {
+    return (
+      <main className="flex items-center justify-center min-h-screen">
+        <div className="flex flex-col gap-2">
+          <h1 className="text-2xl font-bold">Ошибка</h1>
+          <p className="text-lg">
+            Произошла ошибка при загрузке коллекции. Попробуйте обновить
+            страницу или зайдите позже.
+          </p>
+        </div>
+      </main>
+    );
+  }
+
   return (
     <>
-      {collectionInfoIsLoading ? (
+      {collectionInfoIsLoading ?
         <div className="flex items-center justify-center w-full h-screen">
           <Spinner />
         </div>
-      ) : (
+      : collectionInfo && (
-        collectionInfo && (
           <>
             <div className="flex flex-col flex-wrap gap-2 px-2 pb-2 sm:flex-row">
               <CollectionInfoBasics
@@ -138,11 +146,7 @@ export const ViewCollectionPage = (props: { id: number }) => {
                 )}
               </div>
             </div>
-            {isLoading || !content || !isLoadingEnd ? (
+            {content && (
-              <div className="flex items-center justify-center w-full h-screen">
-                <Spinner />
-              </div>
-            ) : (
               <ReleaseSection
                 sectionTitle={"Релизов в коллекции: " + data[0].total_count}
                 content={content}
@@ -150,7 +154,7 @@ export const ViewCollectionPage = (props: { id: number }) => {
             )}
           </>
         )
-      )}
+      }
     </>
   );
 };