17. 좋아요 싫어요 기능(3) 클릭시 기능들 - 유튜브 클론 코딩

1.onClick func 만들기(Axios통신 포함)(LikeDislikes.js)

* onClick 이벤트 like 버튼에 적용시키기

<span key="comment-basic-like">
        <Tooltip title="Like">
          {LikeAction === '' ? (
            <LikeOutlined onClick={onLike} />
          ) : (
            <LikeFilled onClick={onLike} />
          )}
        </Tooltip>

* onLike 함수만들기

const onLike = () => {
    if (LikeAction === '') {
      Axios.post('/api/like/upLike', variable).then((response) => {
        if (response.data.success) {
          setLikes(Likes + 1);
          setLikeAction('liked');

          if (DisLikeAction !== '') {
            setDisLikeAction('');
            setDislikes(Dislikes - 1);
          }
        } else {
          alert('Like를 올리지 못했습니다.');
        }
      });
    } else {
      Axios.post('/api/like/unLike', variable).then((response) => {
        if (response.data.success) {
          setLikes(Likes - 1);
          setLikeAction('');
        } else {
          alert('Like를 내리지 못했습니다.');
        }
      });
    }
  };

* onClick이벤트 dislike에 버튼에 적용시키기

 <span key="comment-basic-dislike" style={{ marginLeft: '4px' }}>
        <Tooltip title="Dislike">
          {DisLikeAction === '' ? (
            <DislikeOutlined onClick={onDislike} />
          ) : (
            <DislikeFilled onClick={onDislike} />
          )}
        </Tooltip>

* onDislike 함수만들기

const onDislike = () => {
    if (DisLikeAction !== '') {
      Axios.post('/api/like/unDislike', variable).then((response) => {
        if (response.data.success) {
          setDislikes(Dislikes - 1);
          setDisLikeAction('');
        } else {
          alert('dislike를 지우지 못했습니다.');
        }
      });
    } else {
      Axios.post('/api/like/upDislike', variable).then((response) => {
        if (response.data.success) {
          setDislikes(Dislikes + 1);
          setDisLikeAction('disliked');

          if (LikeAction !== '') {
            setLikeAction('');
            setLikes(Likes - 1);
          }
        } else {
          alert('dislike를 올리지 못했습니다.');
        }
      });
    }
  };

2.서버에서 Axios통신을 위한 라우터코드 만들기(server-routes-like.js)

router.post("/upLike", (req, res) => {
  let variable = {};
  if (req.body.videoId) {
    variable = { videoId: req.body.videoId, userId: req.body.userId };
  } else {
    variable = { commentId: req.body.commentId, userId: req.body.userId };
  }
  // Like collection에다가 클릭 정보를 넣기
  const like = new Like(variable);
  like.save((err, likeResult) => {
    if (err) return res.json({ success: false, err });

    //만약 Dislike이 이미 클릭이 되어있다면, Dislike을 1 줄여준다.
    Dislike.findOneAndDelete(variable).exec((err, disLikeResult) => {
      if (err) return res.status(400).json({ success: false, err });
      res.status(200).json({ success: true });
    });
  });
});

router.post("/unLike", (req, res) => {
  let variable = {};
  if (req.body.videoId) {
    variable = { videoId: req.body.videoId, userId: req.body.userId };
  } else {
    variable = { commentId: req.body.commentId, userId: req.body.userId };
  }

  Like.findOneAndDelete(variable).exec((err, result) => {
    if (err) return res.status(400).json({ success: false, err });
    res.status(200).json({ success: true });
  });
});

router.post("/unDislike", (req, res) => {
  let variable = {};
  if (req.body.videoId) {
    variable = { videoId: req.body.videoId, userId: req.body.userId };
  } else {
    variable = { commentId: req.body.commentId, userId: req.body.userId };
  }

  Dislike.findOneAndDelete(variable).exec((err, result) => {
    if (err) return res.status(400).json({ success: false, err });
    res.status(200).json({ success: true });
  });
});

router.post("/upDislike", (req, res) => {
  let variable = {};
  if (req.body.videoId) {
    variable = { videoId: req.body.videoId, userId: req.body.userId };
  } else {
    variable = { commentId: req.body.commentId, userId: req.body.userId };
  }
  // DisLike collection에다가 클릭 정보를 넣기
  const dislike = new Dislike(variable);
  dislike.save((err, dislikeResult) => {
    if (err) return res.json({ success: false, err });

    //만약 like이 이미 클릭이 되어있다면, like을 1 줄여준다.
    Like.findOneAndDelete(variable).exec((err, LikeResult) => {
      if (err) return res.status(400).json({ success: false, err });
      res.status(200).json({ success: true });
    });
  });
});

실행결과

 

해당 강의