deleting comments added

alexandyrzph · Aug 3, 2022 · 6de9822 · 6de9822
1 parent 6fa6c98
commit 6de9822
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/pixelplace/src/components/Comment/Comment.js b/pixelplace/src/components/Comment/Comment.js
@@ -1,6 +1,19 @@
-const Comment = ({ photoURL, displayName, comment }) => {
+import { deleteDoc, doc } from "firebase/firestore";
+import { db } from "../../firebase";
+import { ToastContainer } from "react-toastify";
+import { toastError } from "../../utils/Toast";
+import { HiX } from "react-icons/hi";
+
+const Comment = ({ photoURL, displayName, comment, commentId, uid, postId }) => {
+    const deleteCommentHandler = (e) => {
+        deleteDoc(doc(db, "Posts", postId, "comments", commentId))
+            .then()
+            .catch((err) => toastError(err));
+    };
+
     return (
-        <div className="flex gap-2 mb-2 items-center">
+        <div className="flex bg-slate-200 rounded-full rounded-r-xl gap-2 mb-2 items-center">
+            <ToastContainer />
             <img
                 src={photoURL}
                 className="w-10 h-10 object-cover object-center rounded-full cursor-pointer"
@@ -10,6 +23,11 @@ const Comment = ({ photoURL, displayName, comment }) => {
                 <p className="w-full font-bold">@{displayName}</p>
                 <p className="w-full">{comment}</p>
             </div>
+            <HiX
+                cursor={"pointer"}
+                onClick={deleteCommentHandler}
+                className="hover:bg-slate-300 text-lg text-gray-500 hover:text-black rounded-full duration-100"
+            />
         </div>
     );
 };

diff --git a/pixelplace/src/components/Navbar/Navbar.js b/pixelplace/src/components/Navbar/Navbar.js
@@ -35,7 +35,7 @@ const Navbar = () => {
 
     return (
         <div className="bg-neu-white w-full shadow-md">
-            <ul className="flex justify-between items-center max-w-md px-2 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full py-1">
+            <ul className="flex justify-between items-center max-w-md px-2 md:px-0 sm:max-w-lg md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl mx-auto w-full py-2">
                 <li>
                     <Link
                         className="text-2xl font-logo tracking-wider text-[#2e2e2e] hover:text-black duration-200"
@@ -116,7 +116,7 @@ const Navbar = () => {
                             </li>
                             <li>
                                 <Link
-                                    className="bg-neu-black text-neu-white hover:bg-black duration-150 px-4 py-3 rounded-3xl"
+                                    className="bg-neu-black text-neu-white hover:bg-black duration-150 px-4 py-2 rounded-3xl"
                                     to="/register"
                                 >
                                     Sign Up

diff --git a/pixelplace/src/components/PostDetails/PostDetails.js b/pixelplace/src/components/PostDetails/PostDetails.js
@@ -35,9 +35,11 @@ const PostDetails = () => {
 
     useEffect(() => {
         onSnapshot(collection(db, "Posts", postId, "comments"), (snapshot) => {
-            const commentsArray = [];
-            snapshot.forEach((commentSnap) => commentsArray.push(commentSnap.data()));
-            setComments(commentsArray);
+            const commentSnap = snapshot.docs.map((comment) => ({
+                ...comment.data(),
+                commentId: comment.id,
+            }));
+            setComments(commentSnap);
         });
     }, [postId]);
 
@@ -60,7 +62,7 @@ const PostDetails = () => {
         addDoc(collection(db, "Posts", postId, `comments`), commentData)
             .then()
             .catch((err) => toastError(err));
-        setComment('');
+        setComment("");
     };
 
     if (isLoading) {
@@ -144,7 +146,7 @@ const PostDetails = () => {
                                     <p>No comments yet</p>
                                 ) : (
                                     comments.map((comment) => (
-                                        <Comment {...comment} key={uuidv4()} />
+                                        <Comment {...comment} key={uuidv4()} postId={postId} />
                                     ))
                                 )}
                             </div>