From e85112a7b1ef2259cf3fef672ce18d03c015edfd Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Thu, 18 Jan 2024 20:55:44 +0900 Subject: [PATCH] refactor : rank Api querykey factor - #867 --- src/api/attendanceApi.ts | 39 ++++++++++++++++++- src/api/memberApi.ts | 13 ++++++- src/api/rankApi.ts | 45 ---------------------- src/pages/Game/Baseball/api/baseballApi.ts | 18 ++++++++- src/pages/rank/Rank.tsx | 9 ++--- 5 files changed, 69 insertions(+), 55 deletions(-) delete mode 100644 src/api/rankApi.ts diff --git a/src/api/attendanceApi.ts b/src/api/attendanceApi.ts index 098d433af..098a266f8 100644 --- a/src/api/attendanceApi.ts +++ b/src/api/attendanceApi.ts @@ -1,9 +1,17 @@ import { useQuery } from 'react-query'; import axios from 'axios'; import { DateTime } from 'luxon'; -import { CallenderChartInfo, TodayAttendInfo, TodayAttendPoint } from './dto'; +import { + AttendRankInfo, + CallenderChartInfo, + PageAndSize, + TodayAttendInfo, + TodayAttendPoint, + TodayAttendRank, +} from './dto'; const attendanceKeys = { + base: ['attendances'] as const, todayAttendancePoint: ['todayAttendancePoint'], todayAttendanceInfo: ({ memberId }: { memberId: number }) => ['todayAttendanceInfo', memberId], attendanceInfoList: ({ memberId, year }: { memberId: number; year: number }) => [ @@ -11,6 +19,8 @@ const attendanceKeys = { memberId, year, ], + todayAttendanceRank: (param: PageAndSize) => [...attendanceKeys.base, 'today-rank', param] as const, + continuousAttendanceRank: () => [...attendanceKeys.base, 'continuous-rank'] as const, }; const useGetTodayAttendancePointQuery = () => { @@ -36,4 +46,29 @@ const useGetAttendanceInfoListQuery = ({ memberId, year }: { memberId: number; y return useQuery(attendanceKeys.attendanceInfoList({ memberId, year }), fetcher); }; -export { useGetTodayAttendancePointQuery, useGetTodayAttendanceInfoQuery, useGetAttendanceInfoListQuery }; +const useGetTodayAttendanceRank = ({ page, size = 10 }: PageAndSize) => { + const fetcher = () => + axios + .get('/attendances/today-rank', { + params: { page, size }, + }) + .then(({ data }) => data); + + return useQuery(attendanceKeys.todayAttendanceRank({ page, size }), fetcher, { + keepPreviousData: true, + }); +}; + +const useGetContinuousAttendanceRank = () => { + const fetcher = () => axios.get('/attendances/continuous-rank').then(({ data }) => data); + + return useQuery(attendanceKeys.continuousAttendanceRank(), fetcher); +}; + +export { + useGetTodayAttendancePointQuery, + useGetTodayAttendanceInfoQuery, + useGetAttendanceInfoListQuery, + useGetTodayAttendanceRank, + useGetContinuousAttendanceRank, +}; diff --git a/src/api/memberApi.ts b/src/api/memberApi.ts index ded70c331..5568e97c8 100644 --- a/src/api/memberApi.ts +++ b/src/api/memberApi.ts @@ -4,10 +4,12 @@ import axios from 'axios'; import { PASSWORD } from '@constants/apiResponseMessage'; import { useApiError } from '@hooks/useGetApiError'; import { formatGeneration } from '@utils/converter'; -import { ProfileInfo, MemberDetailInfo } from './dto'; +import { ProfileInfo, MemberDetailInfo, PageAndSize, PointRank } from './dto'; const memberKeys = { + base: ['member'] as const, memberList: ['member', 'memberList'] as const, + pointRank: (param: PageAndSize) => [...memberKeys.base, 'point_rank', param] as const, }; const profileKeys = { profileInfo: (memberId: number) => ['profile', 'profileInfo', memberId] as const, @@ -191,6 +193,14 @@ const useDeleteMemberMutation = () => { }); }; +const useGetPointRank = ({ page, size = 10 }: PageAndSize) => { + const fetcher = () => axios.get('/members/point-rank', { params: { page, size } }).then(({ data }) => data); + + return useQuery(memberKeys.pointRank({ page, size }), fetcher, { + keepPreviousData: true, + }); +}; + export { useGetMembersQuery, useGetProfileQuery, @@ -204,4 +214,5 @@ export { useWithdrawalMutation, useEditMemberTypeMutation, useDeleteMemberMutation, + useGetPointRank, }; diff --git a/src/api/rankApi.ts b/src/api/rankApi.ts deleted file mode 100644 index fc82b869d..000000000 --- a/src/api/rankApi.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { useQuery } from 'react-query'; -import axios from 'axios'; -import { AttendRankInfo, GameRankInfo, PageAndSize, PointRank, TodayAttendRank } from './dto'; - -const rankKeys = { - todayAttendanceRank: (param: PageAndSize) => ['today-attendance-rank', param] as const, - continuousAttendanceRank: ['continuous-attendance-rank'] as const, - pointRank: (param: PageAndSize) => ['point-rank', param] as const, - gameRank: ['game-rank'] as const, -}; - -const useGetTodayAttendanceRank = ({ page, size = 10 }: PageAndSize) => { - const fetcher = () => - axios - .get('/attendances/today-rank', { - params: { page, size }, - }) - .then(({ data }) => data); - - return useQuery(rankKeys.todayAttendanceRank({ page, size }), fetcher, { - keepPreviousData: true, - }); -}; - -const useGetContinuousAttendanceRank = () => { - const fetcher = () => axios.get('/attendances/continuous-rank').then(({ data }) => data); - - return useQuery(rankKeys.continuousAttendanceRank, fetcher); -}; - -const useGetPointRank = ({ page, size = 10 }: PageAndSize) => { - const fetcher = () => axios.get('/members/point-rank', { params: { page, size } }).then(({ data }) => data); - - return useQuery(rankKeys.pointRank({ page, size }), fetcher, { - keepPreviousData: true, - }); -}; - -const useGetGameRank = () => { - const fetcher = () => axios.get('/game/rank').then(({ data }) => data); - - return useQuery(rankKeys.gameRank, fetcher); -}; - -export { useGetTodayAttendanceRank, useGetContinuousAttendanceRank, useGetPointRank, useGetGameRank }; diff --git a/src/pages/Game/Baseball/api/baseballApi.ts b/src/pages/Game/Baseball/api/baseballApi.ts index b70d40326..24015290d 100644 --- a/src/pages/Game/Baseball/api/baseballApi.ts +++ b/src/pages/Game/Baseball/api/baseballApi.ts @@ -1,14 +1,17 @@ import toast from 'react-hot-toast'; import { useQuery, useMutation, useQueryClient } from 'react-query'; import axios from 'axios'; +import { GameRankInfo } from '@api/dto'; import { gameKeys } from '@api/gameApi'; import { useApiError } from '@hooks/useGetApiError'; import { GameInfo, GameResultInfo, GameStatus } from './baseballDto'; export const baseballKeys = { + base: ['game'] as const, game_info: ['game_info'] as const, status: ['status'] as const, result: ['result'] as const, + gameRank: () => [...baseballKeys.base, 'rank'] as const, }; const useGetGameInfoQuery = () => { @@ -69,4 +72,17 @@ const useGetResultQuery = () => { return useQuery(baseballKeys.result, fetcher); }; -export { useGetGameInfoQuery, useGetBaseBallStatusQuery, useGameStartMutation, useGuessMutation, useGetResultQuery }; +const useGetGameRank = () => { + const fetcher = () => axios.get('/game/rank').then(({ data }) => data); + + return useQuery(baseballKeys.gameRank(), fetcher); +}; + +export { + useGetGameInfoQuery, + useGetBaseBallStatusQuery, + useGameStartMutation, + useGuessMutation, + useGetResultQuery, + useGetGameRank, +}; diff --git a/src/pages/rank/Rank.tsx b/src/pages/rank/Rank.tsx index 1e4801b79..d5da97ac5 100644 --- a/src/pages/rank/Rank.tsx +++ b/src/pages/rank/Rank.tsx @@ -1,15 +1,12 @@ import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import { Typography } from '@mui/material'; +import { useGetContinuousAttendanceRank, useGetTodayAttendanceRank } from '@api/attendanceApi'; import { AttendRankInfo, GameRankInfo } from '@api/dto'; -import { - useGetContinuousAttendanceRank, - useGetGameRank, - useGetPointRank, - useGetTodayAttendanceRank, -} from '@api/rankApi'; +import { useGetPointRank } from '@api/memberApi'; import usePagination from '@hooks/usePagination'; import { formatGeneration } from '@utils/converter'; +import { useGetGameRank } from '@pages/Game/Baseball/api/baseballApi'; import ServerAvatar from '@components/Avatar/ServerAvatar'; import OutlinedButton from '@components/Button/OutlinedButton'; import StandardTab from '@components/Tab/StandardTab';