delete task and update task

src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

@@ -1,5 +1,11 @@
-import { type FC, useEffect, useState } from "react";
+import { type FC, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
 import DefaulModal from "../../../../components/DefaulModal";
+import PageLoading from "../../../../components/PageLoading";
+import { ErrorType } from "../../../../helpers/types";
+import { useDeleteTask, useGetTaskDetail, useUpdateTask } from "../../task/hooks/useTaskData";
+import type { TaskDetailType } from "../../task/types/TaskTypes";
 import type { Task } from "../../types";
 import AttachmentList from "./attachment/List";
 import CheckLists from "./checklist/List";
@@ -16,37 +22,126 @@ type Props = {
 };
 
 const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
+  const { t } = useTranslation("global");
   const [activeTab, setActiveTab] = useState<TaskDetailTab | null>(null);
+  const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
+  const initialTitleRef = useRef("");
+  const initialDescriptionRef = useRef("");
+
+  const getTaskDetail = useGetTaskDetail(task?.id ?? "", open && !!task?.id);
+  const updateTask = useUpdateTask();
+  const deleteTask = useDeleteTask();
+
+  const taskDetail: TaskDetailType | undefined =
+    getTaskDetail.data?.data?.task ?? getTaskDetail.data?.data;
 
   useEffect(() => {
     if (!open) {
       setActiveTab(null);
+      setTitle("");
       setDescription("");
+      initialTitleRef.current = "";
+      initialDescriptionRef.current = "";
     }
   }, [open]);
 
+  useEffect(() => {
+    if (!taskDetail) return;
+
+    setTitle(taskDetail.title);
+    setDescription(taskDetail.description ?? "");
+    initialTitleRef.current = taskDetail.title;
+    initialDescriptionRef.current = taskDetail.description ?? "";
+  }, [taskDetail]);
+
   const handleTabChange = (tab: TaskDetailTab) => {
     setActiveTab((prev) => (prev === tab ? null : tab));
   };
 
+  const handleDelete = () => {
+    if (!task?.id) return;
+
+    deleteTask.mutate(
+      { id: task.id, projectId: taskDetail?.projectId ?? "" },
+      {
+        onSuccess: () => {
+          toast.success(t("taskmanager.task_deleted"));
+          onClose();
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
+
+  const saveField = (field: "title" | "description", value: string) => {
+    if (!task?.id) return;
+
+    const initialValue = field === "title" ? initialTitleRef.current : initialDescriptionRef.current;
+    if (value === initialValue) return;
+
+    updateTask.mutate(
+      { id: task.id, params: { [field]: value } },
+      {
+        onSuccess: () => {
+          if (field === "title") {
+            initialTitleRef.current = value;
+          } else {
+            initialDescriptionRef.current = value;
+          }
+          toast.success(t("success"));
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+          if (field === "title") {
+            setTitle(initialTitleRef.current);
+          } else {
+            setDescription(initialDescriptionRef.current);
+          }
+        },
+      },
+    );
+  };
+
   if (!task) return null;
 
   return (
     <DefaulModal open={open} close={onClose} width={680}>
-      <TaskDetailHeader statusLabel={statusLabel} onClose={onClose} />
+      {getTaskDetail.isPending ? (
+        <PageLoading />
+      ) : (
+        <>
+          <TaskDetailHeader
+            statusLabel={statusLabel}
+            onClose={onClose}
+            onDelete={handleDelete}
+            isDeleting={deleteTask.isPending}
+          />
 
-      <h2 className="mt-6 text-sm font-bold">{task.title}</h2>
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            onBlur={() => saveField("title", title)}
+            className="mt-6 w-full text-sm font-bold bg-transparent outline-none"
+          />
 
-      <div className="mt-4">
-        <TaskDetailToolbar activeTab={activeTab} onTabChange={handleTabChange} />
-      </div>
+          <div className="mt-4">
+            <TaskDetailToolbar activeTab={activeTab} onTabChange={handleTabChange} taskDetail={taskDetail} />
+          </div>
 
-      <TaskDetailDescription value={description} onChange={setDescription} />
+          <TaskDetailDescription
+            value={description}
+            onChange={setDescription}
+            onBlur={() => saveField("description", description)}
+          />
 
-      <AttachmentList />
+          <AttachmentList attachments={taskDetail?.attachments} />
 
-      <CheckLists />
+          <CheckLists checklists={taskDetail?.checklists} />
+        </>
+      )}
     </DefaulModal>
   );
 };