Merge branch 'fix/leaderboard-refresh-issue' into develop

karrotmvp · Dec 19, 2021 · abf3371 · abf3371
2 parents a56c15e + 94b2438
commit abf3371
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 111 deletions.
diff --git a/src/hooks/useLeaderboard.ts b/src/hooks/useLeaderboard.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { useMinigameApi } from 'services/api/minigameApi';
 import type {
   TownRankingDto,
@@ -14,12 +14,12 @@ export interface UserLeaderboardType extends UserRankingDtoWithTown {
 
 export const useLeaderboard = () => {
   const minigameApi = useMinigameApi();
-  const [townLeaderboard, setTownLeaderboard] = useState<TownLeaderboardType[]>(
-    []
-  );
-  const [userLeaderboard, setUserLeaderboard] = useState<UserLeaderboardType[]>(
-    []
-  );
+  // const [townLeaderboard, setTownLeaderboard] = useState<TownLeaderboardType[]>(
+  //   []
+  // );
+  // const [userLeaderboard, setUserLeaderboard] = useState<UserLeaderboardType[]>(
+  //   []
+  // );
 
   const getTownLeaderboard = useCallback(
     async ({ gameType }: { gameType: 'GAME_KARROT' | 'GAME_2048' }) => {
@@ -38,8 +38,6 @@ export const useLeaderboard = () => {
           })
         );
         return indexedDistrictRankData;
-      } else {
-        return undefined;
       }
     },
     [minigameApi.gameTownApi]
@@ -76,49 +74,44 @@ export const useLeaderboard = () => {
         );
 
         return indexedUserRankData;
-      } else {
-        return undefined;
       }
     },
     [minigameApi.gameUserApi]
   );
 
-  const updateUserLeaderboard = useCallback(
-    async ({
-      gameType,
-      size,
-    }: {
-      gameType: 'GAME_KARROT' | 'GAME_2048';
-      size: number;
-    }) => {
-      const response = await getUserLeaderboard({ gameType, size });
-      if (response) {
-        setUserLeaderboard(response);
-        return response;
-      } else {
-        return null;
-      }
-    },
-    [getUserLeaderboard]
-  );
+  // const updateUserLeaderboard = useCallback(
+  //   async ({
+  //     gameType,
+  //     size,
+  //   }: {
+  //     gameType: 'GAME_KARROT' | 'GAME_2048';
+  //     size: number;
+  //   }) => {
+  //     const response = await getUserLeaderboard({ gameType, size });
+  //     if (response) {
+  //       return data
+  //     }
+  //   },
+  //   [getUserLeaderboard]
+  // );
 
-  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]
-  );
+  // 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]
+  // );
 
   return {
-    townLeaderboard,
-    userLeaderboard,
-    updateUserLeaderboard,
-    updateTownLeaderboard,
+    // townLeaderboard,
+    // userLeaderboard,
+    getUserLeaderboard,
+    getTownLeaderboard,
   };
 };
diff --git a/src/pages/Game2048/Home/Home.tsx b/src/pages/Game2048/Home/Home.tsx
@@ -10,6 +10,7 @@ import {
   useUser,
   useMyGameData,
   useAccessToken,
+  UserLeaderboardType,
 } from 'hooks';
 import type { TownLeaderboardType } from 'hooks';
 import { Button } from 'components/Button';
@@ -44,12 +45,18 @@ export const Home: React.FC = () => {
   const { user, town } = useUser();
   const { rank, gameType } = useMyGame2048Data();
   const {
-    townLeaderboard,
-    userLeaderboard,
-    updateTownLeaderboard,
-    updateUserLeaderboard,
+    // townLeaderboard,
+    // userLeaderboard,
+    getUserLeaderboard,
+    getTownLeaderboard,
   } = useLeaderboard();
   const { updateMyGameData } = useMyGameData();
+  const [townLeaderboard, setTownLeaderboard] = useState<TownLeaderboardType[]>(
+    []
+  );
+  const [userLeaderboard, setUserLeaderboard] = useState<UserLeaderboardType[]>(
+    []
+  );
   const [isFirstInTown, setIsFirstInTown] = useState<boolean>(false);
   const [isRanked, setIsRanked] = useState<boolean>(
     user.userId !== undefined || user.userId !== '' ? false : true
@@ -162,6 +169,31 @@ export const Home: React.FC = () => {
     []
   );
 
+  const updateLeaderboard = useCallback(
+    ({
+      gameType,
+      size,
+    }: {
+      gameType: 'GAME_KARROT' | 'GAME_2048';
+      size: number;
+    }) => {
+      getUserLeaderboard({ gameType, size }).then((response) => {
+        if (response) setUserLeaderboard(response);
+      });
+      getTownLeaderboard({
+        gameType,
+      }).then((response) => {
+        if (response) {
+          setTownLeaderboard(response);
+          updateMyTownData({
+            townLeaderboard: response,
+            myTownId: town.id!,
+          });
+        }
+      });
+    },
+    [getTownLeaderboard, getUserLeaderboard, town.id, updateMyTownData]
+  );
   // refresh leaderboard
   const handleRefresh = useCallback(
     async ({
@@ -171,70 +203,40 @@ export const Home: React.FC = () => {
       gameType: 'GAME_KARROT' | 'GAME_2048';
       size: number;
     }) => {
-      try {
-        if (accessToken) {
-          const response = await updateMyGameData({ gameType: gameType });
+      updateMyGameData({ gameType })
+        .then((response) => {
           if (response) {
             setMyData({
               rank: response.rank,
               score: response.score,
             });
-            updateUserLeaderboard({ gameType, size });
-            updateTownLeaderboard({
-              gameType,
-            }).then((response) => {
-              updateMyTownData({
-                townLeaderboard: response,
-                myTownId: town.id!,
-              });
-            });
+            updateLeaderboard({ gameType, size });
           }
-        } else {
-          updateUserLeaderboard({ gameType, size });
-          updateTownLeaderboard({
-            gameType,
-          }).then((response) => {
-            updateMyTownData({
-              townLeaderboard: response,
-              myTownId: town.id!,
-            });
-          });
-        }
-      } catch (error) {
-        console.error(error);
-        updateUserLeaderboard({ gameType, size });
-        updateTownLeaderboard({
-          gameType,
-        }).then((response) => {
-          updateMyTownData({
-            townLeaderboard: response,
-            myTownId: town.id!,
-          });
+        })
+        .catch((error) => {
+          console.error(error);
+          updateLeaderboard({ gameType, size });
+        })
+        .finally(() => {
+          // updateLeaderboard({ gameType, size });
         });
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
-    [
-      accessToken,
-      town.id,
-      updateMyGameData,
-      updateMyTownData,
-      updateTownLeaderboard,
-      updateUserLeaderboard,
-    ]
+    [updateLeaderboard, updateMyGameData]
   );
 
   // Throttle refresh for 5 seconds
   // const throttledRefresh = useThrottledCallback(()=>handleRefresh, 3000);
 
   useEffect(() => {
-    if (isTop) {
-      handleRefresh({ gameType: 'GAME_2048', size: 100 });
-    }
     if (rank !== 0) {
       setIsRanked(true);
     }
-  }, [handleRefresh, isTop, rank]);
+  }, [rank]);
+  useEffect(() => {
+    if (isTop) {
+      handleRefresh({ gameType: 'GAME_2048', size: 100 });
+    }
+  }, [handleRefresh, isTop]);
 
   // const [shouldSticky, setShouldSticky] = useState(false);
 
@@ -313,11 +315,9 @@ export const Home: React.FC = () => {
           >
             <PullToRefresh
               onPull={(dispose) => {
-                handleRefresh({ gameType: 'GAME_2048', size: 100 })?.then(
-                  () => {
-                    dispose();
-                  }
-                );
+                handleRefresh({ gameType: 'GAME_2048', size: 100 }).then(() => {
+                  dispose();
+                });
               }}
               className={css`
                 --kf_pulltorefresh_backgroundColor: transparent;
@@ -407,7 +407,7 @@ export const Home: React.FC = () => {
       >
         <CommentModal
           setIsCommentModalOpen={setIsCommentModalOpen}
-          handleRefresh={() =>
+          handleRefresh={async () =>
             handleRefresh({ gameType: 'GAME_2048', size: 100 })
           }
         />

diff --git a/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx b/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { css } from '@emotion/css';
 import styled from '@emotion/styled';
-import { useCurrentScreen } from '@karrotframe/navigator';
 import { Tabs } from '@karrotframe/tabs';
 import '@karrotframe/tabs/index.css';
 import { useCallback, useState } from 'react';
@@ -18,14 +17,11 @@ type Props = {
   isRanked: boolean;
 };
 export const LeaderboardTabs: React.FC<Props> = (props) => {
-  const { isTop } = useCurrentScreen();
   const [activeTabKey, setActiveTabKey] = useState<string>('town');
-  const handleTabChange = (key: string) => {
-    if (isTop) {
-      setActiveTabKey(key);
-    }
-  };
 
+  useEffect(() => {
+    console.log('asdf', props.userLeaderboard, props.townLeaderboard);
+  });
   return (
     <LeaderboardContainer className="game-2048__tabs">
       <Tabs
@@ -63,7 +59,9 @@ export const LeaderboardTabs: React.FC<Props> = (props) => {
             ),
           },
         ]}
-        onTabChange={handleTabChange}
+        onTabChange={(key) => {
+          setActiveTabKey(key);
+        }}
       />
     </LeaderboardContainer>
   );