Post page UI

src/components/Post/CommentDialogBox.jsx

@@ -11,25 +11,22 @@ import {
 import React, { useEffect, useState } from "react";
 import { auth, db } from "../../lib/firebase";
 import { doc, getDoc } from "firebase/firestore";
+import { deleteComment } from "../../js/postFn";
 
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import DeleteTwoToneIcon from "@mui/icons-material/DeleteTwoTone";
 import { Link } from "react-router-dom";
 import ReadMore from "../ReadMore";
 
 const CommentDialogBox = ({
+  postId,
   comments,
-  setOpenToDeleteComment,
-  openToDeleteComment,
-  setDeleteCommentID,
   user,
   fullScreen,
-  handleCloseForDeleteComment,
-  deleteComment,
-  deleteCommentID,
 }) => {
   const { isAnonymous } = user;
   const [username, setUsername] = useState("");
+  const [openToDeleteComment, setOpenToDeleteComment] = useState(false);
 
   useEffect(() => {
     async function getUsername() {
@@ -96,7 +93,6 @@ const CommentDialogBox = ({
                 <div
                   onClick={() => {
                     setOpenToDeleteComment(!openToDeleteComment);
-                    setDeleteCommentID(userComment);
                   }}
                 >
                   {user && userComment?.content?.username == username && (
@@ -109,7 +105,7 @@ const CommentDialogBox = ({
                     <Dialog
                       fullScreen={fullScreen}
                       open={openToDeleteComment}
-                      onClose={handleCloseForDeleteComment}
+                      onClose={() => setOpenToDeleteComment(false)}
                       aria-labelledby="responsive-dialog-title"
                     >
                       <DialogTitle id="responsive-dialog-title">
@@ -121,12 +117,12 @@ const CommentDialogBox = ({
                         </DialogContentText>
                       </DialogContent>
                       <DialogActions>
-                        <Button onClick={handleCloseForDeleteComment}>
+                        <Button onClick={() => setOpenToDeleteComment(false)}>
                           Cancel
                         </Button>
                         <Button
                           onClick={(event) =>
-                            deleteComment(event, deleteCommentID)
+                            deleteComment(event, postId, userComment.id)
                           }
                         >
                           Delete

src/components/Post/index.jsx

@@ -40,8 +40,6 @@ function Post(prop) {
   const [showCommentEmojis, setShowCommentEmojis] = useState(false);
   const [isCommentOpen, setisCommentOpen] = useState(false);
   const [isLikesOpen, setIsLikesOpen] = useState(false);
-  const [deleteCommentID, setDeleteCommentID] = useState("");
-  const [openToDeleteComment, setOpenToDeleteComment] = useState(false);
   const [username, setUsername] = useState("");
 
   const theme = useTheme();
@@ -118,16 +116,6 @@ function Post(prop) {
     }
   };
 
-  const deleteComment = async (event, commentRef) => {
-    event.preventDefault();
-    await db
-      .collection("posts")
-      .doc(postId)
-      .collection("comments")
-      .doc(commentRef.id)
-      .delete();
-  };
-
   const onEmojiClick = (emojiObject, event) => {
     setComment((prevInput) => prevInput + emojiObject.emoji);
     setShowEmojis(false);
@@ -191,9 +179,6 @@ function Post(prop) {
     setisCommentOpen(false);
   };
 
-  const handleCloseForDeleteComment = () => {
-    setOpenToDeleteComment(false);
-  };
 
   return (
     <div className={`${rowMode ? "post" : "postColumn"}`}>
@@ -288,19 +273,10 @@ function Post(prop) {
               <hr />
               <ErrorBoundary>
                 <CommentDialogBox
-                  Item={Item}
-                  postHasImages={postHasImages}
-                  postImages={postImages}
-                  caption={caption}
+                  postId={postId}
                   comments={comments}
-                  setOpenToDeleteComment={setOpenToDeleteComment}
-                  openToDeleteComment={openToDeleteComment}
-                  setDeleteCommentID={setDeleteCommentID}
                   user={user}
                   fullScreen={fullScreen}
-                  handleCloseForDeleteComment={handleCloseForDeleteComment}
-                  deleteComment={deleteComment}
-                  deleteCommentID={deleteCommentID}
                 />
               </ErrorBoundary>
               <ErrorBoundary>