Merge pull request #28 from songye38/feature/comment

songye38 · Dec 21, 2023 · 91dbc1b · 91dbc1b
2 parents e1d5def + fd05831
commit 91dbc1b
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/fastcampus-blog-app/src/components/Comments.tsx b/fastcampus-blog-app/src/components/Comments.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from "react"
-import { PostProps } from "./PostList";
-import { arrayUnion, doc, updateDoc } from "firebase/firestore";
+import { CommentsInterface, PostProps } from "./PostList";
+import { arrayRemove, arrayUnion, doc, updateDoc } from "firebase/firestore";
 import { db } from "firebaseApp";
 import AuthContext from "context/AuthContext";
 import { toast } from "react-toastify";
@@ -22,7 +22,7 @@ export default function Comments({post,getPost}:CommentProps){
     if (name==='comment'){
         setComment(value);
     }
-    }
+    };
     const onSubmit = async (e:React.FormEvent<HTMLFormElement>)=>{
         e.preventDefault();
 
@@ -59,6 +59,18 @@ export default function Comments({post,getPost}:CommentProps){
 
         }
     };
+
+    const handleDeleteComment = async (data : CommentsInterface)=>{
+        const confirm = window.confirm('Are you sure you want to delete this comment');
+        if(confirm && post.id) {
+            const postRef = doc(db,'posts',post?.id);
+            await updateDoc(postRef,{
+                comments : arrayRemove(data),
+            });
+            toast.success('삭제되었습니다.');
+            await getPost(post.id);
+        }
+    };
     return (
         <div className="comments">
         <form className="comments__form" onSubmit = {onSubmit}>
@@ -76,7 +88,14 @@ export default function Comments({post,getPost}:CommentProps){
                     <div className="comment__profile-box">
                         <div className="comment__email">{comment?.email}</div>
                         <div className="comment__date">{comment?.createdAt}</div>
-                        <div className="comment__delete">삭제</div>
+                        {comment.uid === user?.uid && (
+                            <div
+                                className="comment__delete"
+                                onClick={() => handleDeleteComment(comment)}
+                            >
+                                삭제
+                            </div>
+                            )}
                     </div>
                     <div className="comment__text">{comment?.content}</div>
                 </div>