marco.pms.web/src/components/Activities/ReportTaskComments.jsx

import React, { useEffect, useState, useRef } from "react";
import moment from "moment";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { TasksRepository } from "../../repositories/TaskRepository";
import showToast from "../../services/toastService";
import Avatar from "../common/Avatar";
import { getBgClassFromHash } from "../../utils/projectStatus";
import { cacheData, getCachedData } from "../../slices/apiDataManager";

const schema = z.object({
  comment: z.string().min(1, "Comment cannot be empty"),
});

/**
 * ReportTaskComments component for displaying and adding comments to a task.
 * It also shows a summary of the activity and task details.
 *
 * @param {object} props - The component props.
 * @param {object} props.commentsData - Data related to the task and its comments, including the description.
 * @param {function} props.closeModal - Callback function to close the modal.
 */

const ReportTaskComments = ({ commentsData, closeModal }) => {
  const [loading, setloading] = useState(false);
  const [comments, setComment] = useState([]);
  const [bgClass, setBgClass] = useState("");
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: zodResolver(schema),
  });

  const containerRef = useRef(null);
  const firstRender = useRef(true);


  useEffect(() => {
    setComment(commentsData?.comments);
  }, [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
    }
  }, [comments]);  // Run this when comments array is updated

  const onSubmit = async (data) => {
    let sendComment = {
      ...data,
      taskAllocationId: commentsData?.id,
      commentDate: new Date().toISOString(),
    };
    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();
      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"
      role="document"
    >
      <div className="modal-content">
        <div className="modal-body p-sm-4 p-0">
          <button
            type="button"
            className="btn-close"
            onClick={closeModal}
            aria-label="Close"
          ></button>
          <h5 className=" text-center mb-2">
            Activity Summary
          </h5>

         
          <p className="small-text text-start my-2">
            {commentsData?.workItem?.workArea?.floor?.building?.description}
          </p>

          <p className="fw-bold my-2 text-start">
            Assigned By :
            <span className=" ms-2">
              {commentsData?.assignedBy.firstName +
                " " +
                commentsData?.assignedBy.lastName}
            </span>{" "}
          </p>

          <p className="fw-bold my-2 text-start">
            Loaction :
            <span className="fw-normal ms-2 text-start">
              {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
              <i className="bx bx-chevron-right"></i>{" "}
              {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
              <i className="bx bx-chevron-right"></i>
              {`${commentsData?.workItem?.workArea?.areaName}`}
              <i className="bx bx-chevron-right"></i>
              {` ${commentsData?.workItem?.activityMaster?.activityName}`}
            </span>
          </p>
          <p className="fw-bold my-2 text-start">
            Planned Work: {commentsData?.plannedTask}
          </p>
          <p className="fw-bold my-2 text-start">
            {" "}
            Completed Work : {commentsData?.completedTask}
          </p>
          <div className="d-flex align-items-center flex-wrap">
            <p className="fw-bold text-start m-0 me-1">Team :</p>
            <div className="d-flex flex-wrap align-items-center gap-2">
              {commentsData?.teamMembers?.map((member, idx) => (
                <span key={idx} className="d-flex align-items-center">
                  <Avatar
                    firstName={member?.firstName}
                    lastName={member?.lastName}
                    size="xs"
                  />
                  {member?.firstName + " " + member?.lastName}
                </span>
              ))}
            </div>
          </div>

          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
            <label className="fw-bold text-start my-1">Add comment :</label>
            <textarea
              {...register("comment")}
              className="form-control"
              id="exampleFormControlTextarea1"
              // rows="2"
              placeholder="Enter comment"
            />
            {errors.comment && (
              <div className="danger-text">{errors.comment.message}</div>
            )}
            <div className="text-end my-1">
              <button
                type="button"
                className="btn btn-sm btn-secondary"
                onClick={closeModal}
                data-bs-dismiss="modal"
              >
                Close
              </button>
              <button type="submit" className="btn btn-sm btn-primary ms-2">
                {loading ? "Sending..." : "Comment"}
              </button>
            </div>
          </form>

          <ul
            className="list-group px-0 mx-0 overflow-auto border-0"
          // ref={containerRef}  // auto scroll according data
          // style={{ maxHeight: "200px" }}
          >
            {comments &&
              comments
                ?.slice()
                .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`}
                      >
                        <div className="avatar avatar-xs me-1">
                          <span
                            className={`avatar-initial rounded-circle bg-label-primary`}
                          >
                            {`${data?.employee?.firstName?.slice(0, 1)} ${data?.employee?.lastName?.slice(0, 1)}`}
                          </span>
                        </div>

                        <div className={`text-start py-0 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()}
                          </p>
                        </div>
                      </div>
                      <p className={`ms-6 text-start mb-0 text-body`}>{data?.comment}</p>
                    </li>
                  );
                })}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default ReportTaskComments;