[react&NodeJS]映画ページ#4

日付:21.007.08
参考講義

1.Favoriteボタンの最適化

1)axiosを[Ssection]-[Favorite.js]に追加
Axios、Favoriteボタンをクリックするかどうか

axios.post('/api/favorite/favorited', variables)
            .then(response => {
                if (response.data.success) {

                } else {
                    alert('정보를 가져오는데 실패하였습니다.');
                }
            })

2)ルートを[route]-[favorite.js]に追加

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

    // Favorite 리스트에 추가하였는지 DB에서 정보 확인

    // mongoDB에서 favorite 숫자 가져오기
    Favorite.find({ "movieId": req.body.movieId, "userFrom": req.body.userFrom })
        .exec((err, info) => {
            if (err) return res.status(400).send(err)

            let result = false;
            if (info.length !== 0) {
                result = true
            }

            // front에 숫자 정보 전송
            res.status(200).json({ success: true, favoriteNumber: info.length })
        })


});

3)ユーザ状態の追加[Section]-[Favorite.js]
SetFavoriteNumber:Favoriteの数字を共に押す
setFavorite:Favoriteをクリック

function Favorite(props){
  ...
  ...
  const [FavoriteNumber, setFavoriteNumber] = useState(0);
  const [Favorited, setFavorited] = useState(false);
  
  useEffect(() => {
        let variables = {
            userFrom,
            movieId,
        }
        axios.post('/api/favorite/favoriteNumber', variables)
            .then(response => {
                setFavoriteNumber(response.data.favoriteNumber)
                if (response.data.success) {
                    
                } else {
                    alert('숫자 정보를 가져오는데 실패하였습니다.');
                }
            })

        axios.post('/api/favorite/favorited', variables)
            .then(response => {
                if (response.data.success) {
                    setFavorited(response.data.favorited)
                } else {
                    alert('정보를 가져오는데 실패하였습니다.');
                }
            })
    }, []);
}

4)returnにおけるbuttonの具体化
Favoritedがfalseの場合、「Not Favorite{number}」とマークされます.
Favorite trueの場合は、「Add to Favorite{number}」とマークされます.

function Favorite(props) {
  ...
  ...

    return (
        <div>
            <button>{Favorited ? "Not Favorite" : "Add To Favorite "}{FavoriteNumber}</button>
        </div>
    )
}

結果画面

2.お気に入りリストに追加

1)onClickイベントを[Section]-[Favorite.js]ボタンに追加
let変数をuseEffectの外にエクスポート

function Favorite(props) {
  let variables = {
        userFrom: userFrom,
        movieId: movieId,
        movieTitle: movieTitle,
        moviePost: moviePost,
        movieRunTime: movieRunTime
    }
  ...
  ...
  const onClickFavorite = () => {

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

                    } else {
                        alert('Favorite 리스트에서 추가하는 걸 실패했습니다.')
                    }
                })
        }
    }
  
  return(
      <Button onClick={onClickFavorite}>{Favorited ? "Not Favorite " : "Add To Favorite "}{FavoriteNumber}</Button>
  )
}

2)ルートを[route]-[favorite.js]に追加

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

    Favorite.findOneAndDelete({ movieId: req.body.movieId, userFrom: req.body.userFrom })
        .exec((err, doc) => {
            if (err) return res.status(400).send(err)
            res.status(200).json({ success: true, doc })
        })
})

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 })
    })

})

3)[Ssection]-[Favorite.js]onClickイベント効果を挿入する

const onClickFavorite = () => {

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

Full Code

Walang Github

Walang Notion