delete a check list item

src/pages/taskmanager/components/task-detail/checklist/List.tsx

@@ -1,10 +1,11 @@
 import { Edit } from "iconsax-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import ModalConfrim from "../../../../../components/ModalConfrim";
 import { toast } from '../../../../../components/Toast';
 import ProgressBar from "../../../../../components/ProgressBar";
-import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
 import { ErrorType } from "../../../../../helpers/types";
-import { useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
+import { useDeleteCheckListItem, useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
 import type { TaskChecklistItemType } from "../../../task/types/TaskTypes";
 import ChecklistItem from "./ChecklistItem";
 
@@ -23,6 +24,8 @@ const CheckLists = ({
 }: Props) => {
   const { t } = useTranslation("global");
   const updateCheckListItem = useUpdateCheckListItem();
+  const deleteCheckListItem = useDeleteCheckListItem();
+  const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
 
   const items = checkListItems.map((item) => ({
     id: item.id,
@@ -45,6 +48,22 @@ const CheckLists = ({
     );
   };
 
+  const handleDelete = () => {
+    if (!deleteItemId) return;
+
+    deleteCheckListItem.mutate(
+      { id: deleteItemId, taskId },
+      {
+        onSuccess: () => {
+          setDeleteItemId(null);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], 'error');
+        },
+      },
+    );
+  };
+
   if (checkListItems.length === 0) return null;
 
   return (
@@ -52,7 +71,6 @@ const CheckLists = ({
       <div className="flex gap-2 items-center">
         <div className="text-sm font-bold mt-px">{t("taskmanager.task_detail.checklist")}</div>
         <Edit size={20} color="#0047FF" />
-        <TrashWithConfrim onDelete={() => {}} color="#FF0000" />
       </div>
 
       <div className="mt-4 flex gap-2 items-center">
@@ -68,10 +86,17 @@ const CheckLists = ({
             checked={item.checked}
             onToggle={() => handleToggle(item.id, item.checked)}
             onEdit={() => {}}
-            onDelete={() => {}}
+            onDelete={() => setDeleteItemId(item.id)}
           />
         ))}
       </div>
+
+      <ModalConfrim
+        isOpen={deleteItemId !== null}
+        close={() => setDeleteItemId(null)}
+        onConfrim={handleDelete}
+        isLoading={deleteCheckListItem.isPending}
+      />
     </div>
   );
 };

src/pages/taskmanager/task/hooks/useTaskData.ts

@@ -142,6 +142,18 @@ export const useUpdateCheckListItem = () => {
   });
 };
 
+export const useDeleteCheckListItem = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteCheckListItem(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};
+
 export const useCreateTaskAttachment = () => {
   const queryClient = useQueryClient();
 

src/pages/taskmanager/task/service/TaskService.ts

@@ -76,6 +76,11 @@ export const updateCheckListItem = async (
   return data;
 };
 
+export const deleteCheckListItem = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/check-list-items/${id}`);
+  return data;
+};
+
 export const createTaskAttachment = async (params: CreateTaskAttachmentType) => {
   const { data } = await axios.post(`/task-manager/attachments`, params);
   return data;