feat: add delete post and show delete option only to author

SarthakMittal777 · Apr 13, 2024 · b69091f · b69091f
1 parent 5d00df4
commit b69091f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 39 deletions.
diff --git a/src/components/Posts.jsx b/src/components/Posts.jsx
@@ -7,6 +7,7 @@ import {
   getDocs,
   doc,
   updateDoc,
+  deleteDoc,
   query,
   where,
   orderBy,
@@ -16,6 +17,7 @@ import { useAuthState } from "react-firebase-hooks/auth";
 import { CgProfile } from "react-icons/cg";
 import Modal from "./Modal";
 import { BiSolidUpvote, BiSolidDownvote } from "react-icons/bi";
+import { MdDelete } from "react-icons/md";
 import { FaReply } from "react-icons/fa";
 import { categoryData } from "../data";
 
@@ -349,23 +351,35 @@ const Posts = (props) => {
             key={post.id}
             className="border-blue-100 border p-4 m-2 flex flex-col gap-2 rounded-md drop-shadow-md bg-white hover:shadow-xl transition duration-300 ease-in-out"
           >
-            <div className="flex flex-row gap-4 rounded-md items-center">
-              <CgProfile size={36} />
-              <div className="items-center">
-                <div className="flex gap-2 items-center">
-                  {post.author ?? "Anonymous"}
-                  <div className="h-1.5 w-1.5 bg-[#bbb] inline-block rounded-full"></div>
-                  {new Date(post?.timestamp)?.toDateString()}
-                </div>
-                <div className="text-xs">
-                  {/* {console.log(post.category)} */}
-                  {post?.category
-                    ? post.category.map((val, key) => {
-                        return <span key={key}>{val} &nbsp; </span>;
-                      })
-                    : "uncategorized"}
+            <div className="flex flex-row justify-between">
+              <div className="flex flex-row gap-4 rounded-md items-center">
+                <CgProfile size={36} />
+                <div className="items-center">
+                  <div className="flex gap-2 items-center">
+                    {post.author ?? "Anonymous"}
+                    <div className="h-1.5 w-1.5 bg-[#bbb] inline-block rounded-full"></div>
+                    {new Date(post?.timestamp)?.toDateString()}
+                  </div>
+                  <div className="text-xs">
+                    {/* {console.log(post.category)} */}
+                    {post?.category
+                      ? post.category.map((val, key) => {
+                          return <span key={key}>{val} &nbsp; </span>;
+                        })
+                      : "uncategorized"}
+                  </div>
                 </div>
               </div>
+              <button
+                className={post.uid === user.uid ? "" : "hidden"}
+                onClick={async () => {
+                  const docRef = doc(db, "posts", post.id);
+                  await deleteDoc(docRef);
+                  fetchData();
+                }}
+              >
+                <MdDelete size={18} />
+              </button>
             </div>
 
             <Link to={`/post/${post.id}`} className="">

diff --git a/src/pages/Post.jsx b/src/pages/Post.jsx
@@ -87,17 +87,6 @@ const Post = () => {
           "metadata.upvotes": upvoteList,
         });
       }
-
-      // const updatedPost = {
-      //   ...postDetail,
-      //   upvotes: upvoteList,
-      // };
-
-      // setPostDetail(updatedPost);
-
-      // await updateDoc(docRef, {
-      //   "metadata.upvotes": upvoteList,
-      // });
     }
   };
 
@@ -164,19 +153,6 @@ const Post = () => {
           "metadata.downvotes": downvoteList,
         });
       }
-
-      // downvoteList.push(user.uid);
-
-      // const updatedPost = {
-      //   ...postDetail,
-      //   downvotes: downvoteList,
-      // };
-
-      // setPostDetail(updatedPost);
-
-      // await updateDoc(docRef, {
-      //   "metadata.downvotes": downvoteList,
-      // });
     }
   };