import React, { useCallback, useLayoutEffect, useState } from "react";
import { useAuthenticated, useUserId } from "@nhost/react";
import { BsGithub } from "react-icons/bs";
import { IoLogoYoutube } from "react-icons/io";
import { AiOutlineRead } from "react-icons/ai";
import { BiComment } from "react-icons/bi";
import { MdClose } from "react-icons/md";
import Like from "common/components/Like/Like";
import Comment from "common/components/Comment";
import useLikePlays from "common/hooks/useLikePlays";
import { NHOST } from "common/const";
import countByProp from "common/utils/countByProp";
const initialLikeObject = {
liked: false,
number: null,
interation: false,
};
const PlayHeaderActions = ({ play }) => {
const { play_like } = play;
const userId = useUserId();
const { likePlay, unLikePlay } = useLikePlays();
const [showComment, setShowComment] = useState(false);
const [likeObj, setLikeObj] = useState({ ...initialLikeObject });
const [loading, setLoading] = useState(false);
const isAuthenticated = useAuthenticated();
const constructLikeData = useCallback(
(userId) => {
if (!play_like?.length) return { liked: false, number: 0, interation: false };
const numberOfLikes = countByProp(play_like, "liked", true);
console.log("number of likes are", numberOfLikes);
const ifLiked = play_like.find((obj) => obj.user_id === userId);
return ifLiked
? ifLiked?.liked
? { liked: true, number: numberOfLikes, interation: true }
: { liked: false, number: numberOfLikes, interation: true }
: { liked: false, number: numberOfLikes, interation: false };
},
[play_like]
);
useLayoutEffect(() => {
setLikeObj(constructLikeData(userId));
}, [userId, constructLikeData]);
const handleLogin = (value) => {
return (window.location = NHOST.AUTH_URL(window.location.href, value));
};
const onLikeClick = async () => {
if (!isAuthenticated) return handleLogin("github");
try {
setLoading(true);
const mutationObj = { play_id: play.id, user_id: userId };
if (!likeObj.liked && !likeObj.interation) {
await likePlay(mutationObj);
setLikeObj((pre) => ({
liked: true,
number: pre.number + 1,
interation: true,
}));
} else {
await unLikePlay({ ...mutationObj, liked: !likeObj.liked });
setLikeObj((pre) => ({
liked: !pre.liked,
number: !pre.liked ? pre.number + 1 : pre.number - 1,
interation: true,
}));
}
} catch (err) {
console.log(err);
} finally {
return setLoading(false);
}
};
return (
<>