Social Media 만들기 - 9) following, followers 보여주기

이제 팔로일, 팔로워를 누르면 팔로워목록이 보이도록 설정한다. 

 

profile.js

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { getProfileUser } from '../_actions/profileActions';
import Avatar from '../component/Avatar'
import { PROFILE_GETUSER_RESET, USER_UPDATE_PROFILE_RESET } from '../_constants/profileConstants';
import Loading from '../component/Loading';
import Alert from '../component/Alert'
import EditProfile from '../component/EditProfile'
import FollowBtn from '../component/FollowBtn';
import Followers from '../component/Followers';
import Followings from '../component/Followings';


function Profile(props) {
    const userId = props.match.params.id;
    
    const [showFollowers, setShowFollowers] = useState(false)
    const [showFollowing, setShowFollowing] = useState(false)

    return (
      
                        <div className="follow_btn">
                            <span className="mr-4" onClick={()=>setShowFollowers(true)}>
                                {user?.followers.length} Followers
                            </span>
                            <span className="mr-4" onClick={()=>setShowFollowing(true)}>
                                {user?.following.length} Following
                            </span>
                        </div>
                        
                        {
                            showFollowers &&
                            <Followers user = {user} setShowFollowers={setShowFollowers} />

                        }
                        {
                            showFollowing &&
                            <Followings user = {user} setShowFollowing={setShowFollowing}/>

                        }

                </div>
            </div>
            }
        </div>
    )
}

export default Profile

 

 

user정보와 setShowFollowing, setshowFollwers를 prop으로 넘겨준다. 

 

 

Follwers, Following에서 만약 내아이디가 보이면 팔로우버튼이 보이지 않도록 설정해준다. 

Follwers.js

import React from 'react'
import { useSelector } from 'react-redux'
import FollowBtn from './FollowBtn'
import UserCard from './UserCard'

function Followers({user, setShowFollowers}) {
    const userLogin = useSelector(state => state.userLogin)
    const {userInfo} = userLogin

    return (
        <div className="follow">
            <div className="follow_box">
                <h5 className="text-center">Followers</h5>
                <hr />
                <div className="follow_content">
                    {
                        user.followers.map(follower=>(
                            <UserCard key = {follower._id} user = {follower} setShowFollowers={setShowFollowers}>
                                {
                                    userInfo.user._id !== follower._id && <FollowBtn user={follower} userId = {follower._id}/>
                                }
                            </UserCard>
                        ))
                    }
                </div>
                <div className="close" onClick={()=>setShowFollowers(false)}>&times;</div>

            </div>
        </div>
    )
}

export default Followers

 

 

Following.js

import React from 'react'
import { useSelector } from 'react-redux'
import FollowBtn from './FollowBtn'
import UserCard from './UserCard'

function Followings({user, setShowFollowing}) {

    const userLogin = useSelector(state => state.userLogin)
    const {userInfo} = userLogin

    return (
        <div className="follow">
            <div className="follow_box">
                <h5 className="text-center">Following</h5>
                <hr />
                <div className="follow_content">
                    {
                        user.following.map(following=>(
                            <UserCard key={following._id} user={following} setShowFollowing={setShowFollowing}>
                                {
                                    userInfo.user._id !== following._id && <FollowBtn user={following} userId={following._id}/>
                                }
                            </UserCard>
                        ))
                    }
                </div>
                <div className="close" onClick={()=>setShowFollowing(false)}>&times;</div>
            </div>
        </div>
    )
}

export default Followings

 

 

여기서 만약 오류가 발생한다면 getProfile라우터를 잘 작성했는지 다시한번 확인해준다. 

userRouter.get('/:id',auth,  async(req, res)=>{
    try{
        const user = await User.findById(req.params.id)
                                .select('-password')
                                .populate("followers following", "-password")
        if(user){
            res.send(user)
        }else{
            res.status(404).send({message:'User Not Found.'})
        }
    }catch(err){
        return res.status(500).json({message: err.message})
    }
})

 

Populate해줘야 follower._id의 형태 사용이 가능하다. 

잘 뜬다.