#54 Add like functions and counter to comment

SandraBergstrom · Jul 3, 2023 · b5936ce · b5936ce
1 parent b7ae0fd
commit b5936ce
Showing 1 changed file with 80 additions and 2 deletions.
diff --git a/src/pages/comments/Comment.js b/src/pages/comments/Comment.js
@@ -1,14 +1,18 @@
 import React, { useState } from "react";
 
 import styles from "../../styles/Comment.module.css";
+import btnStyles from "../../styles/Button.module.css";
 import CommentEditForm from "./CommentEditForm";
 
 import { Link } from "react-router-dom/";
 import { Media } from "react-bootstrap";
 import Avatar from "../../components/Avatar";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
 import { MoreDropdown } from "../../components/MoreDropdown";
-import { axiosRes } from "../../api/axiosDefaults";
+import { axiosRes, axiosReq } from "../../api/axiosDefaults";
+
+import OverlayTrigger from "react-bootstrap/OverlayTrigger";
+import Tooltip from "react-bootstrap/Tooltip";
 
 const Comment = (props) => {
   const {
@@ -20,6 +24,8 @@ const Comment = (props) => {
     id,
     setPost,
     setComments,
+    likes_count,
+    like_id,
   } = props;
 
   const [showEditForm, setShowEditForm] = useState(false);
@@ -46,6 +52,46 @@ const Comment = (props) => {
     } catch (err) {}
   };
 
+  const handleLike = async () => {
+    try {
+      const { data } = await axiosReq.post("/likes/", { comment: id });
+      setComments((prevComments) => ({
+        ...prevComments,
+        results: prevComments.results.map((comment) => {
+          return comment.id === id
+            ? {
+                ...comment,
+                likes_count: comment.likes_count + 1,
+                like_id: data.id,
+              }
+            : comment;
+        }),
+      }));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleUnlike = async () => {
+    try {
+      await axiosReq.delete(`/likes/${like_id}/`);
+      setComments((prevComments) => ({
+        ...prevComments,
+        results: prevComments.results.map((comment) => {
+          return comment.id === id
+            ? {
+                ...comment,
+                likes_count: comment.likes_count - 1,
+                like_id: null,
+              }
+            : comment;
+        }),
+      }));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <div>
       <hr />
@@ -68,7 +114,39 @@ const Comment = (props) => {
               setShowEditForm={setShowEditForm}
             />
           ) : (
-            <p>{content}</p>
+            <div className="d-flex justify-content-between align-items-end">
+              <p>{content}</p>
+              <div className="d-flex align-items-center">
+              {likes_count}
+                {is_owner ? (
+                  <OverlayTrigger
+                    placement="top"
+                    overlay={
+                      <Tooltip>You can't like your own comment!</Tooltip>
+                    }
+                  >
+                    <i className="fa-solid fa-thumbs-up"></i>
+                  </OverlayTrigger>
+                ) : like_id ? (
+                  <span onClick={handleUnlike}>
+                    <i className={`fa-solid fa-thumbs-up ${styles.Heart}`} />
+                  </span>
+                ) : currentUser ? (
+                  <span onClick={handleLike}>
+                    <i
+                      className={`fa-solid fa-thumbs-up ${styles.HeartOutline}`}
+                    />
+                  </span>
+                ) : (
+                  <OverlayTrigger
+                    placement="top"
+                    overlay={<Tooltip>Log in to like comments!</Tooltip>}
+                  >
+                    <i className="fa-solid fa-thumbs-up" />
+                  </OverlayTrigger>
+                )}
+              </div>
+            </div>
           )}
         </Media.Body>
         {is_owner && !showEditForm && (