feat: get tasks from api in calendar

src/pages/profile_calendar.tsx

@@ -5,6 +5,7 @@ import Dialog from "@/components/ui/Dialog";
 import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
+import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
 import {
   BookOpenIcon,
@@ -15,16 +16,19 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
 import { Nullable } from "primereact/ts-helpers";
-import { useForm } from "react-hook-form";
+import { SubmitHandler, useForm } from "react-hook-form";
-import { ITask, ITaskForm } from "./profile_tasks.dto";
+import {
-
+  IApiResponse,
-const example_tags: { first: string[]; second: string[] } = {
+  ICreateTaskResponse,
-  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  IDeleteTaskResponse,
-  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+  IEditTaskResponse,
-};
+  ITask,
+  ITaskDetails,
+  ITaskForm,
+} from "./profile_tasks.dto";
 
 const calendarStyles = {
   root: "inline-flex w-full relative",
@@ -59,6 +63,9 @@ const ProfileCalendar: FunctionComponent = () => {
   const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
   const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({});
+  const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(true);
 
   const {
     handleSubmit,
@@ -73,21 +80,164 @@ const ProfileCalendar: FunctionComponent = () => {
   });
 
   useEffect(() => {
-    const storedTasks = localStorage.getItem("tasks");
+    fetchTasks();
-    if (storedTasks) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const parsedTasks: ITask[] = JSON.parse(storedTasks).map((task: any) => ({
-        ...task,
-        date: new Date(task.date),
-      }));
-      setTasks(parsedTasks);
-    }
   }, []);
-  const handleDeleteTask = () => {
+
+  const fetchTasks = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");
+
+      setSubjectChoices(response.subject_choices);
+      setTaskTypeChoices(response.task_type_choices);
+
+      const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
+        id: apiTask.id.toString(),
+        name: apiTask.title,
+        checked: apiTask.isCompleted,
+        date: new Date(apiTask.due_date),
+        description: apiTask.description,
+        tags: [apiTask.subject, apiTask.task_type],
+        new: false,
+      }));
+
+      setTasks(convertedTasks);
+    } catch (error) {
+      console.error("Failed to fetch tasks:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const example_tags = useMemo(
+    () => ({
+      first: Object.keys(subjectChoices),
+      second: Object.keys(taskTypeChoices),
+    }),
+    [subjectChoices, taskTypeChoices]
+  );
+
+  const saveTask: SubmitHandler<ITaskForm> = async (data) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
+      setError("tags", { message: "Выберите теги" });
+      return;
+    }
+
+    try {
+      const selectedSubject = editContent?.tags[0] || tags.first;
+      const selectedTaskType = editContent?.tags[1] || tags.second;
+
+      // Format date to DD-MM-YYYYTHH:MM
+      const formattedDate = calendarDate
+        .toLocaleString("en-GB", {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        })
+        .replace(",", "T")
+        .replace(/\//g, "-")
+        .replace("T ", "T");
+
+      const taskData = {
+        title: data.name,
+        description: data.description || "",
+        subject: selectedSubject,
+        taskType: selectedTaskType,
+        dateTime_due: formattedDate,
+        telegram_notifications: false,
+      };
+
+      if (!editContent) {
+        const response = await apiClient<ICreateTaskResponse>("/api/tasks/create_task/", {
+          method: "POST",
+          body: JSON.stringify(taskData),
+        });
+
+        if (!response.success) {
+          throw new Error(response.message);
+        }
+      } else {
+        const response = await apiClient<IEditTaskResponse>(`/api/tasks/edit_task/${editContent.id}/`, {
+          method: "PUT",
+          body: JSON.stringify(taskData),
+        });
+
+        if (!response.success) {
+          throw new Error(response.message);
+        }
+      }
+
+      await fetchTasks();
+      setIsOpen(false);
+      setTags({ first: "", second: "", overdue: false });
+    } catch (error) {
+      console.error("Failed to save task:", error);
+    }
+  };
+
+  const handleDeleteTask = async () => {
     if (!editContent) return;
-    setTasks(tasks.filter((task) => task.id !== editContent.id));
+
-    setIsOpen(false);
+    try {
-    setShowDeleteDialog(false);
+      const response = await apiClient<IDeleteTaskResponse>(`/api/tasks/delete_task/${editContent.id}/`, {
+        method: "DELETE",
+      });
+
+      if (!response.success) {
+        throw new Error(response.message);
+      }
+
+      await fetchTasks();
+      setIsOpen(false);
+      setShowDeleteDialog(false);
+    } catch (error) {
+      console.error("Failed to delete task:", error);
+    }
+  };
+
+  const handleTaskCheck = async (taskId: string) => {
+    try {
+      await apiClient(`/api/tasks/toggle_complete_task/${taskId}/`, {
+        method: "PATCH",
+      });
+
+      setTasks((prevTasks) =>
+        prevTasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task))
+      );
+    } catch (error) {
+      console.error("Failed to mark task:", error);
+    }
+  };
+
+  const handleViewTask = async (taskId: string) => {
+    try {
+      const taskDetails = await apiClient<ITaskDetails>(`/api/tasks/view_task/${taskId}/`);
+
+      const task: ITask = {
+        id: taskId,
+        name: taskDetails.title,
+        checked: false,
+        date: new Date(taskDetails.dateTime_due),
+        description: taskDetails.description,
+        tags: [taskDetails.subject, taskDetails.taskType],
+        new: false,
+      };
+
+      setIsOpen(true);
+      setIsEdit(true);
+      setEditContent(task);
+      setCalendarDate(task.date);
+      setIsEditModal(false);
+    } catch (error) {
+      console.error("Failed to fetch task details:", error);
+    }
   };
 
   useEffect(() => {
@@ -109,9 +259,6 @@ const ProfileCalendar: FunctionComponent = () => {
     if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
     else reset();
   }, [editContent]);
-  useEffect(() => {
-    localStorage.setItem("tasks", JSON.stringify(tasks));
-  }, [tasks]);
 
   useEffect(() => {
     if (!editContent) return;
@@ -175,12 +322,6 @@ const ProfileCalendar: FunctionComponent = () => {
     );
   };
 
-  const handleTaskCheck = (taskId: string) => {
-    const updatedTasks = tasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task));
-    setTasks(updatedTasks);
-    localStorage.setItem("tasks", JSON.stringify(updatedTasks));
-  };
-
   const formatDate = (date: Date) => {
     return new Intl.DateTimeFormat("ru-RU", {
       day: "numeric",
@@ -189,26 +330,6 @@ const ProfileCalendar: FunctionComponent = () => {
     }).format(date);
   };
 
-  const saveTask = (data: ITaskForm) => {
-    if (!calendarDate) {
-      setError("date", { message: "Выберите дату" });
-      return;
-    }
-    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
-      setError("tags", { message: "Выберите теги" });
-      return;
-    }
-    const eTask: ITask = {
-      ...data,
-      date: calendarDate,
-      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
-      new: true,
-    };
-    setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
-    localStorage.setItem("tasks", JSON.stringify(tasks.map((task) => (task.id === eTask.id ? eTask : task))));
-    setTags({ first: "", second: "", overdue: false });
-  };
-
   const pt = {
     root: { className: calendarStyles.root },
     input: { root: { className: calendarStyles.input } },
@@ -230,193 +351,206 @@ const ProfileCalendar: FunctionComponent = () => {
 
   return (
     <div class="flex w-full flex-col items-center">
-      <ModalTags
+      {isLoading ? (
-        isOpen={openModalTags}
+        <div class="flex w-full flex-1 items-center justify-center">
-        setIsOpen={setOpenModalTags}
+          <div class="text-2xl">Загрузка...</div>
-        tagsList={example_tags}
+        </div>
-        value={tags}
+      ) : (
-        onClose={() => {
+        <>
-          setTags({ first: "", second: "", overdue: false });
+          <ModalTags
-        }}
+            isOpen={openModalTags}
-        onChange={setTags}
+            setIsOpen={setOpenModalTags}
-      />
+            tagsList={example_tags}
-      <ModalCalendar
+            value={tags}
-        isOpen={openModalCalendar}
+            onClose={() => {
-        setIsOpen={setOpenModalCalendar}
+              setTags({ first: "", second: "", overdue: false });
-        onClose={() => {
+            }}
-          if (isEdit && !isEditModal) setCalendarDate(null);
+            onChange={setTags}
-        }}
+          />
-        onChange={(e) => isEditModal && setCalendarDate(e.value)}
+          <ModalCalendar
-        value={calendarDate!}
+            isOpen={openModalCalendar}
-      />
+            setIsOpen={setOpenModalCalendar}
-      <ModalWindow
+            onClose={() => {
-        isOpen={openModal}
+              if (isEdit && !isEditModal) setCalendarDate(null);
-        setIsOpen={setIsOpen}
+            }}
-        onClose={() => {
+            onChange={(e) => isEditModal && setCalendarDate(e.value)}
-          setIsEdit(false);
+            value={calendarDate!}
-          setEditContent(null);
+          />
-          setIsEditModal(false);
+          <ModalWindow
-          setTags({ first: "", second: "", overdue: false });
+            isOpen={openModal}
-          setCalendarDate(null);
+            setIsOpen={setIsOpen}
-        }}
+            onClose={() => {
-      >
+              setIsEdit(false);
-        {isEdit && editContent && (
+              setEditContent(null);
-          <form
+              setIsEditModal(false);
-            class="flex h-full w-full flex-col items-start justify-between"
+              setTags({ first: "", second: "", overdue: false });
-            onSubmit={(e) => {
+              setCalendarDate(null);
-              e.preventDefault();
-              if (isEditModal) handleSubmit(saveTask)();
-              else setIsEditModal(!isEditModal);
             }}
           >
-            <div class="flex w-full flex-row items-start justify-between">
+            {isEdit && editContent && (
-              <div class="flex flex-1 flex-col gap-1 pe-2">
+              <form
-                <input
+                class="flex h-full w-full flex-col items-start justify-between"
-                  class="w-full text-2xl outline-0"
+                onSubmit={(e) => {
-                  disabled={!isEditModal}
+                  e.preventDefault();
-                  placeholder="Название"
+                  if (isEditModal) handleSubmit(saveTask)();
-                  {...register("name", {
+                  else setIsEditModal(!isEditModal);
-                    required: "Заполните название",
-                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
-                  })}
-                />
-                <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
-                  disabled={!isEditModal}
-                  placeholder={isEditModal ? "Описание" : ""}
-                  {...register("description", {
-                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
-                  })}
-                />
-                <input
-                  type="datetime-local"
-                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
-                  hidden
-                  {...register("date")}
-                />
-                <input type="checkbox" hidden {...register("checked")} />
-              </div>
-              <div class="flex flex-row gap-4">
-                <div
-                  className="flex cursor-pointer flex-col items-center gap-3"
-                  onClick={() => {
-                    if (isEditModal) {
-                      handleSubmit(saveTask)();
-                      setIsEditModal(!isEditModal);
-                    } else setIsEditModal(!isEditModal);
-                  }}
-                >
-                  {isEditModal ? (
-                    <>
-                      <InboxArrowDownIcon class="size-6" />
-                      <p class="text-[0.7rem]">Сохранить</p>
-                    </>
-                  ) : (
-                    <>
-                      <PencilIcon class="size-6" />
-                      <p class="text-[0.7rem]">Редактировать</p>
-                    </>
-                  )}
-                </div>
-                <div
-                  className="flex cursor-pointer flex-col items-center gap-3"
-                  onClick={() => setShowDeleteDialog(true)}
-                >
-                  <TrashIcon class="size-6" />
-                  <p class="text-[0.7rem]">Удалить</p>
-                </div>
-              </div>
-            </div>
-            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
-            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
-            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
-            {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
-            <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
-              <div
-                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
-                  "cursor-pointer": isEditModal,
-                })}
-                onClick={() => {
-                  if (!isEditModal) return;
-                  setOpenModalCalendar(true);
-                  setCalendarDate(editContent.date);
                 }}
               >
-                <CalendarDaysIcon class="size-10" />
+                <div class="flex w-full flex-row items-start justify-between">
-                <p>
+                  <div class="flex flex-1 flex-col gap-1 pe-2">
-                  {Intl.DateTimeFormat("ru-RU", {
+                    <input
-                    day: "2-digit",
+                      class={cn("w-full p-2 text-2xl outline-0", {
-                    month: "2-digit",
+                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
-                    year: "numeric",
+                      })}
-                    hour: "2-digit",
+                      disabled={!isEditModal}
-                    minute: "2-digit",
+                      placeholder="Название"
-                  }).format(calendarDate!)}
+                      {...register("name", {
-                </p>
+                        required: "Заполните название",
-              </div>
+                        maxLength: { value: 20, message: "Максимум 20 символов в названии" },
-              <div
+                      })}
-                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
+                    />
-                  "cursor-pointer": isEditModal,
+                    <textarea
-                })}
+                      class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
-                onClick={() => {
+                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
-                  if (!isEditModal) return;
+                      })}
-                  setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
+                      disabled={!isEditModal}
-                  setOpenModalTags(true);
+                      placeholder={isEditModal ? "Описание" : ""}
-                }}
+                      {...register("description", {
-              >
+                        maxLength: { value: 200, message: "Максимум 200 символов в описании" },
-                <p class="flex flex-row gap-2">
+                      })}
-                  <BookOpenIcon class="size-5" />
+                    />
-                  {editContent.tags[0]}
+                    <input
-                </p>
+                      type="datetime-local"
-                <p class="flex flex-row gap-2">
+                      value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
-                  <DocumentDuplicateIcon class="size-5" />
+                      hidden
-                  {editContent.tags[1]}
+                      {...register("date")}
-                </p>
+                    />
-              </div>
+                    <input type="checkbox" hidden {...register("checked")} />
-            </div>
+                  </div>
-          </form>
+                  <div class="flex flex-row gap-4">
-        )}
+                    <div
-      </ModalWindow>
+                      className="flex cursor-pointer flex-col items-center gap-3"
-      <Dialog
+                      onClick={() => {
-        isOpen={showDeleteDialog}
+                        if (isEditModal) {
-        setIsOpen={setShowDeleteDialog}
+                          handleSubmit(saveTask)();
-        title="Удаление задачи"
+                          setIsEditModal(!isEditModal);
-        content="Вы уверены, что хотите удалить эту задачу?"
+                        } else setIsEditModal(!isEditModal);
-        onConfirm={handleDeleteTask}
+                      }}
-        confirmText="Удалить"
+                    >
-        cancelText="Отмена"
+                      {isEditModal ? (
-      />
+                        <>
-      <Calendar
+                          <InboxArrowDownIcon class="size-6" />
-        value={currentDate}
+                          <p class="text-[0.7rem]">Сохранить</p>
-        onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
+                        </>
-        inline
+                      ) : (
-        pt={pt}
+                        <>
-        dateTemplate={dateTemplate}
+                          <PencilIcon class="size-6" />
-        className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
+                          <p class="text-[0.7rem]">Редактировать</p>
-      />
+                        </>
+                      )}
+                    </div>
+                    <div
+                      className="flex cursor-pointer flex-col items-center gap-3"
+                      onClick={() => setShowDeleteDialog(true)}
+                    >
+                      <TrashIcon class="size-6" />
+                      <p class="text-[0.7rem]">Удалить</p>
+                    </div>
+                  </div>
+                </div>
+                {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+                {errors.description && <p class="text-red-500">{errors.description.message}</p>}
+                {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+                {errors.tags && <p class="text-red-500">{errors.tags.message}</p>}
+                <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
+                  <div
+                    class={cn(
+                      "flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1",
+                      {
+                        "cursor-pointer": isEditModal,
+                      }
+                    )}
+                    onClick={() => {
+                      if (!isEditModal) return;
+                      setOpenModalCalendar(true);
+                      setCalendarDate(editContent.date);
+                    }}
+                  >
+                    <CalendarDaysIcon class="size-10" />
+                    <p>
+                      {Intl.DateTimeFormat("ru-RU", {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      }).format(calendarDate!)}
+                    </p>
+                  </div>
+                  <div
+                    class={cn(
+                      "flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2",
+                      {
+                        "cursor-pointer": isEditModal,
+                      }
+                    )}
+                    onClick={() => {
+                      if (!isEditModal) return;
+                      setTags({ first: editContent.tags[0], second: editContent.tags[1], overdue: false });
+                      setOpenModalTags(true);
+                    }}
+                  >
+                    <p class="flex flex-row gap-2">
+                      <BookOpenIcon class="size-5" />
+                      {editContent.tags[0]}
+                    </p>
+                    <p class="flex flex-row gap-2">
+                      <DocumentDuplicateIcon class="size-5" />
+                      {editContent.tags[1]}
+                    </p>
+                  </div>
+                </div>
+              </form>
+            )}
+          </ModalWindow>
+          <Dialog
+            isOpen={showDeleteDialog}
+            setIsOpen={setShowDeleteDialog}
+            title="Удаление задачи"
+            content="Вы уверены, что хотите удалить эту задачу?"
+            onConfirm={handleDeleteTask}
+            confirmText="Удалить"
+            cancelText="Отмена"
+          />
+          <Calendar
+            value={currentDate}
+            onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
+            inline
+            pt={pt}
+            dateTemplate={dateTemplate}
+            className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
+          />
 
-      <div class="mt-8 w-full px-4">
+          <div class="mt-8 w-full px-4">
-        <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
+            <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
-        {selectedTasks.length > 0 ? (
+            {selectedTasks.length > 0 ? (
-          <div class="flex flex-col gap-4">
+              <div class="flex flex-col gap-4">
-            {selectedTasks.map((task) => (
+                {selectedTasks.map((task) => (
-              <Task
+                  <Task
-                key={task.id}
+                    key={task.id}
-                name={task.name}
+                    name={task.name}
-                checked={task.checked}
+                    checked={task.checked}
-                onClick={() => {
+                    onClick={() => handleViewTask(task.id)}
-                  setIsOpen(true);
+                    onMarkClick={() => handleTaskCheck(task.id)}
-                  setIsEdit(true);
+                  />
-                  setEditContent(task);
+                ))}
-                  setCalendarDate(task.date);
+              </div>
-                }}
+            ) : (
-                onMarkClick={() => handleTaskCheck(task.id)}
+              <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
-              />
+            )}
-            ))}
           </div>
-        ) : (
+        </>
-          <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
+      )}
-        )}
-      </div>
     </div>
   );
 };

src/pages/profile_tasks.dto.ts

@@ -22,15 +22,9 @@ export interface IApiTask {
   task_type: string;
 }
 
-export interface IApiDay {
-  date: string;
-  name: string;
-  tasks: IApiTask[];
-}
-
 export interface IApiResponse {
   profile: string;
-  days: IApiDay[];
+  tasks: IApiTask[];
   subject_choices: Record<string, string>;
   task_type_choices: Record<string, string>;
 }

src/pages/profile_tasks.tsx

@@ -79,17 +79,15 @@ const ProfileTasks: FunctionComponent = () => {
       setSubjectChoices(response.subject_choices);
       setTaskTypeChoices(response.task_type_choices);
 
-      const convertedTasks: ITask[] = response.days.flatMap((day) =>
+      const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
-        day.tasks.map((apiTask) => ({
+        id: apiTask.id.toString(),
-          id: apiTask.id.toString(),
+        name: apiTask.title,
-          name: apiTask.title,
+        checked: apiTask.isCompleted,
-          checked: apiTask.isCompleted,
+        date: new Date(apiTask.due_date),
-          date: new Date(apiTask.due_date),
+        description: apiTask.description,
-          description: apiTask.description,
+        tags: [apiTask.subject, apiTask.task_type],
-          tags: [apiTask.subject, apiTask.task_type],
+        new: false,
-          new: false,
+      }));
-        }))
-      );
 
       setTasks(convertedTasks);
     } catch (error) {