9.버튼을 사용하여 Favorite list에 추가 삭제 - 영화사이트 만들기

Favorite리스트에 넣고 빼는 Function 만들기(Favorite.js)

1. 버튼에 onClick이벤트 적용

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

2. onClickFavorite 함수 만들기(Axios통신 포함)

const onClickFavorite = () => {
    let variables = {
      userFrom: userFrom,
      movieId: movieId,
      movieTitle: movieTitle,
      moviePost: moviePost,
      movieRunTime: movieRunTime,
    };

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

 

참고로 variables에 들어가는 값들은 코드 상위에서 정의하고있다.

  const [FavoriteNumber, setFavoriteNumber] = useState(0);
  const [Favorited, setFavorited] = useState(false);

  const movieId = props.movieId;
  const userFrom = props.userFrom;
  const movieTitle = props.movieInfo.title;
  const moviePost = props.movieInfo.backdrop_path;
  const movieRunTime = props.movieInfo.runtime;

3. Axios통신에 응답하기 위해 서버에서 라우터에 등록(server-routes-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);
    return res.status(200).json({ success: true, doc });
  });
});

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

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

Favorite.js 전체코드(버튼을 antd를 이용하여 UI를 바꿔줬음)

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

function Favorite(props) {
  const [FavoriteNumber, setFavoriteNumber] = useState(0);
  const [Favorited, setFavorited] = useState(false);

  const movieId = props.movieId;
  const userFrom = props.userFrom;
  const movieTitle = props.movieInfo.title;
  const moviePost = props.movieInfo.backdrop_path;
  const movieRunTime = props.movieInfo.runtime;

  useEffect(() => {
    let variables = {
      userFrom: userFrom,
      movieId: movieId,
    };
    Axios.post('/api/favorite/favoriteNumber', variables)
      //좋아요 숫자 가져오는 API
      .then((response) => {
        if (response.data.success) {
          setFavoriteNumber(response.data.favoriteNumber);
        } else {
          alert('숫자 정보를 가져오는데 실패하였습니다.');
        }
      });

    Axios.post('/api/favorite/favorited', variables)
      //내가 좋아요를 눌렀는지에대한 정보가져오는 API
      .then((response) => {
        if (response.data.success) {
          setFavorited(response.data.favorited);
        } else {
          alert('좋아요 정보를 가져오는데 실패하였습니다.');
        }
      });
  }, []);

  const onClickFavorite = () => {
    let variables = {
      userFrom: userFrom,
      movieId: movieId,
      movieTitle: movieTitle,
      moviePost: moviePost,
      movieRunTime: movieRunTime,
    };

    if (Favorited) {
      Axios.post('/api/favorite/removeFromFavorite', variables).then(
        (response) => {
          if (response.data.success) {
            setFavoriteNumber(FavoriteNumber - 1);
            setFavorited(!Favorited);
          } else {
            alert('Favorite리스트에서 지우는 걸 실패했습니다.');
          }
        }
      );
    } else {
      Axios.post('/api/favorite/addToFavorite', variables).then((response) => {
        if (response.data.success) {
          setFavoriteNumber(FavoriteNumber + 1);
          setFavorited(!Favorited);
        } else {
          alert('Favorite리스트에서 추가하는 걸 실패했습니다.');
        }
      });
    }
  };
  return (
    <div>
      <Button onClick={onClickFavorite}>
        {Favorited ? 'Not Favorite' : 'Add to Favorite'} {FavoriteNumber}
      </Button>
    </div>
  );
}

export default Favorite;

 

*실행결과

동영상 강의