From 51bef3731b6a1088adbad235fb2f72c831a9e27b Mon Sep 17 00:00:00 2001
From: shajeed <shajeed@live.fr>
Date: Sun, 17 Sep 2023 14:50:02 -0400
Subject: [PATCH] Comment likes working

---
 .../CommentLikeButton/CommentLikeButton.js    | 152 ++++++++++++++++++
 .../PostsComments/PostsComments.js            |  15 +-
 2 files changed, 166 insertions(+), 1 deletion(-)
 create mode 100644 client/src/Components/PostsComponents/PostsComments/CommentLikeButton/CommentLikeButton.js

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 (
+    <>
+      <div
+        className={
+          isMediaQueriesFullPagePostDisabled
+            ? `logo-likes-no-media-queries ${likeButtonSizePollPost}`
+            : fullPagePostModalStyle || fullPagePostPageStyle
+            ? `logo-likes-fullpagepost-modal-and-page ${likeButtonSizePollPost}`
+            : `logo-likes ${likeButtonSizePollPost}`
+        }
+      >
+        {isCommentLiked ? (
+          <>
+            <>
+              <div className="logo-like-red">
+                <button
+                  className="button-like-toggle-color"
+                  onClick={handleClick}
+                >
+                  <svg
+                    width={handleSizeWidth()}
+                    height={handleSizeHeight()}
+                    viewBox="0 0 22 19"
+                    fill="none"
+                    version="1.1"
+                    id="svg44"
+                  >
+                    <defs id="defs48" />
+                    <path
+                      d="m 6.97514,2.28213 c 1.24267,0.02553 2.45311,0.59193 3.32076,2.09537 0.3224,0.55763 1.1271,0.55763 1.4508,0 0.8679,-1.50318 2.0784,-2.06958 3.3208,-2.09537 1.2427,-0.02709 2.5148,0.55892 3.2994,1.50189 1.514,1.82171 1.7074,5.00527 -0.5092,7.23558 L 11.0212,16.91 4.18363,11.0196 C 1.96832,8.78954 2.16047,5.60573 3.67578,3.78402 4.46038,2.84105 5.73246,2.25504 6.97514,2.28213 Z M 7.01125,0.60459 C 5.23544,0.566675 3.51199,1.35953 2.38616,2.71209 0.303937,5.21627 0.178844,9.38045 3.00001,12.2109 c 0.01496,0.0152 0.03096,0.0297 0.0472,0.0444 l 7.42739,6.3967 c 0.3145,0.2701 0.7792,0.2701 1.0934,0 l 7.4287,-6.3967 c 0.0163,-0.0147 0.031,-0.0292 0.0459,-0.0444 C 21.8638,9.38019 21.7371,5.21627 19.6552,2.71209 18.5309,1.35928 16.8059,0.566417 15.0311,0.60459 13.5589,0.635025 12.139,1.45316 11.0212,2.79256 9.9036,1.45316 8.48373,0.635025 7.01125,0.60459 Z"
+                      fill="#000000"
+                      id="path42"
+                    />
+                    <path
+                      style={{
+                        fill: "#ff0000",
+                        stroke: "none",
+                        strokeWidth: 0,
+                      }}
+                      d="M 7.5527159,13.867641 C 5.512685,12.106541 3.9595644,10.714722 3.7698805,10.477678 3.3394552,9.9397843 2.992175,9.2624746 2.7732861,8.5339942 2.5341929,7.7382721 2.517617,6.5446486 2.7344686,5.7387475 3.1758031,4.0985839 4.4024821,2.8312066 5.9226547,2.4447851 6.4357269,2.3143643 7.3612834,2.31488 7.8641764,2.445867 c 0.869008,0.2263478 1.7145707,0.8760498 2.2771026,1.7496492 0.302135,0.4692086 0.518934,0.6250882 0.86938,0.6250882 0.373161,0 0.592142,-0.152872 0.903471,-0.6307184 0.156573,-0.240317 0.48886,-0.6295546 0.738415,-0.8649726 0.729064,-0.6877616 1.466842,-0.9793592 2.481468,-0.9807694 3.358147,-0.00467 5.390003,3.8290853 3.775462,7.1236241 -0.474332,0.9678939 -0.673094,1.1665369 -4.246803,4.2442619 -1.859615,1.601524 -3.441376,2.963962 -3.515024,3.027639 -0.130273,0.112635 -0.2278,0.03472 -3.5949321,-2.872028 z"
+                      id="path380"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </>
+          </>
+        ) : (
+          <>
+            <button className="button-like-toggle-color" onClick={handleClick}>
+              <svg
+                width={handleSizeWidth()}
+                height={handleSizeHeight()}
+                viewBox="0 0 22 19"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.97514 2.28213C8.21781 2.30766 9.42825 2.87406 10.2959 4.3775C10.6183 4.93513 11.423 4.93513 11.7467 4.3775C12.6146 2.87432 13.8251 2.30792 15.0675 2.28213C16.3102 2.25504 17.5823 2.84105 18.3669 3.78402C19.8809 5.60573 20.0743 8.78929 17.8577 11.0196L11.0212 16.91L4.18363 11.0196C1.96832 8.78954 2.16047 5.60573 3.67578 3.78402C4.46038 2.84105 5.73246 2.25504 6.97514 2.28213ZM7.01125 0.60459C5.23544 0.566675 3.51199 1.35953 2.38616 2.71209C0.303937 5.21627 0.178844 9.38045 3.00001 12.2109C3.01497 12.2261 3.03097 12.2406 3.04721 12.2553L10.4746 18.652C10.7891 18.9221 11.2538 18.9221 11.568 18.652L18.9967 12.2553C19.013 12.2406 19.0277 12.2261 19.0426 12.2109C21.8638 9.38019 21.7371 5.21627 19.6552 2.71209C18.5309 1.35928 16.8059 0.566417 15.0311 0.60459C13.5589 0.635025 12.139 1.45316 11.0212 2.79256C9.9036 1.45316 8.48373 0.635025 7.01125 0.60459Z"
+                  fill="black"
+                />
+              </svg>
+            </button>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+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
+            <CommentLikeButton
+              setIsPostClicked={setIsPostClicked}
+              isPostClicked={isPostClicked}
+              likeButtonSizePollPost={likeButtonSizePollPost}
+              likeButtonSize={"likeButton-M-size"}
+              postId={postId}
+              loggedInUserId={loggedInUserId}
+              commentId={commentId}
+              isMediaQueriesFullPagePostDisabled={
+                isMediaQueriesFullPagePostDisabled
+              }
+            />
           </div>
         </div>
       </div>