feat: get tasks from api in calendar

2025-05-09 15:37:05 +03:00
parent cb9e1bd266
commit cc7307a655
3 changed files with 375 additions and 249 deletions
--- a/src/pages/profile_calendar.tsx
+++ b/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 { ITask, ITaskForm } from "./profile_tasks.dto";
-
-const example_tags: { first: string[]; second: string[] } = {
-  first: ["Программирование", "Информатика", "Физика", "Математика"],
-  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
-};
+import { SubmitHandler, useForm } from "react-hook-form";
+import {
+  IApiResponse,
+  ICreateTaskResponse,
+  IDeleteTaskResponse,
+  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");
-    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);
-    }
+    fetchTasks();
  }, []);
-  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={() => {
-                  setIsOpen(true);
-                  setIsEdit(true);
-                  setEditContent(task);
-                  setCalendarDate(task.date);
-                }}
+                    onClick={() => handleViewTask(task.id)}
                    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>
  );
 };
--- a/src/pages/profile_tasks.dto.ts
+++ b/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>;
 }
--- a/src/pages/profile_tasks.tsx
+++ b/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) =>
-        day.tasks.map((apiTask) => ({
+      const convertedTasks: ITask[] = response.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) {