Create Likes and Comments component, add them under ItemDetails so th…

…at the users can see likes/comments when they click on a specific item

client/src/components/comments/Comments.js

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { useParams } from 'react-router';
+import { v4 as uuidv4 } from 'uuid';
+import { useDispatch, useSelector } from 'react-redux';
+import { deleteComment, postComment } from '../../redux/comments/commentsSlice';
+
+const Comments = () => {
+  const dispatch = useDispatch();
+  const { userId, collId, itemId } = useParams();
+  const { value, isLoading, error } = useSelector((state) => state.comments);
+  const [commentData, setCommentData] = useState({ text: '' });
+  const clear = () => setCommentData({ text: '' });
+  const comment = (e) => {
+    e.preventDefault();
+    dispatch(postComment({
+      userId, collId, itemId, newComment: commentData,
+    }));
+    clear();
+  };
+  const removeComment = (id) => {
+    dispatch(deleteComment({
+      userId, collId, itemId, commentId: id,
+    }));
+  };
+  return (
+    <div>
+      {error && <p>{error}</p>}
+      {isLoading && <p>Loading...</p>}
+      {value && (
+        <>
+          <h4>Comments:</h4>
+          {value?.map((comment) => (
+            <li key={uuidv4()}>
+              <p>{comment.text}</p>
+              <button type="button" onClick={() => removeComment(comment._id)}>Delete</button>
+            </li>
+          ))}
+          <form onSubmit={comment}>
+            <textarea
+              value={commentData.text}
+              onChange={(e) => setCommentData({ text: e.target.value })}
+            />
+            <button type="submit">Comment</button>
+          </form>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Comments;

client/src/components/likes/Likes.js

@@ -0,0 +1,46 @@
+// import React, { useEffect } from 'react';
+import { useParams } from 'react-router';
+import { useDispatch, useSelector } from 'react-redux';
+import { deleteLike, postLike } from '../../redux/likes/likesSlice';
+
+const Likes = () => {
+  const dispatch = useDispatch();
+  const { value, isLoading, error } = useSelector((state) => state.likes);
+  const { userId, collId, itemId } = useParams();
+  const { user } = useSelector((state) => state.auth);
+  const currentLike = value?.find(
+    ({ item, author }) => item === itemId && author === user?.user._id,
+  );
+  const handleLike = (e) => {
+    e.preventDefault();
+    dispatch(currentLike
+      ? deleteLike({
+        userId, collId, itemId, likeId: currentLike._id,
+      })
+      : postLike({ userId, collId, itemId }));
+  };
+
+  return (
+    <div>
+      {error && <p>{error}</p>}
+      {isLoading && <p>Loading...</p>}
+      {value && (
+        <>
+          <h4>
+            Likes:
+            <span>{value?.length}</span>
+          </h4>
+          <h5>{ currentLike ? 'Liked' : 'Disliked' }</h5>
+          <button
+            type="button"
+            onClick={handleLike}
+          >
+            { currentLike ? 'Dislike' : 'Like' }
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Likes;

client/src/routes/ItemPage.js

@@ -2,18 +2,28 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router';
 import { useDispatch } from 'react-redux';
 import ItemDetails from '../components/items/ItemDetails';
+import Likes from '../components/likes/Likes';
+import Comments from '../components/comments/Comments';
 import { getItem } from '../redux/items/itemsSlice';
+import { getComments } from '../redux/comments/commentsSlice';
+import { getLikes } from '../redux/likes/likesSlice';
 
 const ItemPage = () => {
   const dispatch = useDispatch();
   const { userId, collId, itemId } = useParams();
 
   useEffect(() => {
+    dispatch(getLikes({ userId, collId, itemId }));
+    dispatch(getComments({ userId, collId, itemId }));
     dispatch(getItem({ userId, collId, itemId }));
   }, [dispatch, collId, userId, itemId]);
 
   return (
-    <ItemDetails />
+    <>
+      <ItemDetails />
+      <Likes />
+      <Comments />
+    </>
   );
 };