change status checklist

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

@@ -1,20 +1,29 @@
 import { Edit } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
 import ProgressBar from "../../../../../components/ProgressBar";
 import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
+import { ErrorType } from "../../../../../helpers/types";
+import { useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
 import type { TaskChecklistItemType } from "../../../task/types/TaskTypes";
 import ChecklistItem from "./ChecklistItem";
 
 type Props = {
+  taskId: string;
   checkListItems?: TaskChecklistItemType[];
   checkListItemCount?: number;
   completedCheckListItemCount?: number;
 };
 
 const CheckLists = ({
+  taskId,
   checkListItems = [],
   checkListItemCount,
   completedCheckListItemCount,
 }: Props) => {
+  const { t } = useTranslation("global");
+  const updateCheckListItem = useUpdateCheckListItem();
+
   const items = checkListItems.map((item) => ({
     id: item.id,
     title: item.title,
@@ -25,12 +34,23 @@ const CheckLists = ({
   const doneCount = completedCheckListItemCount ?? items.filter((item) => item.checked).length;
   const progress = totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0;
 
+  const handleToggle = (id: string, checked: boolean) => {
+    updateCheckListItem.mutate(
+      { id, params: { isDone: !checked }, taskId },
+      {
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
+
   if (checkListItems.length === 0) return null;
 
   return (
     <div className="mt-6">
       <div className="flex gap-2 items-center">
-        <div className="text-sm font-bold mt-px">چک لیست</div>
+        <div className="text-sm font-bold mt-px">{t("taskmanager.task_detail.checklist")}</div>
         <Edit size={20} color="#0047FF" />
         <TrashWithConfrim onDelete={() => {}} color="#FF0000" />
       </div>
@@ -46,7 +66,7 @@ const CheckLists = ({
             key={item.id}
             title={item.title}
             checked={item.checked}
-            onToggle={() => {}}
+            onToggle={() => handleToggle(item.id, item.checked)}
             onEdit={() => {}}
             onDelete={() => {}}
           />