무비앱 - Favorite list에 추가 삭제

Add to Button 을 누르면 버튼 상태가 변하는 기능

 

아직 Favorite 리스트에 넣지 않았다면 Add to Favorite list하게 하고

이미 리스트에 넣어져 있다면 Remove From Favorite list하게 할 것이다.

 

해당 버튼에 onClick으로 버튼을 눌렀을 때 실행될 기능을 추가해준다.

      <button onClick={onClickFavorite}>
        {Favorited ? 'Not Favorite' : 'Add to Favorite'} {FavoriteNumber}
      </button>

 

 

Favorited가 된 상태에서 실행할 Axios와 Favorited가 되지 않은 상태에서 길행할 Axios를 if문으로 나눠주고 해당 endpoint

를 넣어준다. 

그리고 movieId, userFrom등이 담긴 variables를 넣어 보내준다.

추가로 응답이 잘 될때 안 될 때 alert를 넣어준다.

  const onClickFavorite = () => {
    if (Favorited) {
      Axios.post('/api/favorite/removeFromFavorite', variables)
      .then(response => {
        if(response.data.success){
        }else{

          alert('Davorite 리스트에서 지우는 걸 실패했습니다.')
        }
      })
    } else {
      Axios.post('/api/favorite/addToFavorite', variables)
      .then(response => {
        if(response.data.success){
        }
        else{
          alert('Favorite 리스트에서 추가하는 걸 실패했습니다.')
        }
      })
    }
  }

 

그리고 favorite.js에서 removeFromFavorite과 addToFavorite 2개의 router를 만들어준다.

 

먼저 addToFavorite router를 만들자면,

보낸 것을 받아오는, req.body(variables)를 Favorite안에 넣어줘야 한다.

const favorite = new Favorite(req.body)

 

.save()메소드를 이용해서 선언해준 favorite안에 저장해준다.

에러가 일어날 경우 status(400)을 주고 아닐 경우 성공status(200)을 준다.

router.post('/addToFavorite', (req, res) => {
    const favorite = new Favorite(req.body)

    favorite.save((err, doc) => {
        if(err) return res.status(400).send(err)
        return res.status(200).json({success: true})
    })

});

 

Favorite을 취소해주는 removeFromFavorite은 좀 더 간단한 편이다.

.findOneAndDelete()메소드를 이용해서 movieId와 userFrom의 조건에 맞는 것을 지워달라 요청한다.

아까와 마찬가지로 추가로 에러가 날 경우 반응과 성공할 반응을 전해준다.

 

 

 

다시 front로 와서 서버와의 소통에 성공했을 때 FavoriteNumber를 하나 올려주고 내려주는 게 한다.

또한 버튼을 눌렀을 때마다 상태가 현재 상태의 반대로 되게 해준다.

  const onClickFavorite = () => {
    if (Favorited) {
      Axios.post('/api/favorite/removeFromFavorite', variables)
      .then(response => {
        if(response.data.success){
          setFavoriteNumber(FavoriteNumber - 1)
          setFavorited(!Favorited)
        }else{

          alert('Davorite 리스트에서 지우는 걸 실패했습니다.')
        }
      })
    } else {
      Axios.post('/api/favorite/addToFavorite', variables)
      .then(response => {
        if(response.data.success){
          setFavoriteNumber(FavoriteNumber + 1)
          setFavorited(!Favorited)
        }
        else{
          alert('Favorite 리스트에서 추가하는 걸 실패했습니다.')
        }
      })
    }
  }