refactor(CommentBox): Improvements in handling comment submission

c2siorg · Jun 15, 2024 · 0336425 · 0336425
1 parent 50ecf92
commit 0336425
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 40 deletions.
diff --git a/src/components/TutorialPage/components/Commnets/CommentBox.jsx b/src/components/TutorialPage/components/Commnets/CommentBox.jsx
@@ -3,9 +3,7 @@ import { makeStyles } from "@mui/styles";
 import React, { useEffect, useState } from "react";
 import Textbox from "./Textbox";
 import Comment from "./Comment";
-import { addComment } from "../../../../store/actions/tutorialPageActions";
-import { useDispatch, useSelector } from "react-redux";
-import { useFirebase, useFirestore } from "react-redux-firebase";
+
 const useStyles = makeStyles(() => ({
   container: {
     margin: "10px 0",
@@ -28,23 +26,10 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-const CommentBox = ({ commentsArray, tutorialId }) => {
+const CommentBox = ({ commentsArray, onAddComment }) => {
   const classes = useStyles();
-  const firestore = useFirestore();
-  const firebase = useFirebase();
-  const dispatch = useDispatch();
-  const [comments, setComments] = useState([]);
+  const [comments, setComments] = useState(commentsArray);
   const [currCommentCount, setCurrCommentCount] = useState(3);
-  const handleSubmit = comment => {
-    const commentData = {
-      content: comment,
-      replyTo: tutorialId,
-      tutorial_id: tutorialId,
-      createdAt: firestore.FieldValue.serverTimestamp(),
-      userId: "codelabzuser"
-    };
-    addComment(commentData)(firebase, firestore, dispatch);
-  };
 
   useEffect(() => {
     setComments(commentsArray?.slice(0, currCommentCount));
@@ -65,17 +50,17 @@ const CommentBox = ({ commentsArray, tutorialId }) => {
       <Typography variant="h5" sx={{ fontWeight: "600" }}>
         Comments({commentsArray?.length || 0})
       </Typography>
-      <Textbox handleSubmit={handleSubmit} />
+      <Textbox handleSubmit={onAddComment} />
       <Grid container rowSpacing={2}>
         {comments?.map((id, index) => {
           return (
-            <Grid item xs={12}>
-              <Comment id={id} key={index} />
+            <Grid item xs={12} key={index}>
+              <Comment id={id} />
             </Grid>
           );
         })}
         <Grid item container justifyContent="center">
-          {comments?.length != commentsArray?.length && (
+          {comments?.length < commentsArray?.length && (
             <Button
               sx={{ textTransform: "none", fontSize: "14px" }}
               onClick={increaseCommentCount}

diff --git a/src/components/TutorialPage/index.jsx b/src/components/TutorialPage/index.jsx
@@ -11,7 +11,8 @@ import StepsBar from "./StepBar";
 import useWindowSize from "../../helpers/customHooks/useWindowSize";
 import {
   getTutorialData,
-  getTutorialSteps
+  getTutorialSteps,
+  addComment
 } from "../../store/actions/tutorialPageActions";
 import { getUserProfileData } from "../../store/actions";
 import { useDispatch, useSelector } from "react-redux";
@@ -24,6 +25,7 @@ function TutorialPage({ background = "white", textColor = "black" }) {
   const history = useHistory();
   const windowSize = useWindowSize();
   const [openMenu, setOpen] = useState(false);
+  const [commentsArray, setCommentsArray] = useState([]);
   const toggleSlider = () => {
     setOpen(!openMenu);
   };
@@ -42,6 +44,11 @@ function TutorialPage({ background = "white", textColor = "black" }) {
       }
     }) => data
   );
+
+  useEffect(() => {
+    setCommentsArray(tutorial?.comments);
+  }, [tutorial?.comments]);
+
   const loading = useSelector(
     ({
       tutorialPage: {
@@ -72,6 +79,27 @@ function TutorialPage({ background = "white", textColor = "black" }) {
     history.push("/not-found");
   }
 
+  const handleAddComment = async comment => {
+    const commentData = {
+      content: comment,
+      replyTo: id,
+      tutorial_id: id,
+      createdAt: firestore.FieldValue.serverTimestamp(),
+      userId: "codelabzuser"
+    };
+    const commentId = await addComment(commentData)(
+      firebase,
+      firestore,
+      dispatch
+    );
+
+    if (!commentsArray || commentsArray?.length === 0) {
+      setCommentsArray([commentId]);
+    } else {
+      setCommentsArray(prevComments => [commentId, ...prevComments]);
+    }
+  };
+
   return (
     <Box
       className={classes.wrapper}
@@ -112,7 +140,10 @@ function TutorialPage({ background = "white", textColor = "black" }) {
         >
           <PostDetails details={postDetails} />
           <Tutorial steps={steps} />
-          <CommentBox commentsArray={tutorial?.comments} tutorialId={id} />
+          <CommentBox
+            commentsArray={commentsArray}
+            onAddComment={handleAddComment}
+          />
         </Grid>
 
         <Grid

diff --git a/src/store/actions/tutorialPageActions.js b/src/store/actions/tutorialPageActions.js
@@ -120,6 +120,9 @@ export const getTutorialData =
         .doc(tutorialID)
         .get();
       const tutorial = data.data();
+      if (tutorial.comments && Array.isArray(tutorial.comments)) {
+        tutorial.comments.reverse();
+      }
       dispatch({ type: actions.GET_POST_DATA_SUCCESS, payload: tutorial });
     } catch (e) {
       dispatch({ type: actions.GET_POST_DATA_FAIL });
@@ -195,25 +198,28 @@ export const getCommentReply =
 export const addComment = comment => async (firebase, firestore, dispatch) => {
   try {
     dispatch({ type: actions.ADD_COMMENT_START });
+
+    const docref = await firestore
+      .collection("cl_comments")
+      .add(comment);
+
     await firestore
       .collection("cl_comments")
-      .add(comment)
-      .then(docref => {
-        firestore.collection("cl_comments").doc(docref.id).update({
-          comment_id: docref.id
-        });
-        if (comment.replyTo == comment.tutorial_id) {
-          firestore
-            .collection("tutorials")
-            .doc(comment.tutorial_id)
-            .update({
-              comments: firebase.firestore.FieldValue.arrayUnion(docref.id)
-            });
-        }
-      })
-      .then(() => {
-        dispatch({ type: actions.ADD_COMMENT_SUCCESS });
+      .doc(docref.id)
+      .update({
+        comment_id: docref.id
       });
+
+    if (comment.replyTo === comment.tutorial_id) {
+      await firestore
+        .collection("tutorials")
+        .doc(comment.tutorial_id)
+        .update({
+          comments: firebase.firestore.FieldValue.arrayUnion(docref.id)
+        });
+    }
+
+    dispatch({ type: actions.ADD_COMMENT_SUCCESS });
   } catch (e) {
     dispatch({ type: actions.ADD_COMMENT_FAILED, payload: e.message });
   }