From 42408402fc3e9c36bfaf2858b7245ef6772bec04 Mon Sep 17 00:00:00 2001 From: jongwooha98 Date: Mon, 20 Dec 2021 03:04:23 +0900 Subject: [PATCH] refactor: refresh leaderboard - delete: promise.all to fetch town&user leaderboard - remove: throttled refresh --- src/hooks/useLeaderboard.ts | 42 ++++--- src/pages/Game2048/Home/Home.tsx | 119 ++++++++++-------- .../LeaderboardTabs/LeaderboardTabs.tsx | 6 +- 3 files changed, 92 insertions(+), 75 deletions(-) diff --git a/src/hooks/useLeaderboard.ts b/src/hooks/useLeaderboard.ts index caa65966..a920b52c 100644 --- a/src/hooks/useLeaderboard.ts +++ b/src/hooks/useLeaderboard.ts @@ -83,7 +83,7 @@ export const useLeaderboard = () => { [minigameApi.gameUserApi] ); - const updateLeaderboard = useCallback( + const updateUserLeaderboard = useCallback( async ({ gameType, size, @@ -91,32 +91,34 @@ export const useLeaderboard = () => { gameType: 'GAME_KARROT' | 'GAME_2048'; size: number; }) => { - try { - getTownLeaderboard({ gameType }).then((response) => { - if (response) setTownLeaderboard(response); - }); - getUserLeaderboard({ gameType, size }).then((response) => { - if (response) setUserLeaderboard(response); - }); - // const [townLeaderboard, userLeaderboard] = await Promise.all([ - // getTownLeaderboard({ gameType }), - // getUserLeaderboard({ gameType, size }), - // ]); - // if (userLeaderboard && townLeaderboard) { - // setTownLeaderboard(townLeaderboard); - // setUserLeaderboard(userLeaderboard); + const response = await getUserLeaderboard({ gameType, size }); + if (response) { + setUserLeaderboard(response); + return response; + } else { + return null; + } + }, + [getUserLeaderboard] + ); - // } - } catch (error) { - console.error(error); + const updateTownLeaderboard = useCallback( + async ({ gameType }: { gameType: 'GAME_KARROT' | 'GAME_2048' }) => { + const response = await getTownLeaderboard({ gameType }); + if (response) { + setTownLeaderboard(response); + return response; + } else { + return null; } }, - [getTownLeaderboard, getUserLeaderboard] + [getTownLeaderboard] ); return { townLeaderboard, userLeaderboard, - updateLeaderboard, + updateUserLeaderboard, + updateTownLeaderboard, }; }; diff --git a/src/pages/Game2048/Home/Home.tsx b/src/pages/Game2048/Home/Home.tsx index 960d5810..e95d034c 100644 --- a/src/pages/Game2048/Home/Home.tsx +++ b/src/pages/Game2048/Home/Home.tsx @@ -25,7 +25,7 @@ import { } from '../Leaderboard/Highlight'; import { ActiveUserCount } from 'components/ActiveUserCount'; import { useMyGame2048Data } from '../hooks'; -import { useThrottledCallback } from 'use-debounce/lib'; +// import { useThrottledCallback } from 'use-debounce/lib'; import { navHeight, PageContainer, pageHeight } from 'styles'; import ReactModal from 'react-modal'; import { CommentModal, Share } from './Modal'; @@ -43,8 +43,12 @@ export const Home: React.FC = () => { const { isInWebEnvironment, handleThirdPartyAgreement } = useMini(); const { user, town } = useUser(); const { rank, gameType } = useMyGame2048Data(); - const { townLeaderboard, userLeaderboard, updateLeaderboard } = - useLeaderboard(); + const { + townLeaderboard, + userLeaderboard, + updateTownLeaderboard, + updateUserLeaderboard, + } = useLeaderboard(); const { updateMyGameData } = useMyGameData(); const [isFirstInTown, setIsFirstInTown] = useState(false); const [isRanked, setIsRanked] = useState( @@ -137,7 +141,7 @@ export const Home: React.FC = () => { townLeaderboard, myTownId, }: { - townLeaderboard: TownLeaderboardType[]; + townLeaderboard: TownLeaderboardType[] | null; myTownId: string; }) => { if (townLeaderboard) { @@ -159,66 +163,73 @@ export const Home: React.FC = () => { ); // refresh leaderboard - const handleRefresh = useCallback(async () => { - try { - if (accessToken) { - const response = await updateMyGameData({ gameType: gameType }); - if (response) { - console.log(response); - setMyData({ - rank: response.rank, - score: response.score, - }); - updateLeaderboard({ - gameType: 'GAME_2048', - size: 100, - }).then(() => { + const handleRefresh = useCallback( + async ({ + gameType, + size, + }: { + gameType: 'GAME_KARROT' | 'GAME_2048'; + size: number; + }) => { + try { + if (accessToken) { + const response = await updateMyGameData({ gameType: gameType }); + if (response) { + setMyData({ + rank: response.rank, + score: response.score, + }); + updateUserLeaderboard({ gameType, size }); + updateTownLeaderboard({ + gameType, + }).then((response) => { + updateMyTownData({ + townLeaderboard: response, + myTownId: town.id!, + }); + }); + } + } else { + updateUserLeaderboard({ gameType, size }); + updateTownLeaderboard({ + gameType, + }).then((response) => { updateMyTownData({ - townLeaderboard: townLeaderboard, + townLeaderboard: response, myTownId: town.id!, }); }); } - } else { - updateLeaderboard({ - gameType: 'GAME_2048', - size: 100, + } catch (error) { + console.error(error); + updateUserLeaderboard({ gameType, size }); + updateTownLeaderboard({ + gameType, }).then((response) => { updateMyTownData({ - townLeaderboard: townLeaderboard, + townLeaderboard: response, myTownId: town.id!, }); }); } - } catch (error) { - console.error(error); - updateLeaderboard({ - gameType: 'GAME_2048', - size: 100, - }).then((response) => { - updateMyTownData({ - townLeaderboard: townLeaderboard, - myTownId: town.id!, - }); - }); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - accessToken, - gameType, - town.id, - - updateLeaderboard, - updateMyGameData, - updateMyTownData, - ]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [ + accessToken, + town.id, + updateMyGameData, + updateMyTownData, + updateTownLeaderboard, + updateUserLeaderboard, + ] + ); // Throttle refresh for 5 seconds - const throttledRefresh = useThrottledCallback(handleRefresh, 3000); + // const throttledRefresh = useThrottledCallback(()=>handleRefresh, 3000); useEffect(() => { if (isTop) { - handleRefresh(); + handleRefresh({ gameType: 'GAME_2048', size: 100 }); } if (rank !== 0) { setIsRanked(true); @@ -302,9 +313,11 @@ export const Home: React.FC = () => { > { - throttledRefresh()!.then(() => { - dispose(); - }); + handleRefresh({ gameType: 'GAME_2048', size: 100 })?.then( + () => { + dispose(); + } + ); }} className={css` --kf_pulltorefresh_backgroundColor: transparent; @@ -394,7 +407,9 @@ export const Home: React.FC = () => { > + handleRefresh({ gameType: 'GAME_2048', size: 100 }) + } /> diff --git a/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx b/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx index 0b60f608..9f40d58b 100644 --- a/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx +++ b/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx @@ -19,7 +19,7 @@ type Props = { }; export const LeaderboardTabs: React.FC = (props) => { const { isTop } = useCurrentScreen(); - const [activeTabKey, setActiveTabKey] = useState('district'); + const [activeTabKey, setActiveTabKey] = useState('town'); const handleTabChange = (key: string) => { if (isTop) { setActiveTabKey(key); @@ -37,7 +37,7 @@ export const LeaderboardTabs: React.FC = (props) => { activeTabKey={activeTabKey} tabs={[ { - key: 'district', + key: 'town', buttonLabel: '지역', component: useCallback( () => ( @@ -50,7 +50,7 @@ export const LeaderboardTabs: React.FC = (props) => { ), }, { - key: 'individual', + key: 'user', buttonLabel: '개인', component: useCallback( () => (