Fix Comment Display Issue and Improve Comment Submission Handling

src/components/TutorialPage/components/Commnets/Comment.jsx

@@ -60,7 +60,7 @@ const Comment = ({ id }) => {
   const firestore = useFirestore();
   const firebase = useFirebase();
   const dispatch = useDispatch();
-  useState(() => {
+  useEffect(() => {
     getCommentData(id)(firebase, firestore, dispatch);
   }, [id]);
 
@@ -165,7 +165,7 @@ const Comment = ({ id }) => {
           <div style={{ margin: "10px 0 0 10px" }}>
             <Textbox type="reply" handleSubmit={handleSubmit} />
             {replies?.replies.map((id, index) => {
-              return <Comment id={id} />;
+              return <Comment key={index} id={id} />;
             })}
           </div>
         )}

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}

src/components/TutorialPage/components/Commnets/Textbox.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import {
   Box,
   TextField,
@@ -40,6 +40,13 @@ const Textbox = ({ type, handleSubmit }) => {
         fullWidth
         value={commentText}
         onChange={e => setCommentText(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleSubmit(commentText);
+            setCommentText("");
+          }
+        }}
         InputProps={{
           endAdornment: (
             <InputAdornment position="end" sx={{ position: "relative" }}>
@@ -70,7 +77,10 @@ const Textbox = ({ type, handleSubmit }) => {
       <Button
         variant="contained"
         disableElevation
-        onClick={() => handleSubmit(commentText)}
+        onClick={() => {
+          handleSubmit(commentText);
+          setCommentText("");
+        }}
       >
         <Send />
       </Button>

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

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 });
   }