refactor: fetcher -> useSWRfetcher

app/components/Profile/Profile.EditModal.tsx

@@ -5,7 +5,7 @@ import { Spinner } from "../Spinner/Spinner";
 import useSWR from "swr";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
-import { b64toBlob, unixToDate } from "#/api/utils";
+import { b64toBlob, unixToDate, useSWRfetcher } from "#/api/utils";
 import { ProfileEditPrivacyModal } from "./Profile.EditPrivacyModal";
 import { ProfileEditStatusModal } from "./Profile.EditStatusModal";
 import { ProfileEditSocialModal } from "./Profile.EditSocialModal";
@@ -14,20 +14,6 @@ import { useSWRConfig } from "swr";
 import { useUserStore } from "#/store/auth";
 import { ProfileEditLoginModal } from "./Profile.EditLoginModal";
 
-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 ProfileEditModal = (props: {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
@@ -70,7 +56,7 @@ export const ProfileEditModal = (props: {
   };
 
   function useFetchInfo(url: string) {
-    const { data, isLoading, error } = useSWR(url, fetcher);
+    const { data, isLoading, error } = useSWR(url, useSWRfetcher);
     return [data, isLoading, error];
   }
 

app/components/Profile/Profile.ReleaseRatings.tsx

@@ -11,7 +11,7 @@ import type {
   FlowbiteCarouselControlTheme,
 } from "flowbite-react";
 import Image from "next/image";
-import { unixToDate } from "#/api/utils";
+import { unixToDate, useSWRfetcher } from "#/api/utils";
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
 import { ENDPOINTS } from "#/api/config";
@@ -95,7 +95,6 @@ const ProfileReleaseRatingsModal = (props: {
   profile_id: number;
   token: string | null;
 }) => {
-  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
   const [currentRef, setCurrentRef] = useState<any>(null);
   const modalRef = useCallback((ref) => {
     setCurrentRef(ref);
@@ -110,23 +109,9 @@ const ProfileReleaseRatingsModal = (props: {
     return url;
   };
 
-  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();
-  };
-
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
     getKey,
-    fetcher,
+    useSWRfetcher,
     { initialSize: 2 }
   );
 
@@ -138,7 +123,6 @@ const ProfileReleaseRatingsModal = (props: {
         allReleases.push(...data[i].content);
       }
       setContent(allReleases);
-      setIsLoadingEnd(true);
     }
   }, [data]);
 
@@ -170,8 +154,8 @@ const ProfileReleaseRatingsModal = (props: {
         onScroll={handleScroll}
         ref={modalRef}
       >
-        {!isLoadingEnd && isLoading && <Spinner />}
+        {isLoading && <Spinner />}
-        {isLoadingEnd && !isLoading && content.length > 0 ? (
+        {content && content.length > 0 ? (
           content.map((release) => {
             return (
               <Link

app/components/ReleaseInfo/ReleaseInfo.UserList.tsx

@@ -3,6 +3,7 @@ import { ENDPOINTS } from "#/api/config";
 import Link from "next/link";
 import useSWRInfinite from "swr/infinite";
 import { useCallback, useEffect, useState } from "react";
+import { useSWRfetcher } from "#/api/utils";
 
 const lists = [
   { list: 0, name: "Не смотрю" },
@@ -124,20 +125,6 @@ export const ReleaseInfoUserList = (props: {
   );
 };
 
-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();
-};
-
 const AddReleaseToCollectionModal = (props: {
   isOpen: boolean;
   setIsOpen: (isopen: boolean) => void;
@@ -153,7 +140,7 @@ const AddReleaseToCollectionModal = (props: {
 
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
     getKey,
-    fetcher,
+    useSWRfetcher,
     { initialSize: 2 }
   );
 

app/pages/Favorites.tsx

@@ -9,6 +9,7 @@ import { Dropdown, Button } from "flowbite-react";
 import { sort } from "./common";
 import { ENDPOINTS } from "#/api/config";
 import { useRouter } from "next/navigation";
+import { useSWRfetcher } from "#/api/utils";
 
 const DropdownTheme = {
   floating: {
@@ -16,25 +17,10 @@ const DropdownTheme = {
   },
 };
 
-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 FavoritesPage() {
   const token = useUserStore((state) => state.token);
   const authState = useUserStore((state) => state.state);
   const [selectedSort, setSelectedSort] = useState(0);
-  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
   const router = useRouter();
   const [searchVal, setSearchVal] = useState("");
 
@@ -47,7 +33,7 @@ export function FavoritesPage() {
 
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
     getKey,
-    fetcher,
+    useSWRfetcher,
     { initialSize: 2 }
   );
 
@@ -59,7 +45,6 @@ export function FavoritesPage() {
         allReleases.push(...data[i].content);
       }
       setContent(allReleases);
-      setIsLoadingEnd(true);
     }
   }, [data]);
 
@@ -156,7 +141,7 @@ export function FavoritesPage() {
       </div>
       {content && content.length > 0 ? (
         <ReleaseSection content={content} />
-      ) : !isLoadingEnd || isLoading ? (
+      ) : isLoading ? (
         <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
           <Spinner />
         </div>

app/pages/History.tsx

@@ -8,25 +8,12 @@ import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
 import { Button } from "flowbite-react";
 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 HistoryPage() {
   const token = useUserStore((state) => state.token);
   const authState = useUserStore((state) => state.state);
-  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
   const router = useRouter();
   const [searchVal, setSearchVal] = useState("");
 
@@ -39,7 +26,7 @@ export function HistoryPage() {
 
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
     getKey,
-    fetcher,
+    useSWRfetcher,
     { initialSize: 2 }
   );
 
@@ -51,7 +38,6 @@ export function HistoryPage() {
         allReleases.push(...data[i].content);
       }
       setContent(allReleases);
-      setIsLoadingEnd(true);
     }
   }, [data]);
 
@@ -136,7 +122,7 @@ export function HistoryPage() {
             </Button>
           )}
         </>
-      ) : !isLoadingEnd || isLoading ? (
+      ) : isLoading ? (
         <div className="flex flex-col items-center justify-center min-w-full min-h-[100dvh]">
           <Spinner />
         </div>

app/pages/Related.tsx

@@ -6,22 +6,11 @@ import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
 import { ReleaseLink169Related } from "#/components/ReleaseLink/ReleaseLink.16_9Related";
+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 RelatedPage(props: {id: number|string, title: string}) {
   const token = useUserStore((state) => state.token);
-  const [isLoadingEnd, setIsLoadingEnd] = useState(false);
 
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
@@ -33,7 +22,7 @@ export function RelatedPage(props: {id: number|string, title: string}) {
 
   const { data, error, isLoading, size, setSize } = useSWRInfinite(
     getKey,
-    fetcher,
+    useSWRfetcher,
     { initialSize: 1 }
   );
 
@@ -45,7 +34,6 @@ export function RelatedPage(props: {id: number|string, title: string}) {
         allReleases.push(...data[i].content);
       }
       setContent(allReleases);
-      setIsLoadingEnd(true);
     }
   }, [data]);
 
@@ -70,7 +58,7 @@ export function RelatedPage(props: {id: number|string, title: string}) {
             return <ReleaseLink169Related {...release} key={release.id} _position={index + 1} />
           })}
         </div>
-      ) : !isLoadingEnd || isLoading ? (
+      ) : isLoading ? (
         <div className="flex flex-col items-center justify-center min-w-full min-h-screen">
           <Spinner />
         </div>