React_구독기능(1)

0. Subscribe Model

  - userTo

  - useFrom

 

1. 비디오 writer의 구독자 수

 1) React  (props 활용 / 부모 component에 userTo 속성)

const [SubscribeNumber, setSubscribeNumber] = useState(0)

 

useEffect(() => {

        let variable={userTo:props.userTo}

        

        Axios.post('/api/subscribe/subscribeNumber', variable)

            .then(response=>{

                if(response.data.success){

                    setSubscribeNumber(response.data.subscriberNumber)

                }else{

                    alert('구독자 수 정보를 가져오지 못했습니다.')

                }

 

            })

 

 2) Node

router.post('/subscribeNumber', (req, res)=>{

    Subscriber.find( {'userTo' : req.body.userTo})

    .exec((err,subscribe)=>{

        if(err) return status(400).send(err);

        return res.status(200).json({success:true, subscriberNumber : subscribe.length})

    })

}) 

 

3. 내가 이 비디오를 구독하는지 여부

  1) React

const [Subscribed, setSubscribed] = useState(false)

 

useEffect --

        let subscribedVariable={userTo:props.userTo, userFrom:localStorage.getItem('userId')}

 

        Axios.post('/api/subscribe/subscribed', subscribedVariable)

            .then(response=>{

                if(response.data.success){

                    setSubscribed(response.data.subscribed)

                }else{

                    alert('사용자 정보를 가져오는 데 실패했습니다.')

                }

            })

 

  2) Node  ( userTo, userFrom 모두 있으면 true, 모두 없으면 false )

router.post('/subscribed', (req, res)=>{

    Subscriber.find( {'userTo' : req.body.userTo, 'userFrom':req.body.userFrom})

    .exec((err,subscribe)=>{

        if(err) return res.status(400).send(err);

        let result=false

        if(subscribe.length !==0){

            result=true

        }

        res.status(200).json({success:true, subscribed:result})

    })

}) 

 

 

4. Button UI, 화면구현

 : ?, : 삼항 연산자 사용

            <button

                style={{backgroundColor: `${Subscribed ? '#AAAAAA' : '#CC0000'}`, borderRadius:'4px', color:'#fff', padding:'10px 16px', fontWeight:'500', fontSize:'1rem', textTransform:'uppercase'}}

             >

                {SubscribeNumber} {Subscribed ? 'Subscribed' : 'Subscribe'}

            </button>