[fix] valorant ui (#121)

match-gg · Sep 21, 2023 · 6cd1b43 · 6cd1b43
2 parents 0a8d334 + fb3aeab
commit 6cd1b43
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 42 deletions.
diff --git a/src/apis/api/valorant.ts b/src/apis/api/valorant.ts
@@ -27,7 +27,7 @@ export const verifyNickname = async (nickname: string) => {
  */
 
 export const loadHistory = async (agentName: string) => {
-  await defaultAxios.get(`/api/valorant/user/${agentName}`);
+  await defaultAxios.get(`/api/valorant/user/${agentName.replace('#', '%23')}`);
 
   return null;
 };

diff --git a/src/pages/battlegrounds/MemberSlot.tsx b/src/pages/battlegrounds/MemberSlot.tsx
@@ -39,6 +39,7 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => {
 
   const [memberInfo, setMemberInfo] = React.useState<any>({});
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [isFollowed, setIsFollowed] = React.useState<boolean>(false);
 
   // author info
   const authorTier = tierList.find((aTier) => aTier.value === memberInfo.tier);
@@ -201,6 +202,7 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => {
             severity: 'error',
           }),
         );
+        setIsFollowed(true);
       } else {
         dispatch(
           snackbarActions.OPEN_SNACKBAR({
@@ -327,7 +329,8 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => {
                   </IconButton>
                 </MuiToolTip>
               )}
-              {isInParty(currentCard.memberList, oauth2Id) &&
+              {!isFollowed &&
+                isInParty(currentCard.memberList, oauth2Id) &&
                 !isGuest(MemberOauth2Id) &&
                 oauth2Id !== MemberOauth2Id &&
                 !MemberOauth2Id.startsWith('guest') && (

diff --git a/src/pages/leagueoflegends/MemberSlot.tsx b/src/pages/leagueoflegends/MemberSlot.tsx
@@ -41,6 +41,7 @@ const MemberSlot = ({
 
   const [memberInfo, setMemberInfo] = React.useState<any>({});
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [isFollowed, setIsFollowed] = React.useState<boolean>(false);
 
   // author info
   const mostLane = positionList.find(
@@ -194,6 +195,7 @@ const MemberSlot = ({
             severity: 'error',
           }),
         );
+        setIsFollowed(true);
       } else {
         dispatch(
           snackbarActions.OPEN_SNACKBAR({
@@ -315,7 +317,8 @@ const MemberSlot = ({
                   </IconButton>
                 </MuiToolTip>
               )}
-              {isInParty(currentCard.memberList, oauth2Id) &&
+              {!isFollowed &&
+                isInParty(currentCard.memberList, oauth2Id) &&
                 !isGuest(MemberOauth2Id) &&
                 oauth2Id !== MemberOauth2Id && (
                   <MuiToolTip title="팔로우" placement="right">

diff --git a/src/pages/login/AdminLogin.tsx b/src/pages/login/AdminLogin.tsx
@@ -66,7 +66,6 @@ const AdminLogin = () => {
 
       navigate(`/${representative}`);
     } catch (error: any) {
-      console.log(error.response);
       if (error.response.status === 404) {
         dispatch(
           snackbarActions.OPEN_SNACKBAR({

diff --git a/src/pages/mypage/Games.tsx b/src/pages/mypage/Games.tsx
@@ -13,6 +13,7 @@ import { changeRepresentative } from 'apis/api/user';
 import { loadHistory as lolLoadHistory } from 'apis/api/leagueoflegends';
 import { getPlatform, loadHistory as pubgLoadHistory } from 'apis/api/pubg';
 import { loadHistory as owLoadHistory } from 'apis/api/overwatch';
+import { loadHistory as vlrtLoadHistory } from 'apis/api/valorant';
 import { RootState } from 'store';
 import { snackbarActions } from 'store/snackbar-slice';
 import { userActions } from 'store/user-slice';
@@ -28,7 +29,7 @@ import Nickname from './Games/Nickname';
 
 interface GameFilterProps {
   selectedGame: string;
-  setSelectedGame: Dispatch<SetStateAction<string>>;
+  setSelectedGame: Dispatch<SetStateAction<GAME_ID>>;
   representative: string;
 }
 
@@ -71,6 +72,8 @@ const GameFilterBar = ({
   );
 };
 
+const MemoizedGameFilterBar = React.memo(GameFilterBar);
+
 const GameDataUpdateButton = ({ game }: any) => {
   const dispatch = useDispatch();
 
@@ -100,6 +103,11 @@ const GameDataUpdateButton = ({ game }: any) => {
       dispatch(mypageActions.TOGGLE_REFRESH_OVERWATCH());
     }
 
+    if (game === 'valorant') {
+      await vlrtLoadHistory(nickname);
+      dispatch(mypageActions.TOGGLE_REFRESH_VALORANT());
+    }
+
     setIsLoading(false);
     dispatch(
       snackbarActions.OPEN_SNACKBAR({
@@ -146,6 +154,7 @@ const ChangeRepresentativeButton = ({ game, representative }: any) => {
       );
     }
   };
+
   return (
     <UpdateButton
       fullWidth
@@ -169,7 +178,7 @@ const Games = () => {
     overwatchInfo: overwatchData,
   } = useSelector((state: RootState) => state.mypage);
 
-  const [selectedGame, setSelectedGame] = useState<string>(representative);
+  const [selectedGame, setSelectedGame] = useState<GAME_ID>(representative);
 
   const gameComponents = {
     lol: <LolInfo data={lolData} />,
@@ -181,7 +190,7 @@ const Games = () => {
   return (
     <>
       {/* 게임 필터 바 */}
-      <GameFilterBar
+      <MemoizedGameFilterBar
         selectedGame={selectedGame}
         setSelectedGame={setSelectedGame}
         representative={representative}

diff --git a/src/pages/mypage/Games/Nickname.tsx b/src/pages/mypage/Games/Nickname.tsx
@@ -27,20 +27,25 @@ import {
 } from 'apis/api/overwatch';
 import { userActions } from 'store/user-slice';
 import { snackbarActions } from 'store/snackbar-slice';
-
-const Nickname = ({ name, game, isNew }: any) => {
+import { GAME_ID } from 'types/games';
+
+const Nickname = ({
+  name,
+  game,
+  isNew,
+}: {
+  name: string;
+  game: GAME_ID;
+  isNew: boolean;
+}) => {
   const dispatch = useDispatch();
-
   const [nickname, setNickname] = useState<string>(name);
-
   const handleNickname = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNickname(e.target.value);
   };
 
   const [isPosting, setIsPosting] = useState<boolean>(false);
-
   const [isEdit, setIsEdit] = useState<boolean>(false);
-
   const [error, setError] = useState<boolean>(false);
 
   useEffect(() => {

diff --git a/src/pages/mypage/MyInfo.tsx b/src/pages/mypage/MyInfo.tsx
@@ -22,6 +22,8 @@ const Content = ({ title, content }: ContentProps) => {
   );
 };
 
+const MemoizedContent = React.memo(Content);
+
 type InfoProps = {
   title: string;
   children: JSX.Element | JSX.Element[];
@@ -36,27 +38,38 @@ const Info = ({ title, children }: InfoProps) => {
   );
 };
 
-const MyInfo = () => {
-  const { email, created, likeCount, dislikeCount, matchCount } = useSelector(
-    (state: RootState) => state.mypage,
-  );
-
+const MyInfo = ({
+  email,
+  created,
+  likeCount,
+  dislikeCount,
+  matchCount,
+}: {
+  email: string;
+  created: string;
+  likeCount: number;
+  dislikeCount: number;
+  matchCount: number;
+}) => {
   return (
     <>
       <Info title="이메일 및 가입 일자">
-        <Content title="이메일" content={email} />
-        <Content title="가입 일자" content={created.slice(0, 11)} />
+        <MemoizedContent title="이메일" content={email} />
+        <MemoizedContent title="가입 일자" content={created.slice(0, 11)} />
       </Info>
 
       <Info title="받은 평가">
-        <Content title="매칭 횟수" content={matchCount} />
-        <Content title="받은 좋아요" content={likeCount} />
-        <Content title="받은 싫어요" content={dislikeCount} />
+        <MemoizedContent title="매칭 횟수" content={matchCount} />
+        <MemoizedContent title="받은 좋아요" content={likeCount} />
+        <MemoizedContent title="받은 싫어요" content={dislikeCount} />
       </Info>
     </>
   );
 };
-export default MyInfo;
+
+const MemoizedMyInfo = React.memo(MyInfo);
+
+export default MemoizedMyInfo;
 
 const Container = styled(MuiBox)(() => ({
   width: '100%',

diff --git a/src/pages/mypage/RsoCallback.tsx b/src/pages/mypage/RsoCallback.tsx
@@ -5,9 +5,13 @@ import { connectRSOMypage } from 'apis/api/valorant';
 import { changeNickname } from 'apis/api/user';
 import { snackbarActions } from 'store/snackbar-slice';
 import Linear from 'components/loading/Linear';
+import { useDispatch } from 'react-redux';
+import { userActions } from 'store/user-slice';
 
 const RsoCallback = () => {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
+
   const params = new URL(document.URL).searchParams;
   const rsoAccessCode = params.get('code');
 
@@ -26,6 +30,13 @@ const RsoCallback = () => {
         await defaultAxios.get(`/api/valorant/user/${gameName}%23${tagLine}`);
 
         await changeNickname('valorant', `${gameName}#${tagLine}`);
+
+        dispatch(
+          userActions.SET_GAMES_WITH_ID({
+            id: 'valorant',
+            value: `${gameName}#${tagLine}`,
+          }),
+        );
       } catch (error: any) {
         snackbarActions.OPEN_SNACKBAR({
           message:

diff --git a/src/pages/mypage/UserInfoContainer.tsx b/src/pages/mypage/UserInfoContainer.tsx
@@ -24,6 +24,10 @@ const UserInfoContainer = () => {
     (state: RootState) => state.mypage,
   );
 
+  const { email, created, likeCount, dislikeCount, matchCount } = useSelector(
+    (state: RootState) => state.mypage,
+  );
+
   const [currentMenu, setCurrentMenu] = useState<string>(menuList[0].value);
 
   const [title, setTItle] = useState<string>(menuList[0].label);
@@ -85,7 +89,15 @@ const UserInfoContainer = () => {
         <MenuContainer>
           {
             {
-              myInfo: <MyInfo />,
+              myInfo: (
+                <MyInfo
+                  email={email}
+                  created={created}
+                  likeCount={likeCount}
+                  dislikeCount={dislikeCount}
+                  matchCount={matchCount}
+                />
+              ),
               games: <Games />,
               follow: <Follow />,
               withdrawal: <Withdrawal />,

diff --git a/src/pages/mypage/UserInfoFetcher.tsx b/src/pages/mypage/UserInfoFetcher.tsx
@@ -38,12 +38,6 @@ const UserInfoFetcher = ({ children }: UserInfoFetcherProps) => {
       dispatch(mypageActions.SET_LOLINFO({ duoRankInfo, freeRankInfo }));
     };
 
-    if (games.lol) {
-      getLolData();
-    }
-  }, [games.lol, refreshLolInfo]);
-
-  useEffect(() => {
     const getPubgData = async () => {
       const platform = await getPlatform(games.pubg);
       const duoInfo = await getPubgPlayerInfo(games.pubg, platform, 'DUO');
@@ -58,22 +52,24 @@ const UserInfoFetcher = ({ children }: UserInfoFetcherProps) => {
       );
     };
 
-    if (games.pubg) {
-      getPubgData();
-    }
-  }, [games.pubg, refreshPubgInfo]);
-
-  useEffect(() => {
     const getOverwatchData = async () => {
       const rankInfo = await getOWPlayerInfo(games.overwatch, 'RANKED');
       const normalInfo = await getOWPlayerInfo(games.overwatch, 'NORMAL');
       dispatch(mypageActions.SET_OVERWATCHINFO({ rankInfo, normalInfo }));
     };
 
+    if (games.lol) {
+      getLolData();
+    }
+
+    if (games.pubg) {
+      getPubgData();
+    }
+
     if (games.overwatch) {
       getOverwatchData();
     }
-  }, [games.overwatch, refreshOverwatchInfo]);
+  }, [refreshLolInfo, refreshPubgInfo, refreshOverwatchInfo]);
 
   return <div>{children}</div>;
 };

diff --git a/src/pages/overwatch/MemberSlot.tsx b/src/pages/overwatch/MemberSlot.tsx
@@ -55,6 +55,8 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => {
     mostHero: [],
   });
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [isFollowed, setIsFollowed] = React.useState<boolean>(false);
+
   // author info
   const authorNickname = memberInfo.name.split('#')[0];
 
@@ -184,6 +186,7 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => {
             severity: 'error',
           }),
         );
+        setIsFollowed(true);
       } else {
         dispatch(
           snackbarActions.OPEN_SNACKBAR({
@@ -435,7 +438,8 @@ const MemberSlot = ({ name, oauth2Id: MemberOauth2Id }: MemberSlotProps) => {
                   </IconButton>
                 </MuiToolTip>
               )}
-              {isInParty(currentCard.memberList, oauth2Id) &&
+              {!isFollowed &&
+                isInParty(currentCard.memberList, oauth2Id) &&
                 !isGuest(MemberOauth2Id) &&
                 oauth2Id !== MemberOauth2Id &&
                 !MemberOauth2Id.startsWith('guest') && (

diff --git a/src/pages/valorant/Card.tsx b/src/pages/valorant/Card.tsx
@@ -68,7 +68,7 @@ const Card = ({ item, expired }: CardProps) => {
   const authorTier = tierList[item.author.tier];
 
   const totalPlayed = item.author.wins + item.author.losses;
-  const winRate = Math.round((item.author.wins / totalPlayed) * 100);
+  const winRate = Math.round((item.author.wins / totalPlayed) * 100) || 0;
 
   const maxMember = queueType?.maxMember || 5;
   const currentMember = item.memberList.length;

diff --git a/src/pages/valorant/MemberSlot.tsx b/src/pages/valorant/MemberSlot.tsx
@@ -41,6 +41,7 @@ const MemberSlot = ({
 
   const [memberInfo, setMemberInfo] = React.useState<any>({});
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [isFollowed, setIsFollowed] = React.useState<boolean>(false);
 
   // author info
   const tier = tierList[memberInfo?.tier];
@@ -147,7 +148,7 @@ const MemberSlot = ({
   // 아래 구문은 조금 더 찾아보고 수정할 수 있도록 하겠음. - 6/28 나주엽
   // eslint-disable-next-line no-unsafe-optional-chaining
   const totalPlayed = memberInfo?.wins + memberInfo?.losses;
-  const winRate = Math.round((memberInfo.wins / totalPlayed) * 100);
+  const winRate = Math.round((memberInfo.wins / totalPlayed) * 100) || 0;
 
   const isAuthor = oauth2Id === currentCard?.oauth2Id;
 
@@ -231,6 +232,7 @@ const MemberSlot = ({
             severity: 'error',
           }),
         );
+        setIsFollowed(true);
       } else {
         dispatch(
           snackbarActions.OPEN_SNACKBAR({
@@ -340,7 +342,8 @@ const MemberSlot = ({
                   </IconButton>
                 </MuiToolTip>
               )}
-              {isInParty(currentCard.memberList, oauth2Id) &&
+              {!isFollowed &&
+                isInParty(currentCard.memberList, oauth2Id) &&
                 oauth2Id !== MemberOauth2Id && (
                   <MuiToolTip title="팔로우" placement="right">
                     <IconButton onClick={handleFollow}>