refactor: 팔로우 preview 요청 카드에서 하도록 수정

42Statistics · Dec 31, 2023 · 6a5d7c6 · 6a5d7c6
1 parent ee5eaa4
commit 6a5d7c6
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 62 deletions.
diff --git a/app/src/Profile/dashboard-contents/General/Followers.tsx b/app/src/Profile/dashboard-contents/General/Followers.tsx
@@ -1,6 +1,7 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useQuery } from '@apollo/client';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -15,43 +16,56 @@ import { ROUTES } from '@shared/constants/routes';
 import { Avatar, Text } from '@shared/ui-kit';
 
 import { UserProfileContext } from '@/Profile/contexts/UserProfileContext';
-import { useFollow } from '@/Profile/hooks/useFollow';
+import { GET_FOLLOWER_LIST_PREVIEW } from '@/Profile/dashboard-contents-queries/GET_FOLLOW_DATA';
 
 export const Followers = () => {
   const { login } = useContext(UserProfileContext);
   const theme = useTheme();
 
   const title = 'Followers';
 
-  const { followerList, loading, error } = useFollow(login);
+  const { data, loading, error, refetch } = useQuery(
+    GET_FOLLOWER_LIST_PREVIEW,
+    {
+      variables: { login },
+    },
+  );
+
+  //todo: update될때만 요청하도록 수정 필요
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
 
   if (loading) {
     return <DashboardContentLoading title={title} />;
   }
   if (error) {
     return <DashboardContentBadRequest title={title} message={error.message} />;
   }
-  if (!followerList) {
+  if (!data) {
     return <DashboardContentNotFound title={title} />;
   }
 
+  const followingList = data.getFollowerList.followList.map(
+    (item) => item.user,
+  );
+  const totalCount = data.getFollowerList.count;
+
   return (
     <DashboardContent title={title}>
-      <Link to={ROUTES.PROFILE_FOLLOWERS_OF(login)}>
+      <Link to={ROUTES.PROFILE_FOLLOWING_OF(login)}>
         <Layout>
-          {followerList.getFollowerList.followList.map((user) => (
+          {followingList.map((user) => (
             <Avatar
-              key={user.user.login}
-              name={user.user.login}
-              src={user.user.imgUrl}
-              alt={ALT.AVATAR_OF(user.user.login)}
+              key={user.login}
+              name={user.login}
+              src={user.imgUrl}
+              alt={ALT.AVATAR_OF(user.login)}
               radius={theme.radius.xs}
             />
           ))}
           <Text style={{ marginLeft: '1rem' }}>
-            {followerList.getFollowerList.count === 0
-              ? '팔로워 0'
-              : followerList.getFollowerList.count}
+            {totalCount === 0 ? '팔로워 0' : totalCount}
           </Text>
         </Layout>
       </Link>

diff --git a/app/src/Profile/dashboard-contents/General/Following.tsx b/app/src/Profile/dashboard-contents/General/Following.tsx
@@ -1,6 +1,7 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useQuery } from '@apollo/client';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -15,43 +16,56 @@ import { ROUTES } from '@shared/constants/routes';
 import { Avatar, Text } from '@shared/ui-kit';
 
 import { UserProfileContext } from '@/Profile/contexts/UserProfileContext';
-import { useFollow } from '@/Profile/hooks/useFollow';
+import { GET_FOLLOWING_LIST_PREVIEW } from '@/Profile/dashboard-contents-queries/GET_FOLLOW_DATA';
 
 export const Following = () => {
   const { login } = useContext(UserProfileContext);
   const theme = useTheme();
 
   const title = 'Following';
 
-  const { followingList, loading, error } = useFollow(login);
+  const { data, loading, error, refetch } = useQuery(
+    GET_FOLLOWING_LIST_PREVIEW,
+    {
+      variables: { login },
+    },
+  );
+
+	//todo: update될때만 요청하도록 수정 필요
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
 
   if (loading) {
     return <DashboardContentLoading title={title} />;
   }
   if (error) {
     return <DashboardContentBadRequest title={title} message={error.message} />;
   }
-  if (!followingList) {
+  if (!data) {
     return <DashboardContentNotFound title={title} />;
   }
 
+  const followingList = data.getFollowingList.followList.map(
+    (item) => item.user,
+  );
+  const totalCount = data.getFollowingList.count;
+
   return (
     <DashboardContent title={title}>
       <Link to={ROUTES.PROFILE_FOLLOWING_OF(login)}>
         <Layout>
-          {followingList.getFollowingList.followList.map((user) => (
+          {followingList.map((user) => (
             <Avatar
-              key={user.user.login}
-              name={user.user.login}
-              src={user.user.imgUrl}
-              alt={ALT.AVATAR_OF(user.user.login)}
+              key={user.login}
+              name={user.login}
+              src={user.imgUrl}
+              alt={ALT.AVATAR_OF(user.login)}
               radius={theme.radius.xs}
             />
           ))}
           <Text style={{ marginLeft: '1rem' }}>
-            {followingList.getFollowingList.count === 0
-              ? '팔로잉 0'
-              : followingList.getFollowingList.count}
+            {totalCount === 0 ? '팔로잉 0' : totalCount}
           </Text>
         </Layout>
       </Link>

diff --git a/app/src/Profile/hooks/useFollow.tsx b/app/src/Profile/hooks/useFollow.tsx
@@ -6,8 +6,6 @@ import {
   FOLLOW_USER,
   UNFOLLOW_USER,
   GET_FOLLOW_STATUS,
-  GET_FOLLOWING_LIST_PREVIEW,
-  GET_FOLLOWER_LIST_PREVIEW,
 } from '@/Profile/dashboard-contents-queries/GET_FOLLOW_DATA';
 
 export const useFollow = (login: string) => {
@@ -23,22 +21,6 @@ export const useFollow = (login: string) => {
   } = useQuery(GET_FOLLOW_STATUS, {
     variables: { login },
   });
-  const {
-    data: followingList,
-    loading: loadingFollowingList,
-    error: errorFollowingList,
-    refetch: refetchFollowingList,
-  } = useQuery(GET_FOLLOWING_LIST_PREVIEW, {
-    variables: { login },
-  });
-  const {
-    data: followerList,
-    loading: loadingFollowerList,
-    error: errorFollowerList,
-    refetch: refetchFollowerList,
-  } = useQuery(GET_FOLLOWER_LIST_PREVIEW, {
-    variables: { login },
-  });
 
   let followStatus = dataFollowStatus?.getFollowStatus ?? false;
 
@@ -48,34 +30,18 @@ export const useFollow = (login: string) => {
       : hitFollow({ variables: { login: login } }));
 
     refetchFollowStatus();
-    refetchFollowingList();
-    refetchFollowerList();
     followStatus = dataFollowStatus?.getFollowStatus ?? false;
   };
 
   useEffect(() => {
     refetchFollowStatus();
-    refetchFollowingList();
-    refetchFollowerList();
-  }, [refetchFollowStatus, refetchFollowingList, refetchFollowerList]);
+  }, [refetchFollowStatus]);
 
-  const loading =
-    loadingFollow ||
-    loadingUnfollow ||
-    loadingFollowStatus ||
-    loadingFollowingList ||
-    loadingFollowerList;
-  const error =
-    errorFollow ||
-    errorUnfollow ||
-    errorFollowStatus ||
-    errorFollowingList ||
-    errorFollowerList;
+  const loading = loadingFollow || loadingUnfollow || loadingFollowStatus;
+  const error = errorFollow || errorUnfollow || errorFollowStatus;
 
   return {
     handleFollow,
-    followingList,
-    followerList,
     followStatus,
     loading,
     error,