@material-ui/icons#ThumbUp JavaScript Examples

The following examples show how to use @material-ui/icons#ThumbUp. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: LikeDislikes.js    From youtube-clone with MIT License 4 votes vote down vote up 
LikeDislikes = ({ size, showDislikes = true, type, id, videoId }) => {
  const options = [-1, 1]; //Dislike, Like
  const [rating, setRating] = useState(null);
  const [dislikes, setDislikes] = useState(0);
  const [likes, setLikes] = useState(0);
  const isAuth = useSelector(({ channel }) => channel.isAuth);
  const classes = useStyles();
  useEffect(() => {
    const fetchRating = async () => {
      const url1 = `/api/ratings/${type}/${videoId}/${id}`;
      const url2 = `/api/ratings/user/${type}/${videoId}/${id}`;
      try {
        const {
          data: { ratings },
        } = await api.get(url1);
        const { data } = await api.get(url2);

        setLikes(ratings.likes);
        setDislikes(ratings.dislikes);
        if (data) {
          setRating(data.rating);
        }
      } catch (err) {
        console.log(err);
      }
    };
    fetchRating();
  }, [type, id]);

  const getRating = (option) => options[option];

  const handleThumbClick = async (newRating) => {
    if (isAuth) {
      const url = `/api/ratings/${type}/${videoId}/${id}`;
      try {
        if (!rating) {
          await api.post(url, {
            rating: newRating,
          });
          if (newRating > 0) {
            setLikes((count) => ++count);
          } else {
            setDislikes((count) => ++count);
          }
          setRating(newRating);
        } else if (rating && newRating !== rating) {
          await api.patch(url, {
            rating: newRating,
          });
          if (rating > 0) {
            setDislikes((count) => ++count);
            setLikes((count) => --count);
          } else {
            setDislikes((count) => --count);
            setLikes((count) => ++count);
          }
          setRating(newRating);
        } else {
          console.log("need to delete");
          await api.delete(url);
          if (rating > 0) {
            setLikes((count) => --count);
          } else {
            setDislikes((count) => --count);
          }
          setRating(null);
        }
      } catch (err) {
        console.log(err);
      }
    } else {
      window.location.assign(urlJoin(BACKEND_URL, "/api/auth/google"));
    }
  };

  return (
    <div className={classes.root}>
      <div className={classes.rating}>
        <ThumbUp
          onClick={() => handleThumbClick(getRating(1))}
          className={clsx(classes.thumbBtn, {
            [classes.small]: size === "small",
            [classes.active]: getRating(1) === rating,
          })}
        />
        <Typography variant="body2">
          {new NumAbbr().abbreviate(likes, 2)}
        </Typography>
      </div>
      <div className={classes.rating}>
        <ThumbDown
          onClick={() => handleThumbClick(getRating(0))}
          className={clsx(classes.thumbBtn, {
            [classes.small]: size === "small",
            [classes.active]: getRating(0) === rating,
          })}
        />
        {showDislikes && new NumAbbr().abbreviate(dislikes, 2)}
      </div>
    </div>
  );
}