구독 취소 기능 만들기

우선 Subscribe.js 에서

 

이렇게 해야하는데 userFrom을 가져오는 법은 

비디오 디테일 페이지 부분에 저기를

  <List.Item

                    actions={[<Subscribe userTo={VideoDetail.writer._id} userFrom={localStorage.getItem('userId')}/>]}

                >

 

이렇게 해주면 userFrom을 가져올수 있다.

 

 

    const onSubscribe = () => {
        let subscribedVariable = {

            userTo : props.userTo,
            userFrom : props.userFrom

        }

        //만약 구독 중이라면
        if(Subscribed){
            Axios.post('/api/subscribe/unSubscribe',subscribedVariable)
            .then(response=>{
                if(response.data.success){

                }else{
                    alert('구독을 취소 하는데 실패 했습니다.')
                }
            })
        }else{//만약 구독 중이 아니라면
            Axios.post('/api/subscribe/subscribe',subscribedVariable)
            .then(response=>{
                if(response.data.success){

                }else{
                    alert('구독을 하는데 실패 했습니다.')
                }
            })
        }
    }

 

우선 여기까지 코딩을 해줍니다. 

서버의 

routes/subscribe.js 로 가서 

 

 router.post('/unSubscribe',(req,res)=>{
   Subscriber.findOneAndDelete({userTo:req.body.userTo, userFrom: req.body.userFrom})
   .exec((err,doc)=>{
      if(err) return  res.status(400).json({success: false, err})
      res.status(200).json({success: true, doc})
   })
});

router.post('/subscribe',(req,res)=>{
  const subscribe = new Subscriber(req.body)

  subscribe.save((err,doc)=>{
     if(err) return res.json({success: false, err})
     res.status(200).json({success: true})
  })
});

두가지를 코딩을 해줍니다. 

 

 

전체적인 소스는

import Axios from 'axios'
import React,{useState, useEffect}from 'react'

function Subscribe(props) {
const [SubscribeNumber, setSubscribeNumber] = useState(0)
const [Subscribed, setSubscribed] = useState(false)

    useEffect(() => {
        //현재 업로드된 비디오 구독자 수 가져오기
        let variable = {userTo: props.userTo}
        Axios.post('/api/subscribe/subscribeNumber',variable)
        .then(response=>{
            if(response.data.success){
                setSubscribeNumber(response.data.subscriberNumber)
            }else {
                alert('구독자 수 정보를 받아오지 못했습니다.')
            }
        })

        //내가 현재 업로드한 유저를 구독했는지 여부 가져오기
        let subscribeVariable = {userTo: props.userTo, userFrom: localStorage.getItem("userId")}
        Axios.post('/api/subscribe/subscribed',subscribeVariable)
        .then(response=>{
            if(response.data.success){
                setSubscribed(response.data.subscribed)
            }else {
                alert('정보를 받아오지 못했습니다.')
            }
        })


    }, [])
    const onSubscribe = () => {
        let subscribedVariable = {

            userTo : props.userTo,
            userFrom : props.userFrom

        }

        //만약 구독 중이라면
        if(Subscribed){
            Axios.post('/api/subscribe/unSubscribe',subscribedVariable)
            .then(response=>{
                if(response.data.success){
                    setSubscribeNumber(SubscribeNumber-1)
                    setSubscribed(!Subscribed)
                }else{
                    alert('구독을 취소 하는데 실패 했습니다.')
                }
            })
        }else{//만약 구독 중이 아니라면
            Axios.post('/api/subscribe/subscribe',subscribedVariable)
            .then(response=>{
                if(response.data.success){
                    setSubscribeNumber(SubscribeNumber+1)
                    setSubscribed(!Subscribed)
                }else{
                    alert('구독을 하는데 실패 했습니다.')
                }
            })
        }
    }
    return (
        <div>
            <button
                style  ={{backgroundColor:`${Subscribed ? '#AAAAAA':'#CC0000'}`, borderRadius: '4px',
                color:'white',padding: '10px 16px',
                fontWeight: '500', fontSize: '1rem', textTransform: 'uppercase' 

            }}
            onClick={onSubscribe}
            >
               {SubscribeNumber} {Subscribed ? 'Subscribed' : 'Subscribe'}
            </button>
        </div>
    )
}

export default Subscribe

 

 

이렇게 동작하면 된 것입니다.