#20 Add like/unlike post

src/pages/posts/Post.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import { useCurrentUser } from "../../contexts/CurrentUserContext";
 
 import styles from "../../styles/Post.module.css";
@@ -9,6 +9,7 @@ import { Link } from "react-router-dom";
 import Avatar from "../../components/Avatar";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Tooltip from "react-bootstrap/Tooltip";
+import { axiosReq, axiosRes } from "../../api/axiosDefaults";
 
 const Post = (props) => {
   const {
@@ -24,15 +25,50 @@ const Post = (props) => {
     image,
     updated_at,
     postPage,
+    setPosts,
   } = props;
 
+  console.log(likes_count)
+
   const currentUser = useCurrentUser();
   const is_owner = currentUser?.username === owner;
 
+  const handleLike = async () => {
+    try {
+      const { data } = await axiosReq.post("/likes/", { post: id });
+      setPosts((prevPosts) => ({
+        ...prevPosts,
+        results: prevPosts.results.map((post) => {
+          return post.id === id
+            ? { ...post, likes_count: post.likes_count + 1, like_id: data.id }
+            : post;
+        }),
+      }));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleUnlike = async () => {
+    try {
+      await axiosReq.delete(`/likes/${like_id}/`);
+      setPosts((prevPosts) => ({
+        ...prevPosts,
+        results: prevPosts.results.map((post) => {
+          return post.id === id
+            ? { ...post, likes_count: post.likes_count - 1, like_id: null }
+            : post;
+        }),
+      }));
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <Card className={styles.Post}>
       <Card.Body>
-        <Media className="align-items-center justify-content-between">
+        <Media className="d-flex align-items-center justify-content-between">
           <Link to={`/travelers/${traveler_id}`}>
             <Avatar src={traveler_image} height={55} />
             {owner}
@@ -58,11 +94,11 @@ const Post = (props) => {
               <i className="far fa-heart" />
             </OverlayTrigger>
           ) : like_id ? (
-            <span onClick={() => {}}>
+            <span onClick={handleUnlike}>
               <i className={`fas fa-heart ${styles.Heart}`} />
             </span>
           ) : currentUser ? (
-            <span onClick={() => {}}>
+            <span onClick={handleLike}>
               <i className={`far fa-heart ${styles.HeartOutline}`} />
             </span>
           ) : (
@@ -84,4 +120,4 @@ const Post = (props) => {
   );
 };
 
-export default Post;
+export default Post;

src/styles/Post.module.css

@@ -1,24 +1,30 @@
 .Post {
-    background-color: #ffffff;
-    border: 1px solid #dadadf;
-    border-radius: 2px;
-    margin-bottom: 16px;
-    text-align: center;
-  }
-
-  .Post figure,
-  h5 {
-    margin: 0 0;
-  }
-
-  .Heart {
-    color: #f85032;
-  }
-
-  .Heart:hover {
-    color: #2142b2;
-  }
-
-  .HeartOutline:hover {
-    color: #f85032;
-  }
+  background-color: white;
+  border: 1px solid #dadadf;
+  border-radius: 2px;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+/* .PostImage {
+  max-height: 600px;
+  width: auto;
+  object-fit: cover;
+} */
+
+.Post figure,
+h5 {
+  margin: 0 0;
+}
+
+.Heart {
+  color: var(--clr-accent-pink);
+}
+
+.Heart:hover {
+  color: var(--clr-accent-dark);
+}
+
+.HeartOutline:hover {
+  color: var(--clr-accent-pink);
+}