Merge pull request #245 from FRONTENDSCHOOL5/feat/follow/#206

[✨] follow페이지 취소, 팔로우 기능 구현/#206
FRONTENDSCHOOL5 · Aug 13, 2023 · adbeca2 · adbeca2
2 parents 00dd69e + 4741700
commit adbeca2
Showing 1 changed file with 57 additions and 18 deletions.
diff --git a/src/pages/Follow/Followers/Followers.jsx b/src/pages/Follow/Followers/Followers.jsx
@@ -4,6 +4,7 @@ import styles from '../Follow.module.css';
 import Layout from '../../../components/layout/Layout';
 import { AuthContext } from '../../../context/AuthContext';
 import profileAPI from '../../../api/profileAPI2';
+import followAPI from '../../../api/followAPI';
 
 export default function Followings() {
   const [followers, setFollowers] = useState([]);
@@ -12,6 +13,7 @@ export default function Followings() {
   const { accountname } = useParams();
   const navigate = useNavigate();
 
+  //팔로워 리스트 api 통신
   useEffect(() => {
     const fetchFollowers = async () => {
       try {
@@ -22,11 +24,13 @@ export default function Followings() {
         setFollowers(response);
         console.log('response 데이터 확인:', response);
 
-        // 각 팔로워의 초기 버튼 상태 설정, api 하게 되면 필요없는 코드가 될수 있음
-        const initialButtonStates = new Array(response.length).fill({
-          text: '삭제',
-          className: styles['followers-btn-unfollow'],
-        });
+        // 버튼 상태 결정 기능
+        const initialButtonStates = response.map(follower => ({
+          text: follower.isfollow ? '취소' : '팔로우',
+          className: follower.isfollow
+            ? styles['followers-btn-unfollow']
+            : styles['followers-btn-follow'],
+        }));
         setButtonStates(initialButtonStates);
       } catch (error) {
         console.error('Error fetching followers:', error);
@@ -40,19 +44,54 @@ export default function Followings() {
 
   console.log('Followers 데이터 확인:', followers);
 
-  //팔로우 삭제 버튼 들어갈 텍스트 값을 구분해주면
-  const updateButtonState = index => {
-    setButtonStates(prevStates => {
-      const updatedStates = [...prevStates];
-      updatedStates[index] = {
-        text: prevStates[index].text === '팔로우' ? '삭제' : '팔로우',
-        className:
-          prevStates[index].className === styles['followers-btn-follow']
-            ? styles['followers-btn-unfollow']
-            : styles['followers-btn-follow'],
+  // 팔로우시 리스트에 추가 api 통신
+  const onFollowStateHandler = async (index, follower) => {
+    if (buttonStates[index]?.text === '팔로우') {
+      try {
+        const response = await followAPI.followingPost(
+          user.token,
+          follower.accountname,
+        );
+        console.log('팔로우 추가 메시지 : ', response.message);
+
+        onToggleFollowButton(index, true);
+      } catch (error) {
+        console.error(error);
+        // setIsEmailValid(true);
+        alert('팔로우에 실패하였습니다.');
+      }
+    } else {
+      // 버튼이 팔로우가 아닌 경우
+      try {
+        const response = await followAPI.unfollowingPost(
+          user.token,
+          follower.accountname,
+        );
+        console.log('언팔 메시지 : ', response.message);
+      } catch (error) {
+        console.log(error);
+        alert('언팔에 실패하였습니다.');
+      }
+      onToggleFollowButton(index, false);
+    }
+  };
+
+  // 버튼값이 변경되면 리렌더링이됨
+  const onToggleFollowButton = (idx, follow) => {
+    const newButtonStates = buttonStates.slice();
+
+    if (follow) {
+      newButtonStates[idx] = {
+        text: '취소',
+        className: styles['followers-btn-unfollow'],
       };
-      return updatedStates;
-    });
+    } else {
+      newButtonStates[idx] = {
+        text: '팔로우',
+        className: styles['followers-btn-follow'],
+      };
+    }
+    setButtonStates(newButtonStates);
   };
 
   return (
@@ -96,7 +135,7 @@ export default function Followings() {
                   type="button"
                   id={`btn-${index}`}
                   className={`${styles['followers-btn']} ${buttonStates[index]?.className}`}
-                  onClick={() => updateButtonState(index)}
+                  onClick={() => onFollowStateHandler(index, follower)}
                 >
                   {buttonStates[index]?.text}
                 </button>