From 09de31b6da42af1ba1b9db5a2b5bc2163174a80b Mon Sep 17 00:00:00 2001 From: LimSumi Date: Sun, 5 Nov 2023 22:42:50 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20useFetch=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PetApi.tsx => commons/apis/useFetch.tsx} | 6 ++-- src/pages/profileList/ProfileListHome.tsx | 4 +-- src/pages/profileList/newList/NewList.tsx | 22 ++------------- .../profileList/urgentList/UrgentList.tsx | 22 ++------------- src/pages/shelterInfo/ShelterInfo.tsx | 24 ++-------------- src/pages/shelterInfo/VShelterInfo.tsx | 3 -- src/pages/update/UpdateTemplate.tsx | 28 ++----------------- 7 files changed, 14 insertions(+), 95 deletions(-) rename src/{pages/profileList/api/PetApi.tsx => commons/apis/useFetch.tsx} (62%) diff --git a/src/pages/profileList/api/PetApi.tsx b/src/commons/apis/useFetch.tsx similarity index 62% rename from src/pages/profileList/api/PetApi.tsx rename to src/commons/apis/useFetch.tsx index d2b52f40..cf5c37fb 100644 --- a/src/pages/profileList/api/PetApi.tsx +++ b/src/commons/apis/useFetch.tsx @@ -1,5 +1,5 @@ -const getPetProfiles = async () => { - const response = await fetch(`${process.env.REACT_APP_URI}/pet/profiles`, { +const useFetch = async (url: any) => { + const response = await fetch(`${process.env.REACT_APP_URI}/${url}`, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -14,4 +14,4 @@ const getPetProfiles = async () => { return json.response; }; -export default getPetProfiles; +export default useFetch; diff --git a/src/pages/profileList/ProfileListHome.tsx b/src/pages/profileList/ProfileListHome.tsx index c8f83cb9..d529932d 100644 --- a/src/pages/profileList/ProfileListHome.tsx +++ b/src/pages/profileList/ProfileListHome.tsx @@ -1,8 +1,8 @@ import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; +import useFetch from 'commons/apis/useFetch'; import VProfileListHome, { ProfileListProps } from './VProfileListHome'; import ProfileListHomeSkeleton from './ProfileListHomeSkeleton'; -import getPetProfiles from './api/PetApi'; const ProfileListHome = () => { const [profileListProps, setProfileListProps] = @@ -10,7 +10,7 @@ const ProfileListHome = () => { const { data, isLoading, isError } = useQuery({ queryKey: ['pet-list'], - queryFn: getPetProfiles, + queryFn: () => useFetch('/pet/profiles'), }); useEffect(() => { diff --git a/src/pages/profileList/newList/NewList.tsx b/src/pages/profileList/newList/NewList.tsx index 51351563..b56a66ae 100644 --- a/src/pages/profileList/newList/NewList.tsx +++ b/src/pages/profileList/newList/NewList.tsx @@ -1,6 +1,7 @@ import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; +import useFetch from 'commons/apis/useFetch'; import VNewList, { Props } from './VNewList'; import NewListSkeleton from './NewListSkeleton'; @@ -15,28 +16,9 @@ const NewList = () => { const [newList, setNewList] = useState(null); - const getProfiles = async () => { - const response = await fetch( - `${process.env.REACT_APP_URI}/pet/profiles/new?page=${currentPage}`, - { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - }, - ); - - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const json = await response.json(); - return json.response; - }; - const { data, isLoading, isError } = useQuery({ queryKey: ['new-list', currentPage], - queryFn: getProfiles, + queryFn: () => useFetch(`/pet/profiles/new?page=${currentPage}`), }); useEffect(() => { diff --git a/src/pages/profileList/urgentList/UrgentList.tsx b/src/pages/profileList/urgentList/UrgentList.tsx index fa99662f..2d22cd2c 100644 --- a/src/pages/profileList/urgentList/UrgentList.tsx +++ b/src/pages/profileList/urgentList/UrgentList.tsx @@ -1,6 +1,7 @@ import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; +import useFetch from 'commons/apis/useFetch'; import VUrgentList, { Props } from './VUrgentList'; import UrgentListSkeleton from './UrgentListSkeleton'; @@ -15,28 +16,9 @@ const UrgentList = () => { const [urgentList, setUrgentList] = useState(null); - const getProfiles = async () => { - const response = await fetch( - `${process.env.REACT_APP_URI}/pet/profiles/sos?page=${currentPage}`, - { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - }, - ); - - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const json = await response.json(); - return json.response; - }; - const { data, isLoading, isError } = useQuery({ queryKey: ['urgent-list', currentPage], - queryFn: getProfiles, + queryFn: () => useFetch(`/pet/profiles/sos?page=${currentPage}`), }); useEffect(() => { diff --git a/src/pages/shelterInfo/ShelterInfo.tsx b/src/pages/shelterInfo/ShelterInfo.tsx index 00b6a741..f8192712 100644 --- a/src/pages/shelterInfo/ShelterInfo.tsx +++ b/src/pages/shelterInfo/ShelterInfo.tsx @@ -1,39 +1,21 @@ import { useNavigate, useParams } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; +import useFetch from 'commons/apis/useFetch'; import VShelterInfo, { Props } from './VShelterInfo'; import ShelterInfoSkeleton from './ShelterInfoSkeleton'; const ShelterInfo = () => { - const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태 + const [currentPage, setCurrentPage] = useState(1); const navigate = useNavigate(); const params = useParams(); const shelterId = params.id; const [profiles, setProfiles] = useState(null); - const getShelter = async () => { - const response = await fetch( - `${process.env.REACT_APP_URI}/shelter/${shelterId}?page=${currentPage}`, - { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - }, - ); - - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const json = await response.json(); - return json.response; - }; - const { data, isLoading, isError } = useQuery({ queryKey: ['page', currentPage], - queryFn: getShelter, + queryFn: () => useFetch(`/shelter/${shelterId}?page=${currentPage}`), }); console.log(data); diff --git a/src/pages/shelterInfo/VShelterInfo.tsx b/src/pages/shelterInfo/VShelterInfo.tsx index ebc15965..e7d23eb5 100644 --- a/src/pages/shelterInfo/VShelterInfo.tsx +++ b/src/pages/shelterInfo/VShelterInfo.tsx @@ -39,9 +39,6 @@ export interface Props { const VShelterInfo = (props: Props) => { const loginAccount = getCookie('accountInfo'); - console.log(loginAccount); - console.log(loginAccount.role); - console.log(loginAccount.id); return (
diff --git a/src/pages/update/UpdateTemplate.tsx b/src/pages/update/UpdateTemplate.tsx index 3baf83fc..464ddf08 100644 --- a/src/pages/update/UpdateTemplate.tsx +++ b/src/pages/update/UpdateTemplate.tsx @@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom'; import { useRecoilState } from 'recoil'; import registerState from 'recoil/registerState'; import DayModalInput from 'pages/register/DayModalInput'; +import useFetch from 'commons/apis/useFetch'; import UpdateHeader from './UpdateHeader'; import PatchStatusSelectGroup from './PatchStatusSelectGroup'; import UpdateRegisterForm from './UpdateRegisterForm'; @@ -12,40 +13,15 @@ import UpdateRegisterForm from './UpdateRegisterForm'; const UpdateTemplate = () => { const params = useParams(); const petId = params.id; - const cookie = getCookie('loginToken'); const [updateState, setUpdateState] = useRecoilState(registerState); const [error, setError] = useState({ isError: false, errorMessage: '', }); - // petInfo return - const getPetInfo = async () => { - const res = await fetch( - `${process.env.REACT_APP_URI}/pet/register-info/${petId}`, - { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${cookie}`, - }, - }, - ) - .then((response) => { - return response.json(); - }) - .then((apiData) => { - if (apiData.success === false) { - throw new Error(apiData.message); - } - return { ...apiData.response }; - }); - return res; - }; - const { data, isLoading, isError } = useQuery({ queryKey: ['pet-update'], - queryFn: () => getPetInfo(), + queryFn: () => useFetch(`/pet/register-info/${petId}`), onSuccess: (fetchedData) => { const { profileImageUrl, profileShortFormUrl, ...rest } = fetchedData; setUpdateState({ ...rest, isComplete: true });