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));
+
+    try {
+      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,6 +351,12 @@ const ProfileCalendar: FunctionComponent = () => {
 
   return (
     <div class="flex w-full flex-col items-center">
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">
+          <div class="text-2xl">Загрузка...</div>
+        </div>
+      ) : (
+        <>
           <ModalTags
             isOpen={openModalTags}
             setIsOpen={setOpenModalTags}
@@ -272,7 +399,9 @@ const ProfileCalendar: FunctionComponent = () => {
                 <div class="flex w-full flex-row items-start justify-between">
                   <div class="flex flex-1 flex-col gap-1 pe-2">
                     <input
-                  class="w-full text-2xl outline-0"
+                      class={cn("w-full p-2 text-2xl outline-0", {
+                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                      })}
                       disabled={!isEditModal}
                       placeholder="Название"
                       {...register("name", {
@@ -281,7 +410,9 @@ const ProfileCalendar: FunctionComponent = () => {
                       })}
                     />
                     <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
+                      class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
+                        "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                      })}
                       disabled={!isEditModal}
                       placeholder={isEditModal ? "Описание" : ""}
                       {...register("description", {
@@ -333,9 +464,12 @@ const ProfileCalendar: FunctionComponent = () => {
                 {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", {
+                    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);
@@ -354,9 +488,12 @@ const ProfileCalendar: FunctionComponent = () => {
                     </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", {
+                    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 });
@@ -403,12 +540,7 @@ const ProfileCalendar: FunctionComponent = () => {
                     key={task.id}
                     name={task.name}
                     checked={task.checked}
-                onClick={() => {
+                    onClick={() => handleViewTask(task.id)}
-                  setIsOpen(true);
-                  setIsEdit(true);
-                  setEditContent(task);
-                  setCalendarDate(task.date);
-                }}
                     onMarkClick={() => handleTaskCheck(task.id)}
                   />
                 ))}
@@ -417,6 +549,8 @@ const ProfileCalendar: FunctionComponent = () => {
               <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,8 +79,7 @@ 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(),
         name: apiTask.title,
         checked: apiTask.isCompleted,
@@ -88,8 +87,7 @@ const ProfileTasks: FunctionComponent = () => {
         description: apiTask.description,
         tags: [apiTask.subject, apiTask.task_type],
         new: false,
-        }))
+      }));
-      );
 
       setTasks(convertedTasks);
     } catch (error) {