check list

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

@@ -9,9 +9,7 @@ import type DateObject from "react-date-object";
 import DateObjectClass from "react-date-object";
 import persian from "react-date-object/calendars/persian";
 import persian_fa from "react-date-object/locales/persian_fa";
-import { DEFAULT_CHECKLISTS } from "./checklist/constants";
 import TaskDetailChecklistPopover from "./checklist/TaskDetailChecklistPopover";
-import type { TaskChecklist } from "./checklist/types";
 import TaskDetailLabelsPopover from "./labels/TaskDetailLabelsPopover";
 import type { LabelsView, TaskLabel } from "./labels/types";
 import TaskDetailActionBar from "./TaskDetailActionBar";
@@ -19,7 +17,7 @@ import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
 import type { TaskDetailTab } from "./types";
 import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
 import type { TaskDetailType } from "../../task/types/TaskTypes";
-import { useCreateTaskRemark, useUpdateTask } from "../../task/hooks/useTaskData";
+import { useCreateCheckListItem, useCreateTaskRemark, useUpdateTask } from "../../task/hooks/useTaskData";
 import { ErrorType } from "../../../../helpers/types";
 
 type Props = {
@@ -38,13 +36,13 @@ const parseDate = (value?: string): DateObject | null => {
 const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, taskId }) => {
   const { t } = useTranslation("global");
   const createTaskRemark = useCreateTaskRemark();
+  const createCheckListItem = useCreateCheckListItem();
   const updateTask = useUpdateTask();
   const getUsers = useGetUsers("");
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
   const [labels, setLabels] = useState<TaskLabel[]>([]);
   const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set());
   const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set());
-  const [checklists, setChecklists] = useState<TaskChecklist[]>(DEFAULT_CHECKLISTS);
   const [startDate, setStartDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.startDate);
   const [endDate, setEndDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.endDate);
 
@@ -67,10 +65,6 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
       setSelectedUserIds(new Set());
     }
 
-    if (taskDetail.checklists?.length) {
-      setChecklists(taskDetail.checklists.map((checklist) => ({ id: checklist.id, title: checklist.title })));
-    }
-
     const parsedStartDate = parseDate(taskDetail.startDate);
     const parsedEndDate = parseDate(taskDetail.endDate);
     if (parsedStartDate) setStartDate(parsedStartDate);
@@ -188,13 +182,22 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
     if (isChecklistOpen) onTabChange("checklist");
   };
 
-  const handleChecklistCreate = (title: string, _copyFromId: string) => {
-    const newChecklist: TaskChecklist = {
-      id: crypto.randomUUID(),
-      title,
-    };
-    setChecklists((prev) => [...prev, newChecklist]);
-    handleChecklistClose();
+  const handleChecklistCreate = (title: string) => {
+    const effectiveTaskId = taskId || taskDetail?.id;
+    if (!effectiveTaskId) return;
+
+    createCheckListItem.mutate(
+      { title, isDone: false, taskId: effectiveTaskId },
+      {
+        onSuccess: () => {
+          handleChecklistClose();
+          toast.success(t("success"));
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
   };
 
   const handleAttachmentClose = () => {
@@ -247,9 +250,9 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
         checklistPopover={
           isChecklistOpen ? (
             <TaskDetailChecklistPopover
-              checklists={checklists}
               onClose={handleChecklistClose}
               onSubmit={handleChecklistCreate}
+              isSubmitting={createCheckListItem.isPending}
             />
           ) : null
         }