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 ( + <> +
+ {isCommentLiked ? ( + <> + <> +
+ +
+ + + ) : ( + <> + + + )} +
+ + ); +} + +export default CommentLikeButton; diff --git a/client/src/Components/PostsComponents/PostsComments/PostsComments.js b/client/src/Components/PostsComponents/PostsComments/PostsComments.js index 8b320137..a51a63c7 100644 --- a/client/src/Components/PostsComponents/PostsComments/PostsComments.js +++ b/client/src/Components/PostsComponents/PostsComments/PostsComments.js @@ -9,6 +9,8 @@ import DropDownMenu from "../DropDownMenu/DropDownMenu"; import { useNavigate } from "react-router-dom"; import { formatDistanceToNow } from "date-fns"; import { fr } from "date-fns/locale"; +import CommentLikeButton from "./CommentLikeButton/CommentLikeButton"; + function PostsComments({ likeButtonSizePollPost, postId, @@ -244,7 +246,18 @@ function PostsComments({ : "posts-comments-component-comments-like-button" } > - LIKE +