Remark

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

@@ -1,4 +1,6 @@
 import { type FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
 import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover";
 import { DEFAULT_DATE_RANGE } from "./date/constants";
 import TaskDetailDatePopover from "./date/TaskDetailDatePopover";
@@ -9,7 +11,6 @@ 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 { DEFAULT_LABELS } from "./labels/constants";
 import TaskDetailLabelsPopover from "./labels/TaskDetailLabelsPopover";
 import type { LabelsView, TaskLabel } from "./labels/types";
 import TaskDetailActionBar from "./TaskDetailActionBar";
@@ -18,11 +19,14 @@ import type { TaskDetailTab } from "./types";
 import { DEFAULT_USERS } from "./users/constants";
 import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
 import type { TaskDetailType } from "../../task/types/TaskTypes";
+import { useCreateTaskRemark } from "../../task/hooks/useTaskData";
+import { ErrorType } from "../../../../helpers/types";
 
 type Props = {
   activeTab: TaskDetailTab | null;
   onTabChange: (tab: TaskDetailTab) => void;
   taskDetail?: TaskDetailType;
+  taskId: string;
 };
 
 const parseDate = (value?: string): DateObject | null => {
@@ -31,10 +35,12 @@ const parseDate = (value?: string): DateObject | null => {
   return date.isValid ? date : null;
 };
 
-const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail }) => {
+const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, taskId }) => {
+  const { t } = useTranslation("global");
+  const createTaskRemark = useCreateTaskRemark();
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
-  const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
-  const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
+  const [labels, setLabels] = useState<TaskLabel[]>([]);
+  const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set());
   const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set(["1"]));
   const [checklists, setChecklists] = useState<TaskChecklist[]>(DEFAULT_CHECKLISTS);
   const [startDate, setStartDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.startDate);
@@ -43,9 +49,14 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail }) =>
   useEffect(() => {
     if (!taskDetail) return;
 
-    if (taskDetail.labels?.length) {
-      setLabels(taskDetail.labels);
-      setSelectedLabelIds(new Set(taskDetail.labels.map((label) => label.id)));
+    const taskLabels = taskDetail.labels ?? taskDetail.remarks ?? [];
+
+    if (taskLabels.length) {
+      setLabels(taskLabels);
+      setSelectedLabelIds(new Set(taskLabels.map((label) => label.id)));
+    } else {
+      setLabels([]);
+      setSelectedLabelIds(new Set());
     }
 
     if (taskDetail.users?.length) {
@@ -108,14 +119,34 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail }) =>
   };
 
   const handleCreate = (title: string, color: string) => {
-    const newLabel: TaskLabel = {
-      id: crypto.randomUUID(),
-      title,
-      color,
-    };
-    setLabels((prev) => [...prev, newLabel]);
-    setSelectedLabelIds((prev) => new Set([...prev, newLabel.id]));
-    setLabelsView("list");
+    const effectiveTaskId = taskId || taskDetail?.id;
+    if (!effectiveTaskId) return;
+
+    createTaskRemark.mutate(
+      { title, color, taskId: effectiveTaskId },
+      {
+        onSuccess: (response) => {
+          const remark =
+            response.data?.remark ??
+            (response as { remark?: TaskLabel }).remark ??
+            (response.data as TaskLabel | undefined);
+          if (remark?.id) {
+            const newLabel: TaskLabel = {
+              id: remark.id,
+              title: remark.title,
+              color: remark.color,
+            };
+            setLabels((prev) => [...prev, newLabel]);
+            setSelectedLabelIds((prev) => new Set([...prev, newLabel.id]));
+          }
+          setLabelsView("list");
+          toast.success(t("success"));
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
   };
 
   const handleChecklistClose = () => {
@@ -163,6 +194,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail }) =>
               onViewChange={setLabelsView}
               onToggle={handleLabelToggle}
               onCreate={handleCreate}
+              isSubmitting={createTaskRemark.isPending}
             />
           ) : null
         }