Skip to content

Commit

Permalink
🐛Modify : 팔로워 수 / 팔로잉 수 처리 #103
Browse files Browse the repository at this point in the history
  • Loading branch information
@seok-hyung
seok-hyung committed Jun 23, 2023
1 parent 17ee5aa commit d837481
Showing 1 changed file with 58 additions and 24 deletions.
82 changes: 58 additions & 24 deletions src/pages/profile/Profile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import { getMyInfoAPI } from '../../api/user/getMyInfoAPI';
import { getProductListAPI } from '../../api/product/getProductListAPI';
import { getProfilePostAPI } from '../../api/post/getProfilePostAPI';
import { followAPI } from '../../api/profile/followAPI';
import { useNavigate } from 'react-router-dom';
import { unfollowAPI } from '../../api/profile/unFollowAPI';
import { getProfileAPI } from '../../api/profile/getProfileAPI';

import { useNavigate } from 'react-router-dom';

// 공통 컴포넌트
import TopBasicNav from '../../components/common/topNav/TopBasicNav';
import {
Expand All @@ -32,9 +34,14 @@ import postAlbumOff from '../../assets/icon/icon-post-album-off.svg';

export default function Profile() {
const [isListMode, setIsListMode] = useState(true);
const [profile, setProfile] = useState({});
const [isFollowed, setIsFollowed] = useState(false);
const [followingCount, setFollowingCount] = useState(0);
const [profile, setProfile] = useState(null);
const [followersCount, setFollowersCount] = useState(
profile?.followerCount || 0,
);
const [followingCount, setFollowingCount] = useState(
profile?.followingCount || 0,
);
const token = useRecoilValue(userTokenState);
const myAccountname = useRecoilValue(accountNameState);
const [isMyProfile, setIsMyProfile] = useState(false);
Expand All @@ -48,17 +55,21 @@ export default function Profile() {
setIsMyProfile(accountname === myAccountname);
}, [accountname, myAccountname]);

useEffect(() => {
setIsFollowed(profile?.isfollow);
}, [profile?.isfollow]);

useEffect(() => {
getProductListAPI(accountname, token).then((data) => {
console.log(data, 'hi');
// console.log(data, 'hi');
setProductList(data.product);
});
getProfilePostAPI(accountname, token).then((data) => {
console.log(data);
setMyPost(data);
// console.log('myPost : ', data);
// console.log(data);
});
}, [accountname]);
console.log(isMyProfile);

// useEffect(() => {
// getMyInfoAPI(token).then((data) => {
Expand All @@ -76,6 +87,12 @@ export default function Profile() {
getProfileAPI(accountname, token)
.then((data) => {
setProfile(data.profile);
setFollowersCount(data.profile.followerCount);
setFollowingCount(data.profile.followingCount);
// setFollowersCount(data.profile.followerCount);
// setFollowingCount(data.profile.followingCount);
console.log('getprofileapi 사용합니다!!');
console.log(data);
})
.catch((error) => {
console.error('프로필 데이터를 불러오지 못했습니다.', error);
Expand All @@ -84,23 +101,34 @@ export default function Profile() {
getMyInfoAPI(token)
.then((data) => {
setProfile(data.user);
console.log(accountname + 'hi');
setFollowersCount(data.user.followerCount);
setFollowingCount(data.user.followingCount);
console.log('getmyinfoapi 사용합니다!!');
})
.catch((error) => {
console.error('프로필 데이터를 불러오지 못했습니다.', error);
});
}
}, [isMyProfile, accountname, token]);

const toggleFollow = () => {
console.log(accountname);
};

const handleFollow = () => {
console.log(accountname);
followAPI(accountname, token).then((data) => {
console.log(data);
});
if (isFollowed) {
// 이미 팔로우한 경우
unfollowAPI(accountname, token).then((data) => {
console.log(data);
});
setIsFollowed(false);
console.log(isFollowed);
setFollowersCount(followersCount - 1);
} else {
// 아직 팔로우하지 않은 경우
followAPI(accountname, token).then((data) => {
console.log(data);
});
setIsFollowed(true);
console.log(isFollowed);
setFollowersCount(followersCount + 1);
}
};
const handleEditProfile = () => {
navigate(`/profile/${myAccountname}/edit`);
Expand All @@ -112,9 +140,9 @@ export default function Profile() {
console.log('상품 등록');
};

console.log('myAccountname:', myAccountname);
console.log('isMyProfile:', isMyProfile);
console.log(myPostArray);
// console.log('myAccountname:', myAccountname);
// console.log('isMyProfile:', isMyProfile);
// console.log(myPostArray);

return (
<div>
Expand All @@ -123,8 +151,12 @@ export default function Profile() {
<S.ProfileContainer>
<S.ProfileHeader>
{/* 프로필 팔로워수 처리 변경 */}
<S.Followers>
<span>{profile ? profile.followerCount : 'Loading...'}</span>
<S.Followers
onClick={() => {
navigate(`/profile/${accountname}/follower`);
}}
>
<span>{followersCount || 'Loading...'}</span>
<span>followers</span>
</S.Followers>
{/* 프로필 이미지 처리 변경 */}
Expand All @@ -133,8 +165,12 @@ export default function Profile() {
alt="프로필 사진"
/>
{/* 프로필 팔로잉수 처리 변경 */}
<S.Followings>
<span>{profile ? profile.followingCount : 'Loading...'}</span>
<S.Followings
onClick={() => {
navigate(`/profile/${accountname}/following`);
}}
>
<span>{followingCount}</span>
<span>followings</span>
</S.Followings>
</S.ProfileHeader>
Expand All @@ -160,14 +196,12 @@ export default function Profile() {
{isFollowed ? (
<UnfollowButton
onClick={() => {
toggleFollow();
handleFollow();
}}
/>
) : (
<MediumFollowButton
onClick={() => {
toggleFollow();
handleFollow();
}}
/>
Expand Down

0 comments on commit d837481

Please sign in to comment.