merge: 팔로우 버튼 갱신 디버깅 및 최적화

bellasimi · web-flow · commit eed3ca457610 · 2022-07-14T16:37:30.000+09:00
fix: 팔로우 버튼 갱신 디버깅 및 최적화
diff --git a/src/components/FollowList/MyFollowList.jsx b/src/components/FollowList/MyFollowList.jsx
@@ -13,35 +13,35 @@ const FOLLOWER = 'follower';
 //TODO: follows 데이터 구조
 // const followData = [{ followId: '', userData: {}, followData: {}}]; // 팔로잉 기준 전부 isFollow true
 
-const FollowList = ({ followList, tab, handleFollowSuccess }) => {
+const FollowList = ({ followList, tab, handleFollowChange }) => {
   const { currentUser, onFollow, onUnfollow } = useUserContext();
   const [isModal, setIsModal] = useState(false);
   const [unfollowId, setUnfollowId] = useState('');
-  const [isFollowSuccess, setIsFollowSuccess] = useState(false);
+  const [isFollowChange, setIsFollowChange] = useState(false);
 
   const onClose = () => {
     setIsModal(false);
   };
 
-  const hadleFollow = useCallback(
+  const handleFollow = useCallback(
     (followId, userId) => {
       if (!currentUser.following.some((follow) => follow.user === userId)) {
         onFollow({ userId, followId });
-        setIsFollowSuccess(true);
+        setIsFollowChange(true);
+        handleFollowChange(true);
       } else {
-        setIsFollowSuccess(false);
+        setIsFollowChange(false);
       }
       setIsModal(true);
-      handleFollowSuccess(isFollowSuccess);
     },
-    [currentUser, onFollow, handleFollowSuccess, isFollowSuccess],
+    [currentUser, onFollow, handleFollowChange],
   );
 
-  const hadleUnFollow = useCallback(() => {
+  const handleUnFollow = useCallback(() => {
     onUnfollow({ unfollowId });
     setIsModal(false);
-    handleFollowSuccess(true);
-  }, [unfollowId, onUnfollow, handleFollowSuccess]);
+    handleFollowChange(true);
+  }, [unfollowId, onUnfollow, handleFollowChange]);
 
   return (
     //TODO: user._id:
@@ -84,7 +84,7 @@ const FollowList = ({ followList, tab, handleFollowSuccess }) => {
                   fontSize="16px"
                   style={{ ...followButtonStyle }}
                   onClick={() => {
-                    hadleFollow(followId, followData.follower);
+                    handleFollow(followId, followData.follower);
                   }}
                 >
                   팔로우
@@ -93,7 +93,7 @@ const FollowList = ({ followList, tab, handleFollowSuccess }) => {
             </ProfileContainer>
           );
         })}{' '}
-      {tab === FOLLOWER && !isFollowSuccess && isModal && (
+      {tab === FOLLOWER && !isFollowChange && isModal && (
         <Modal visible={isModal} onClose={onClose}>
           <Modal.Content
             title="팔로우 실패했어요!"
@@ -103,7 +103,7 @@ const FollowList = ({ followList, tab, handleFollowSuccess }) => {
           <Modal.Button onClick={onClose}>확인</Modal.Button>
         </Modal>
       )}
-      {tab === FOLLOWER && isFollowSuccess && isModal && (
+      {tab === FOLLOWER && isFollowChange && isModal && (
         <Modal visible={isModal} onClose={onClose}>
           <Modal.Content title="팔로우에 성공했어요!" onClose={onClose} />
           <Modal.Button onClick={onClose}>확인</Modal.Button>
@@ -118,7 +118,7 @@ const FollowList = ({ followList, tab, handleFollowSuccess }) => {
           />
           <Modal.Button
             onClick={() => {
-              hadleUnFollow();
+              handleUnFollow();
             }}
           >
             확인
diff --git a/src/pages/FollowPage/index.jsx b/src/pages/FollowPage/index.jsx
@@ -16,20 +16,10 @@ const FollowPage = () => {
   const [followingData, setFollowingData] = useState([]); // 얘는 해당 user(id) 유저 정보들의 배열 vs following은 id가 담긴 배열
   const [followerData, setFollowerData] = useState([]); // 얘는 해당 follower(id) 유저 정보들의 배열 vs followers는 id가 담긴 배열
   const { currentUser } = useUserContext();
-  const [isFollowSuccess, setIsFollowSuccess] = useState(false);
+  const [isFollowChange, setIsFollowChange] = useState(false);
 
-  useEffect(() => {
-    if (currentUser.id !== id) {
-      handleGetUser();
-      setIsMyFollow(false);
-    } else {
-      setUser(currentUser);
-      setIsMyFollow(true);
-    }
-  }, [currentUser]);
-
-  const handleFollowSuccess = (value) => {
-    setIsFollowSuccess(value);
+  const handleFollowChange = (value) => {
+    setIsFollowChange(value);
   };
 
   //TODO:신영 현재 페이지 유저의 정보 => 전역데이터가 아닌 경우 context를 사용할 수 없어서 직접 api 호출
@@ -45,6 +35,16 @@ const FollowPage = () => {
     setCurrentTab(value);
   };
 
+  useEffect(() => {
+    if (currentUser.id !== id) {
+      handleGetUser();
+      setIsMyFollow(false);
+    } else {
+      setUser(currentUser);
+      setIsMyFollow(true);
+    }
+  }, [currentUser, id, handleGetUser]);
+
   //FOLLOWING: 내가 팔로잉 한 사람들 user: 그놈들 id , follower: 내 id
   const handleGetFollowing = useCallback(async () => {
     const { following } = user;
@@ -63,6 +63,7 @@ const FollowPage = () => {
     } else {
       setFollowingData([]);
     }
+    setIsFollowChange(false);
   }, [user]);
 
   //FOLLOWERS: 나를 팔로잉 한 사람들 user: 내 id , follower: 그 놈들 id
@@ -81,17 +82,24 @@ const FollowPage = () => {
       );
       setFollowerData(data);
     }
+    setIsFollowChange(false);
   }, [user]);
-
+  
   useEffect(() => {
-    if (currentTab === FOLLOWING && (followingData.length === 0 || isFollowSuccess)) {
+    if (currentTab === FOLLOWING && (followingData.length === 0 || isFollowChange)) {
       handleGetFollowing();
-      setIsFollowSuccess(false);
     } else if (currentTab === FOLLOWER && followerData.length === 0) {
       handleGetFollowers();
-      setIsFollowSuccess(false);
     }
-  }, [user, currentTab]);
+  }, [
+    currentTab,
+    user,
+    isFollowChange,
+    followingData,
+    followerData,
+    handleGetFollowing,
+    handleGetFollowers,
+  ]);
 
   return (
     <PageWrapper header nav prev title={user.fullName}>
@@ -101,7 +109,7 @@ const FollowPage = () => {
             <MyFollowList
               followList={followerData}
               tab={FOLLOWER}
-              handleFollowSuccess={handleFollowSuccess}
+              handleFollowChange={handleFollowChange}
             />
           ) : (
             <FollowList followList={followerData} />
@@ -112,7 +120,7 @@ const FollowPage = () => {
             <MyFollowList
               followList={followingData}
               tab={FOLLOWING}
-              handleFollowSuccess={handleFollowSuccess}
+              handleFollowChange={handleFollowChange}
             />
           ) : (
             <FollowList followList={followingData} />
diff --git a/src/pages/UserPage/PostData.jsx b/src/pages/UserPage/PostData.jsx
@@ -0,0 +1,72 @@
+import {
+  GRID_INACTIVE,
+  GRID_ACTIVE,
+  HEART_INACTIVE,
+  HEART_ACTIVE,
+} from 'utils/constants/icons/names';
+import { Icon, PostImageContainer, Tab } from 'components';
+import React, { useEffect, useState, useCallback } from 'react';
+import { getPostData } from 'utils/apis/postApi';
+
+const USER_POSTS = 'userPosts';
+const LIKE_POSTS = 'likePosts';
+
+const PostData = ({ user }) => {
+  const [userLikePosts, setUserLikePosts] = useState([]);
+  const [currentTab, setCurrentTab] = useState(USER_POSTS);
+
+  const onActive = (value) => {
+    setCurrentTab(value);
+  };
+
+  const handleGetLikePosts = useCallback(async () => {
+    const { likes } = user;
+    if (likes.length !== 0) {
+      try {
+        const data = await Promise.allSettled(
+          likes.map((like) => getPostData(like.post).then((result) => result.data)),
+        );
+        setUserLikePosts(data);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }, [user]);
+
+  useEffect(() => {
+    if (currentTab === LIKE_POSTS && user.likes.length !== 0) {
+      handleGetLikePosts();
+    }
+  }, [user]);
+
+  useEffect(() => {
+    if (currentTab === LIKE_POSTS && userLikePosts.length === 0) {
+      handleGetLikePosts();
+    }
+  }, [currentTab, handleGetLikePosts, userLikePosts]);
+
+  return (
+    <Tab onActive={onActive}>
+      <Tab.Item
+        icon={{
+          active: <Icon name={GRID_ACTIVE} size={24} />,
+          inactive: <Icon name={GRID_INACTIVE} size={24} />,
+        }}
+        index={USER_POSTS}
+      >
+        <PostImageContainer posts={user.posts} />
+      </Tab.Item>
+      <Tab.Item
+        icon={{
+          active: <Icon name={HEART_ACTIVE} size={24} />,
+          inactive: <Icon name={HEART_INACTIVE} size={24} />,
+        }}
+        index={LIKE_POSTS}
+      >
+        <PostImageContainer posts={userLikePosts} />
+      </Tab.Item>
+    </Tab>
+  );
+};
+
+export default React.memo(PostData);
diff --git a/src/pages/UserPage/UserData.jsx b/src/pages/UserPage/UserData.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { Text, Avatar, Button, Image, Modal } from 'components';
 import { useUserContext } from 'contexts/UserContext';
 import theme from 'styles/theme';
@@ -18,12 +18,20 @@ import {
 
 const UserData = ({ user, pageUserId, userLevel }) => {
   const { currentUser, onFollow, onUnfollow } = useUserContext();
-  const checkFollow = currentUser.following.some((follow) => follow.user === pageUserId);
-  const [isFollow, setIsFollow] = useState(checkFollow);
+  const followData = currentUser.following.filter((follow) => follow.user === pageUserId);
+  const [isFollow, setIsFollow] = useState(false);
   const [isFollowModal, setIsFollowModal] = useState(false);
   const [isUnFollowModal, setIsUnFollowModal] = useState(false);
   const [followers, setFollowers] = useState();
 
+  useEffect(() => {
+    setIsFollow(followData.length === 0 ? false : true);
+  }, [followData]);
+
+  useEffect(() => {
+    setFollowers(user.followers.length);
+  }, [user]);
+
   const navigate = useNavigate();
 
   const onCloseFollow = () => {
@@ -34,7 +42,7 @@ const UserData = ({ user, pageUserId, userLevel }) => {
     setIsUnFollowModal(false);
   };
 
-  const hadleFollow = useCallback(() => {
+  const handleFollow = useCallback(() => {
     if (!isFollow) {
       onFollow({ userId: pageUserId, followId: '' });
       setIsFollowModal(true);
@@ -44,9 +52,7 @@ const UserData = ({ user, pageUserId, userLevel }) => {
     setIsFollow(true);
   }, [pageUserId, isFollow, onFollow, followers]);
 
-  const hadleUnFollow = useCallback(() => {
-    const followData = currentUser.following.filter((follow) => follow.user === pageUserId);
-
+  const handleUnFollow = useCallback(() => {
     if (followData.length !== 0) {
       onUnfollow({ unfollowId: followData[0]._id });
       setIsFollow(false);
@@ -55,11 +61,7 @@ const UserData = ({ user, pageUserId, userLevel }) => {
       }
     }
     setIsUnFollowModal(false);
-  }, [pageUserId, currentUser, onUnfollow, followers]);
-
-  useEffect(() => {
-    setFollowers(user.followers.length);
-  }, [user]);
+  }, [followData, onUnfollow, followers]);
 
   return (
     <UserInfo>
@@ -127,7 +129,7 @@ const UserData = ({ user, pageUserId, userLevel }) => {
           borderRadius={10}
           fontSize="16px"
           style={{ ...followButtonStyle }}
-          onClick={hadleFollow}
+          onClick={handleFollow}
         >
           팔로우
         </Button>
@@ -150,7 +152,7 @@ const UserData = ({ user, pageUserId, userLevel }) => {
         />
         <Modal.Button
           onClick={() => {
-            hadleUnFollow();
+            handleUnFollow();
           }}
         >
           확인
@@ -167,7 +169,7 @@ const UserData = ({ user, pageUserId, userLevel }) => {
   );
 };
 
-export default UserData;
+export default React.memo(UserData);
 
 UserData.propTypes = {
   user: PropTypes.object,
diff --git a/src/pages/UserPage/index.jsx b/src/pages/UserPage/index.jsx
