Comments popup submit button issue.

src/components/Activities/ReportTaskComments.jsx

@@ -25,12 +25,11 @@ const schema = z.object({
 const ReportTaskComments = ({ commentsData, closeModal }) => {
   const [loading, setloading] = useState(false);
   const [comments, setComment] = useState([]);
-  const [bgClass, setBgClass] = useState("");
   const {
     register,
     handleSubmit,
     formState: { errors },
-    reset,
+    reset, // Destructure reset from useForm
   } = useForm({
     resolver: zodResolver(schema),
   });
@@ -38,19 +37,28 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
   const containerRef = useRef(null);
   const firstRender = useRef(true);
 
-
   useEffect(() => {
-    setComment(commentsData?.comments);
+    const taskList = getCachedData("taskList");
+    if (taskList && taskList.data && commentsData?.id) {
+      const currentTask = taskList.data.find(task => task.id === commentsData.id);
+      if (currentTask && currentTask.comments) {
+        setComment(currentTask.comments);
+      } else {
+        setComment(commentsData?.comments || []);
+      }
+    } else {
+      setComment(commentsData?.comments || []);
+    }
+    firstRender.current = true;
   }, [commentsData]);
 
-  // Scroll logic: scroll to bottom when new comments are added
   useEffect(() => {
     if (!firstRender.current && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     } else {
-      firstRender.current = false;  // Mark the first render as complete
+      firstRender.current = false; 
     }
-  }, [comments]);  // Run this when comments array is updated
+  }, [comments]); 
 
   const onSubmit = async (data) => {
     let sendComment = {
@@ -61,34 +69,40 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
     try {
       setloading(true);
       const resp = await TasksRepository.taskComments(sendComment);
+    
       setComment((prevItems) => [...prevItems, resp.data]);
+
       const taskList = getCachedData("taskList");
-      const updatedTaskList = taskList.data.map((task) => {
-        if (task.id === resp.data.taskAllocationId) {
-          const existingComments = Array.isArray(task.comments)
-            ? task.comments
-            : [];
-          return {
-            ...task,
-            comments: [...existingComments, resp.data],
-          };
-        }
-        return task;
-      });
-      cacheData("taskList", {
-        data: updatedTaskList,
-        projectId: taskList.projectId,
-      });
-      reset();
+      
+      if (taskList && taskList.data) {
+        const updatedTaskList = taskList.data.map((task) => {
+          if (task.id === resp.data.taskAllocationId) {
+            const existingComments = Array.isArray(task.comments)
+              ? task.comments
+              : [];
+            return {
+              ...task,
+              comments: [...existingComments, resp.data],
+            };
+          }
+          return task;
+        });
+       
+        cacheData("taskList", {
+          data: updatedTaskList,
+          projectId: taskList.projectId, 
+        });
+      }
+
+      reset(); 
       setloading(false);
       showToast("Successfully Sent", "success");
-      // closeModal();
     } catch (error) {
       setloading(false);
       showToast(error.response.data?.message || "Something went wrong", "error");
     }
   };
-  console.log("Kartik", commentsData)
+
   return (
     <div
       className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
@@ -106,7 +120,6 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
             Activity Summary
           </h5>
 
-         
           <p className="small-text text-start my-2">
             {commentsData?.workItem?.workArea?.floor?.building?.description}
           </p>
@@ -114,9 +127,9 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
           <p className="fw-bold my-2 text-start">
             Assigned By :
             <span className=" ms-2">
-              {commentsData?.assignedBy.firstName +
+              {commentsData?.assignedBy?.firstName +
                 " " +
-                commentsData?.assignedBy.lastName}
+                commentsData?.assignedBy?.lastName}
             </span>{" "}
           </p>
 
@@ -161,7 +174,6 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
               {...register("comment")}
               className="form-control"
               id="exampleFormControlTextarea1"
-              // rows="2"
               placeholder="Enter comment"
             />
             {errors.comment && (
@@ -176,7 +188,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
               >
                 Close
               </button>
-              <button type="submit" className="btn btn-sm btn-primary ms-2">
+              <button type="submit" className="btn btn-sm btn-primary ms-2" disabled={loading}>
                 {loading ? "Sending..." : "Comment"}
               </button>
             </div>
@@ -184,23 +196,21 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
 
           <ul
             className="list-group px-0 mx-0 overflow-auto border-0"
-          // ref={containerRef}  // auto scroll according data
-          // style={{ maxHeight: "200px" }}
+            ref={containerRef} 
           >
             {comments &&
               comments
                 ?.slice()
-                .reverse()
+                .reverse() 
                 .map((data, idx) => {
                   const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
-                  const bgClass = getBgClassFromHash(fullName);
                   return (
                     <li
                       className={`list-group-item list-group-item-action border-none my-1 p-1`}
                       key={idx}
                     >
                       <div
-                        className={`li-wrapper d-flex justify-content-start align-items-start my-0`}
+                        className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
                       >
                         <div className="avatar avatar-xs me-1">
                           <span
@@ -210,7 +220,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
                           </span>
                         </div>
 
-                        <div className={`text-start py-0 d-flex align-items-center justify-content-start`}>
+                        <div className={`d-flex align-items-center justify-content-start`}>
                           <p className={`mb-0 text-muted me-2`}>{fullName}</p>
                           <p className={`text-secondary m-0`} style={{ fontSize: "10px" }}>
                             {moment.utc(data?.commentDate).local().fromNow()}