From b10a4fabb0a5f611899a3198679ad98e5ef662bb Mon Sep 17 00:00:00 2001 From: Radiquum Date: Thu, 20 Mar 2025 23:15:58 +0500 Subject: [PATCH] refactor: fetcher -> useSWRfetcher --- app/components/Profile/Profile.EditModal.tsx | 18 ++------------ .../Profile/Profile.ReleaseRatings.tsx | 24 ++++--------------- .../ReleaseInfo/ReleaseInfo.UserList.tsx | 17 ++----------- app/pages/Favorites.tsx | 21 +++------------- app/pages/History.tsx | 20 +++------------- app/pages/Related.tsx | 18 +++----------- 6 files changed, 17 insertions(+), 101 deletions(-) diff --git a/app/components/Profile/Profile.EditModal.tsx b/app/components/Profile/Profile.EditModal.tsx index 805e0f8..95eab1c 100644 --- a/app/components/Profile/Profile.EditModal.tsx +++ b/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]; } diff --git a/app/components/Profile/Profile.ReleaseRatings.tsx b/app/components/Profile/Profile.ReleaseRatings.tsx index 82ec2da..6c6f978 100644 --- a/app/components/Profile/Profile.ReleaseRatings.tsx +++ b/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(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 && } - {isLoadingEnd && !isLoading && content.length > 0 ? ( + {isLoading && } + {content && content.length > 0 ? ( content.map((release) => { return ( { - 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 } ); diff --git a/app/pages/Favorites.tsx b/app/pages/Favorites.tsx index ce593de..9589599 100644 --- a/app/pages/Favorites.tsx +++ b/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() { {content && content.length > 0 ? ( - ) : !isLoadingEnd || isLoading ? ( + ) : isLoading ? (
diff --git a/app/pages/History.tsx b/app/pages/History.tsx index 19bf43b..73c9f10 100644 --- a/app/pages/History.tsx +++ b/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() { )} - ) : !isLoadingEnd || isLoading ? ( + ) : isLoading ? (
diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx index 70ff44a..beb5d05 100644 --- a/app/pages/Related.tsx +++ b/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 })} - ) : !isLoadingEnd || isLoading ? ( + ) : isLoading ? (