diff --git a/client/src/Components/PostsComponents/PostsComments/CommentLikeButton/CommentLikeButton.js b/client/src/Components/PostsComponents/PostsComments/CommentLikeButton/CommentLikeButton.js new file mode 100644 index 00000000..c12a436f --- /dev/null +++ b/client/src/Components/PostsComponents/PostsComments/CommentLikeButton/CommentLikeButton.js @@ -0,0 +1,152 @@ +import React, { useState, useEffect } from "react"; +import "../../../PostsComponents/LikeButton/LikeButton.css"; +import { db } from "../../../../Configs/firebase"; +import { + doc, + collection, + getDoc, + updateDoc, + onSnapshot, +} from "firebase/firestore"; + +function CommentLikeButton({ + likeButtonSize, + likeButtonSizePollPost, + postId, + loggedInUserId, + // setIsPostClicked, + // isPostClicked, + commentId, + isMediaQueriesFullPagePostDisabled, + fullPagePostModalStyle, + fullPagePostPageStyle +}) { + const [isCommentLiked, setIsCommentLiked] = useState(false); + + useEffect(() => { + const commentRef = doc(collection(doc(db, "feed_post", postId), "post_comments"), commentId); + const unsubscribe = onSnapshot(commentRef, (docSnap) => { + if (docSnap.exists()) { + const likes = docSnap.data().likes || []; + setIsCommentLiked(likes.includes(loggedInUserId)); + } + }); + + return () => unsubscribe(); + }, [postId, commentId, loggedInUserId]); + + const handleClick = async (e) => { + e.preventDefault(); + if (loggedInUserId) { + try { + const commentRef = doc(collection(doc(db, "feed_post", postId), "post_comments"), commentId); + const commentSnap = await getDoc(commentRef); + + if (!commentSnap.exists()) { + console.log("No such comment!"); + return; + } + + const likes = commentSnap.data().likes || []; + + if (likes.includes(loggedInUserId)) { + likes.splice(likes.indexOf(loggedInUserId), 1); + } else { + likes.push(loggedInUserId); + } + + await updateDoc(commentRef, { likes }); + } catch (err) { + console.error(err); + } + } else { + console.log("please log in first"); + } + }; + + const handleSizeWidth = () => { + if (likeButtonSize === "likeButton-M-size") { + return 22; + } else if (likeButtonSize === "likeButton-S-size") { + return 15; + } + }; + const handleSizeHeight = () => { + if (likeButtonSize === "likeButton-M-size") { + return 19; + } else if (likeButtonSize === "likeButton-S-size") { + return 13; + } + }; + + return ( + <> +