From 2460b75667f204a6e5b601782b83c5459ba2ef74 Mon Sep 17 00:00:00 2001
From: jongwooha98 <jongwooha98@gmail.com>
Date: Mon, 20 Dec 2021 11:39:52 +0900
Subject: [PATCH] fix: leaderboard fetch 'undefined' issue

---
 src/pages/Game2048/Home/Home.tsx              | 73 ++++++++++++++++---
 .../LeaderboardTabs/LeaderboardTabs.tsx       |  5 +-
 2 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/src/pages/Game2048/Home/Home.tsx b/src/pages/Game2048/Home/Home.tsx
index 3e0ec3d4..cb491a90 100644
--- a/src/pages/Game2048/Home/Home.tsx
+++ b/src/pages/Game2048/Home/Home.tsx
@@ -8,7 +8,6 @@ import {
   useLeaderboard,
   useMini,
   useUser,
-  useMyGameData,
   useAccessToken,
   UserLeaderboardType,
 } from 'hooks';
@@ -43,14 +42,14 @@ export const Home: React.FC = () => {
   const { accessToken } = useAccessToken();
   const { isInWebEnvironment, handleThirdPartyAgreement } = useMini();
   const { user, town } = useUser();
-  const { rank, gameType } = useMyGame2048Data();
+  const { rank, gameType, updateMyScore, updateMyComment } =
+    useMyGame2048Data();
   const {
     // townLeaderboard,
     // userLeaderboard,
     getUserLeaderboard,
     getTownLeaderboard,
   } = useLeaderboard();
-  const { updateMyGameData } = useMyGameData();
   const [townLeaderboard, setTownLeaderboard] = useState<TownLeaderboardType[]>(
     []
   );
@@ -143,6 +142,64 @@ export const Home: React.FC = () => {
     }
   };
 
+  // const getMyGameData = useCallback(
+  //   async ({ gameType }: { gameType: 'GAME_KARROT' | 'GAME_2048' }) => {
+  //     const {
+  //       data: { data },
+  //     } = await minigameApi.gameUserApi.getMyRankInfoUsingGET(gameType);
+  //     console.log('2', data);
+  //     if (data) {
+  //       console.log('2-1', data);
+  //       if (data.score && data.rank) {
+  //         console.log('2-1', data.score, data.rank);
+  //         updateMyScore({
+  //           score: data.score,
+  //           rank: data.rank,
+  //         });
+  //         if (data.comment) {
+  //           updateMyComment(data.comment);
+  //         }
+
+  //         return data;
+  //       }
+  //     }
+  //     return undefined;
+  //   },
+  //   [minigameApi.gameUserApi, updateMyComment, updateMyScore]
+  // );
+
+  const getMyGameData = useCallback(
+    async ({ gameType }: { gameType: 'GAME_KARROT' | 'GAME_2048' }) => {
+      const {
+        data: { data },
+      } = await minigameApi.gameUserApi.getMyRankInfoUsingGET(gameType);
+
+      return data;
+    },
+    [minigameApi.gameUserApi]
+  );
+  const updateMyGameData = useCallback(
+    async ({ gameType }: { gameType: 'GAME_KARROT' | 'GAME_2048' }) => {
+      getMyGameData({ gameType }).then((response) => {
+        if (response) {
+          updateMyScore({
+            score: response.score,
+            rank: response.rank,
+          });
+          if (response.comment) {
+            updateMyComment(response.comment);
+          }
+
+          setMyData({
+            rank: response.rank,
+            score: response.score,
+          });
+        }
+      });
+    },
+    [getMyGameData, updateMyComment, updateMyScore]
+  );
+
   const updateMyTownData = useCallback(
     async ({
       townLeaderboard,
@@ -204,14 +261,8 @@ export const Home: React.FC = () => {
       size: number;
     }) => {
       updateMyGameData({ gameType })
-        .then((response) => {
-          if (response) {
-            setMyData({
-              rank: response.rank,
-              score: response.score,
-            });
-            updateLeaderboard({ gameType, size });
-          }
+        .then(() => {
+          updateLeaderboard({ gameType, size });
         })
         .catch((error) => {
           console.error(error);
diff --git a/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx b/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx
index 78a1c04f..8930d4cc 100644
--- a/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx
+++ b/src/pages/Game2048/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 import { Tabs } from '@karrotframe/tabs';
@@ -19,9 +19,6 @@ type Props = {
 export const LeaderboardTabs: React.FC<Props> = (props) => {
   const [activeTabKey, setActiveTabKey] = useState<string>('town');
 
-  useEffect(() => {
-    console.log('asdf', props.userLeaderboard, props.townLeaderboard);
-  });
   return (
     <LeaderboardContainer className="game-2048__tabs">
       <Tabs