feat: input colors and some improvements

.vscode/settings.json

@@ -9,6 +9,5 @@
       "[\"'`]([^\"'`]*).*?[\"'`]"
     ]
   ],
-  "editor.formatOnSave": true,
-  "editor.tabSize": 2
+  "editor.formatOnSave": true
 }

src/app.tsx

@@ -5,7 +5,6 @@ import { addLocale, locale, PrimeReactProvider } from "primereact/api";
 import { useMountEffect } from "primereact/hooks";
 import Page404 from "./pages/404";
 import LoginPage from "./pages/login";
-import RegisterPage from "./pages/register";
 import { AppProvider, useAppContext } from "./providers/AuthProvider";
 
 const HomePage: FunctionComponent = () => {
@@ -33,7 +32,6 @@ export function App() {
             <Router>
               <Route path="/" component={HomePage} />
               <Route path="/login" component={LoginPage} />
-              <Route path="/register" component={RegisterPage} />
               <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
               <Route default component={() => <Page404 />} />
             </Router>

src/components/ModalSettings.tsx

@@ -1,203 +0,0 @@
-import apiClient from "@/services/api";
-import { cn } from "@/utils/class-merge";
-import { EyeIcon, EyeSlashIcon, XCircleIcon } from "@heroicons/react/24/outline";
-import { FunctionComponent } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import {
-  InputSwitch,
-  InputSwitchPassThroughMethodOptions,
-  InputSwitchPassThroughOptions,
-} from "primereact/inputswitch";
-import { SubmitHandler, useForm } from "react-hook-form";
-import Button from "./ui/Button";
-import ModalWindow, { ModalWindowProps } from "./ui/Modal";
-
-interface ISettings {
-  login: string;
-  oldPassword: string;
-  newPassword: string;
-  tgId: string;
-}
-
-export interface IAPIResponse {
-  profile: IAPIProfile;
-}
-
-export interface IAPIProfile {
-  username: string;
-  email: string;
-  status: string;
-  avatar_url: string;
-  telegram_notifications: boolean;
-  telegram_chat_id: string;
-}
-
-export interface IAPIUpdateSettingsResponse {
-  success: boolean;
-  username: string;
-  email: string;
-  avatar_url: string;
-  password_changed: boolean;
-}
-
-const SwitchStyles: InputSwitchPassThroughOptions = {
-  root: ({ props }: InputSwitchPassThroughMethodOptions) => ({
-    className: cn("inline-block relative", "w-12 h-7", {
-      "opacity-60 select-none pointer-events-none cursor-default": props.disabled,
-    }),
-  }),
-  input: {
-    className: cn("absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"),
-  },
-  slider: ({ props }: InputSwitchPassThroughMethodOptions) => ({
-    className: cn(
-      "absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent",
-      "transition-colors duration-200 rounded-2xl",
-      "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
-      "before:absolute before:content-'' before:top-1/2 before:bg-white  before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
-      {
-        "bg-gray-200 hover:bg-gray-300": !props.checked,
-        "bg-[rgba(251,194,199,0.53)] before:transform before:translate-x-5": props.checked,
-      }
-    ),
-  }),
-};
-
-const ModalSettings: FunctionComponent<ModalWindowProps> = ({ isOpen, setIsOpen, onClose, ...rest }) => {
-  const { handleSubmit, register, setValue, reset } = useForm<ISettings>({
-    defaultValues: {
-      login: "",
-      oldPassword: "",
-      newPassword: "",
-    },
-    mode: "onChange",
-  });
-
-  const changeSettings: SubmitHandler<ISettings> = async (data: ISettings) => {
-    interface IReq {
-      username?: string;
-      current_password?: string;
-      password?: string;
-    }
-    const req: IReq = {
-      username: data.login || undefined,
-      current_password: data.oldPassword || undefined,
-      password: data.newPassword || undefined,
-    };
-
-    const response = await apiClient<IAPIUpdateSettingsResponse>("/api/settings/edit_profile/", {
-      method: "PATCH",
-      body: JSON.stringify(req),
-    });
-    if (!response.success) console.error("Error changing settings");
-
-    if (enableNotification && data.tgId) {
-      await apiClient("/api/settings/save_chat_id/", {
-        method: "PATCH",
-        body: JSON.stringify({ telegram_chat_id: data.tgId }),
-      });
-      if (oldEnabledNotif !== enableNotification) {
-        await apiClient("/api/settings/toggle_telegram_notifications/", { method: "PATCH" });
-      }
-    }
-
-    handleClose();
-  };
-
-  const [enableNotification, setEnableNotification] = useState(false);
-  const [login, setLogin] = useState("");
-  const [showOldPassword, setShowOldPassword] = useState(false);
-  const [showNewPassword, setShowNewPassword] = useState(false);
-  const [oldEnabledNotif, setOldEnabledNotif] = useState(false);
-  const [tgId, setTgId] = useState("");
-
-  useEffect(() => {
-    const getSettings = async () => {
-      const response = await apiClient<IAPIResponse>("/api/settings/view_settings/", { method: "GET" });
-      setEnableNotification(response.profile.telegram_notifications);
-      setOldEnabledNotif(response.profile.telegram_notifications);
-      setLogin(response.profile.username);
-      setTgId(response.profile.telegram_chat_id);
-    };
-    if (isOpen) getSettings();
-  }, [isOpen]);
-
-  const handleClose = () => {
-    setIsOpen!(false);
-    setEnableNotification(false);
-    reset();
-    if (onClose) onClose();
-  };
-
-  return (
-    <ModalWindow setIsOpen={setIsOpen} isOpen={isOpen} onClose={handleClose} {...rest} className="h-fit! md:w-[40%]!">
-      <form onSubmit={handleSubmit(changeSettings)} class="flex w-full flex-col gap-4">
-        <div class="flex flex-col items-start gap-2">
-          <span class="ms-5 text-sm">Имя</span>
-          <div class="flex w-full flex-row items-center rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
-            <input class="flex-1 outline-0" {...register("login")} placeholder={login} />
-            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("login", "")} />
-          </div>
-        </div>
-        <div class="flex flex-col items-start gap-2">
-          <span class="ms-5 text-sm">Старый пароль</span>
-          <div class="flex w-full flex-row items-center gap-1 rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
-            <input
-              class="flex-1 outline-0"
-              {...register("oldPassword")}
-              placeholder="Новый пароль"
-              type={showOldPassword ? "text" : "password"}
-            />
-            {showOldPassword ? (
-              <EyeIcon class="size-6 cursor-pointer" onClick={() => setShowOldPassword(false)} />
-            ) : (
-              <EyeSlashIcon class="size-6 cursor-pointer" onClick={() => setShowOldPassword(true)} />
-            )}
-            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("oldPassword", "")} />
-          </div>
-        </div>
-        <div class="flex flex-col items-start gap-2">
-          <span class="ms-5 text-sm">Новый пароль</span>
-          <div class="flex w-full flex-row items-center gap-1 rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
-            <input
-              class="flex-1 outline-0"
-              {...register("newPassword", {
-                minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
-              })}
-              placeholder="Новый пароль"
-              type={showNewPassword ? "text" : "password"}
-            />
-            {showNewPassword ? (
-              <EyeIcon class="size-6 cursor-pointer" onClick={() => setShowNewPassword(false)} />
-            ) : (
-              <EyeSlashIcon class="size-6 cursor-pointer" onClick={() => setShowNewPassword(true)} />
-            )}
-            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("newPassword", "")} />
-          </div>
-        </div>
-        <div class="flex flex-row items-center justify-between rounded-[4rem] px-5 py-4 ring-3 ring-[rgba(251,194,199,0.53)]">
-          <span>Уведомления</span>
-          <InputSwitch
-            pt={SwitchStyles}
-            checked={enableNotification}
-            onChange={(e) => setEnableNotification(e.value)}
-          />
-        </div>
-        <div class={cn({ hidden: !enableNotification })}>
-          <div class="flex flex-col items-start gap-2">
-            <span class="ms-5 text-sm">Telegram ID</span>
-            <div class="flex w-full flex-row items-center rounded-[4rem] px-5 py-3 leading-8 ring-2 ring-[rgba(206,232,251,0.7)]">
-              <input class="flex-1 outline-0" {...register("tgId")} placeholder={tgId} />
-              <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("tgId", "")} />
-            </div>
-          </div>
-        </div>
-        <Button type="submit">Сохранить</Button>
-      </form>
-    </ModalWindow>
-  );
-};
-
-ModalSettings.displayName = "ModalSettings";
-
-export default ModalSettings;

src/components/menu.tsx

@@ -4,22 +4,8 @@ import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { useEffect, useState } from "preact/hooks";
-import apiClient from "@/services/api";
-import { useAppContext } from "@/providers/AuthProvider";
-
-interface UserProfile {
-  username: string;
-  email: string;
-  status: string;
-  avatar_url: string | null;
-  telegram_notifications: boolean;
-  telegram_chat_id: string;
-}
-
-interface UserSettings {
-  profile: UserProfile;
-}
 
 interface MenuItemProps {
   title: string;
@@ -50,27 +36,32 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
   );
 };
 
+
 const Avatar: FunctionComponent = () => {
   const [status, setStatus] = useState("");
-  const [username, setUsername] = useState("");
   const { route, path } = useLocation();
-  const { isLoggedIn } = useAppContext();
 
   useEffect(() => {
-    const fetchUserData = async () => {
-      try {
-        const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
-        setUsername(response.profile.username);
-        setStatus(response.profile.status);
-      } catch (error) {
-        console.error("Failed to fetch user data:", error);
-      }
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(getCurrentStatus(points));
     };
 
-    if (isLoggedIn.value) {
-      fetchUserData();
-    }
-  }, [isLoggedIn.value]);
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+    
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
 
   return (
     <button
@@ -86,7 +77,7 @@ const Avatar: FunctionComponent = () => {
       >
         <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
         <div class="flex flex-col items-center justify-center">
-          <p class="text-3xl font-semibold">{username}</p>
+          <p class="text-3xl font-semibold">никнейм</p>
           <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
         </div>
       </div>

src/components/task.tsx

@@ -51,7 +51,7 @@ const Task: FunctionComponent<TaskProps> = ({
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
-        {overdue && !checked && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
+        {overdue && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
       </div>
     </div>
   );

src/enums/urls.ts

@@ -4,5 +4,4 @@ export enum UrlsTitle {
   TASKS = "Задачи",
   CALENDAR = "Календарь",
   PAGE404 = "404",
-  REGISTER = "Регистрация",
 }

src/pages/login.tsx

@@ -3,7 +3,6 @@ import Input from "@/components/ui/Input";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
-import apiClient from "@/services/api";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import "preact/debug";
@@ -11,6 +10,10 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { ILoginForm } from "./login.dto";
 import classes from "./login.module.scss";
 
+const testUser = {
+  login: "test",
+  password: "test",
+};
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
@@ -22,37 +25,15 @@ const LoginPage: FunctionComponent = () => {
     mode: "onChange",
   });
   const login: SubmitHandler<ILoginForm> = async (data) => {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const response = await apiClient<{ success: boolean; user?: any; error?: string }>(
-        "/api/login/",
-        {
-          method: "POST",
-          body: JSON.stringify({ username: data.login, password: data.password }),
-          needsCsrf: true,
-        },
-        isLoggedIn
-      );
-
-      if (response.success) {
-        isLoggedIn.value = true;
-        localStorage.setItem("loggedIn", "true");
-        route("/profile/tasks", true);
-      } else {
-        const errorMessage = response.error || "Неверный логин или пароль";
-        setError("login", { message: errorMessage });
-        setError("password", { message: " " });
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      console.error("Login failed:", error);
-      const errorMessage =
-        error.message.includes("Authentication failed") || error.message.includes("Invalid credentials")
-          ? "Неверный логин или пароль"
-          : "Ошибка входа. Попробуйте позже.";
-      setError("login", { message: errorMessage });
-      setError("password", { message: " " });
+    console.log(data);
+    if (data.login !== testUser.login || data.password !== testUser.password) {
+      setError("login", { message: "Неверный логин или пароль" });
+      setError("password", { message: "Неверный логин или пароль" });
+      return;
     }
+    isLoggedIn.value = true;
+    localStorage.setItem("loggedIn", "true");
+    route("/profile/tasks", true);
   };
   if (isLoggedIn.value) route("/profile/tasks", true);
   return !isLoggedIn.value ? (
@@ -90,17 +71,6 @@ const LoginPage: FunctionComponent = () => {
             Войти
           </Button>
         </form>
-        <span class="mt-5 text-center text-xs">
-          Еще нет аккаунта?{" "}
-          <button
-            class="cursor-pointer text-blue-500 underline"
-            onClick={() => {
-              route("/register", true);
-            }}
-          >
-            Зарегистрироваться
-          </button>
-        </span>
       </div>
     </div>
   ) : (

src/pages/profile.tsx

@@ -6,16 +6,8 @@ import ids from "./profile.module.scss";
 
 const ProfilePage: FunctionComponent = () => {
   const { route } = useLocation();
-  const { isLoggedIn, isCheckingAuth } = useAppContext(); // Получаем новый сигнал
-
-  if (isCheckingAuth.value) {
-    return <div class="flex h-screen items-center justify-center">Проверка авторизации...</div>;
-  }
-
-  if (!isLoggedIn.value) {
-    route("/login", true);
-    return <p>Redirecting...</p>; // Заглушка на время редиректа
-  }
+  const { isLoggedIn } = useAppContext();
+  if (!isLoggedIn.value) route("/login", true);
   return isLoggedIn.value ? (
     <div id={ids.main_container}>
       <div id={ids.router_container}>

src/pages/profile_calendar.tsx

@@ -5,7 +5,6 @@ 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,
@@ -16,19 +15,16 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
 import { Nullable } from "primereact/ts-helpers";
-import { SubmitHandler, useForm } from "react-hook-form";
-import {
-  IApiResponse,
-  ICreateTaskResponse,
-  IDeleteTaskResponse,
-  IEditTaskResponse,
-  ITask,
-  ITaskDetails,
-  ITaskForm,
-} from "./profile_tasks.dto";
+import { useForm } from "react-hook-form";
+import { ITask, ITaskForm } from "./profile_tasks.dto";
+
+const example_tags: { first: string[]; second: string[] } = {
+  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+};
 
 const calendarStyles = {
   root: "inline-flex w-full relative",
@@ -63,9 +59,6 @@ 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,
@@ -80,164 +73,21 @@ const ProfileCalendar: FunctionComponent = () => {
   });
 
   useEffect(() => {
-    fetchTasks();
-  }, []);
-
-  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,
+    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(convertedTasks);
-    } catch (error) {
-      console.error("Failed to fetch tasks:", error);
-    } finally {
-      setIsLoading(false);
+      setTasks(parsedTasks);
     }
-  };
-
-  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 () => {
+  }, []);
+  const handleDeleteTask = () => {
     if (!editContent) return;
-
-    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);
-    }
+    setTasks(tasks.filter((task) => task.id !== editContent.id));
+    setIsOpen(false);
+    setShowDeleteDialog(false);
   };
 
   useEffect(() => {
@@ -259,6 +109,9 @@ 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;
@@ -322,6 +175,12 @@ 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",
@@ -330,6 +189,26 @@ 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 } },
@@ -351,206 +230,193 @@ 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}
-            tagsList={example_tags}
-            value={tags}
-            onClose={() => {
-              setTags({ first: "", second: "", overdue: false });
-            }}
-            onChange={setTags}
-          />
-          <ModalCalendar
-            isOpen={openModalCalendar}
-            setIsOpen={setOpenModalCalendar}
-            onClose={() => {
-              if (isEdit && !isEditModal) setCalendarDate(null);
-            }}
-            onChange={(e) => isEditModal && setCalendarDate(e.value)}
-            value={calendarDate!}
-          />
-          <ModalWindow
-            isOpen={openModal}
-            setIsOpen={setIsOpen}
-            onClose={() => {
-              setIsEdit(false);
-              setEditContent(null);
-              setIsEditModal(false);
-              setTags({ first: "", second: "", overdue: false });
-              setCalendarDate(null);
+      <ModalTags
+        isOpen={openModalTags}
+        setIsOpen={setOpenModalTags}
+        tagsList={example_tags}
+        value={tags}
+        onClose={() => {
+          setTags({ first: "", second: "", overdue: false });
+        }}
+        onChange={setTags}
+      />
+      <ModalCalendar
+        isOpen={openModalCalendar}
+        setIsOpen={setOpenModalCalendar}
+        onClose={() => {
+          if (isEdit && !isEditModal) setCalendarDate(null);
+        }}
+        onChange={(e) => isEditModal && setCalendarDate(e.value)}
+        value={calendarDate!}
+      />
+      <ModalWindow
+        isOpen={openModal}
+        setIsOpen={setIsOpen}
+        onClose={() => {
+          setIsEdit(false);
+          setEditContent(null);
+          setIsEditModal(false);
+          setTags({ first: "", second: "", overdue: false });
+          setCalendarDate(null);
+        }}
+      >
+        {isEdit && editContent && (
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
             }}
           >
-            {isEdit && editContent && (
-              <form
-                class="flex h-full w-full flex-col items-start justify-between"
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  if (isEditModal) handleSubmit(saveTask)();
-                  else setIsEditModal(!isEditModal);
+            <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"
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    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);
                 }}
               >
-                <div class="flex w-full flex-row items-start justify-between">
-                  <div class="flex flex-1 flex-col gap-1 pe-2">
-                    <input
-                      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", {
-                        required: "Заполните название",
-                        maxLength: { value: 20, message: "Максимум 20 символов в названии" },
-                      })}
-                    />
-                    <textarea
-                      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", {
-                        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" />
-                    <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">
-            <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
-            {selectedTasks.length > 0 ? (
-              <div class="flex flex-col gap-4">
-                {selectedTasks.map((task) => (
-                  <Task
-                    key={task.id}
-                    name={task.name}
-                    checked={task.checked}
-                    onClick={() => handleViewTask(task.id)}
-                    onMarkClick={() => handleTaskCheck(task.id)}
-                  />
-                ))}
+                <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="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</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">
+        <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
+        {selectedTasks.length > 0 ? (
+          <div class="flex flex-col gap-4">
+            {selectedTasks.map((task) => (
+              <Task
+                key={task.id}
+                name={task.name}
+                checked={task.checked}
+                onClick={() => {
+                  setIsOpen(true);
+                  setIsEdit(true);
+                  setEditContent(task);
+                  setCalendarDate(task.date);
+                }}
+                onMarkClick={() => handleTaskCheck(task.id)}
+              />
+            ))}
           </div>
-        </>
-      )}
+        ) : (
+          <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
+        )}
+      </div>
     </div>
   );
 };

src/pages/profile_settings.tsx

@@ -1,95 +1,74 @@
-import ModalSettings from "@/components/ModalSettings";
 import Button from "@/components/ui/Button";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
-import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
+import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
 import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
 import classes from "./profile_settings.module.scss";
 
-interface UserProfile {
-  username: string;
-  status: string;
-  telegram_notifications: boolean;
-  telegram_chat_id: string | null;
-  current_xp: string;
-  xp_for_next_status: string;
-}
-
-interface UserSettings {
-  profile: UserProfile;
-}
-
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const [userData, setUserData] = useState<UserProfile>({
-    username: "",
-    status: "",
-    current_xp: "",
-    xp_for_next_status: "",
-    telegram_notifications: false,
-    telegram_chat_id: "",
-  });
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [status, setStatus] = useState(0);
+  const maxStatus = 100;
 
-  const fetchUserData = async () => {
-    try {
-      const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
-      setUserData(response.profile);
-    } catch (error) {
-      console.error("Failed to fetch user data:", error);
-    }
-  };
   useEffect(() => {
-    if (isLoggedIn.value) {
-      fetchUserData();
-    }
-  }, [isLoggedIn.value]);
+    const updateStatus = () => {
+      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+      const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
+      const points = calculatePoints(completedTasks);
+      setStatus(points);
+    };
+
+    // Initial update
+    updateStatus();
+
+    // Update when tasks change
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key === "tasks") {
+        updateStatus();
+      }
+    };
+
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
 
-  const handleLogout = async () => {
-    try {
-      await apiClient("/api/settings/logout/", { method: "POST", needsCsrf: true }, isLoggedIn);
-      isLoggedIn.value = false;
-      localStorage.removeItem("loggedIn");
-      localStorage.removeItem("user");
-      route("/login", true);
-    } catch (error) {
-      console.error("Logout failed:", error);
-    }
-  };
   return (
     <div class={classes.container}>
-      <ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
       <div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row">
-        <div id={classes.avatar}>"Аватар"</div>
+        <div id={classes.avatar}>Аватар</div>
         <div class={classes.header_block__name}>
-          <p class="text-4xl font-semibold">{userData.username}</p>
-          <p class="text-2xl font-light">{userData.status}</p>
+          <p class="text-4xl font-semibold">Никнейм</p>
+          <p class="text-2xl font-light">{getCurrentStatus(status)}</p>
           <div class="h-1.5 w-full overflow-hidden rounded-2xl bg-white">
             <div
               class={cn("relative top-0 left-0 h-2 bg-black")}
-              style={{ width: `${(+userData.current_xp / +userData.xp_for_next_status) * 100}%` }}
+              style={{ width: `${(status / maxStatus) * 100}%` }}
             ></div>
           </div>
           <div class="-mt-3 self-end text-sm font-light">
-            {userData.current_xp}/{userData.xp_for_next_status}
+            {status}/{maxStatus}
           </div>
         </div>
       </div>
       <div class={classes.profile_container}>
         <div class={classes.settings_block}>
           <div class={classes.settings_block__buttons}>
-            <Button className="flex flex-row items-center justify-center gap-2" onClick={() => setIsSettingsOpen(true)}>
+            <Button className="flex flex-row items-center justify-center gap-2">
               <Cog8ToothIcon class="size-8" /> Настройки
             </Button>
             <Button
               className="flex flex-row items-center justify-center gap-2 bg-[linear-gradient(180.00deg,rgba(246,255,211,0.7),rgba(195,229,253,0.7)_100%)]"
-              onClick={handleLogout}
+              onClick={() => {
+                isLoggedIn.value = false;
+                localStorage.setItem("loggedIn", "false");
+                route("/login", true);
+              }}
             >
               <ArrowRightStartOnRectangleIcon class="size-8" /> Выйти
             </Button>

src/pages/profile_tasks.dto.ts

@@ -11,77 +11,3 @@ export interface ITask {
 export interface ITaskForm extends Omit<ITask, "date"> {
   date: string;
 }
-
-export interface IApiTask {
-  id: number;
-  title: string;
-  description: string;
-  isCompleted: boolean;
-  due_date: string;
-  subject: string;
-  task_type: string;
-}
-
-export interface IApiResponse {
-  profile: string;
-  tasks: IApiTask[];
-  subject_choices: Record<string, string>;
-  task_type_choices: Record<string, string>;
-}
-
-export interface ICreateTaskResponse {
-  success: boolean;
-  message: string;
-  profile: string;
-  task: {
-    id: number;
-    title: string;
-    description: string;
-    subject: string;
-    taskType: string;
-    dateTime_due: string;
-    isCompleted: boolean;
-    reminder?: {
-      remind_before_days: number;
-      repeat_interval: number;
-      reminder_time: string;
-    };
-  };
-}
-
-export interface ITaskDetails {
-  profile: string;
-  title: string;
-  description: string;
-  subject: string;
-  taskType: string;
-  dateTime_due: string;
-  remind_before_days: number;
-  repeat_reminder: number;
-  reminder_time: string;
-}
-
-export interface IDeleteTaskResponse {
-  success: boolean;
-  message: string;
-}
-
-export interface IEditTaskResponse {
-  success: boolean;
-  message: string;
-  profile: string;
-  task: {
-    id: number;
-    title: string;
-    description: string;
-    subject: string;
-    taskType: string;
-    dateTime_due: string;
-    isCompleted: boolean;
-    reminder?: {
-      remind_before_days: number;
-      repeat_interval: number;
-      reminder_time: string;
-    };
-  };
-}

src/pages/profile_tasks.tsx

@@ -8,7 +8,6 @@ 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 { PlusIcon } from "@heroicons/react/20/solid";
 import {
@@ -29,17 +28,14 @@ import { Checkbox, CheckboxPassThroughMethodOptions } from "primereact/checkbox"
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { v4 as uuid } from "uuid";
-import {
-  IApiResponse,
-  ICreateTaskResponse,
-  IDeleteTaskResponse,
-  IEditTaskResponse,
-  ITask,
-  ITaskDetails,
-  ITaskForm,
-} from "./profile_tasks.dto";
+import { ITask, ITaskForm } from "./profile_tasks.dto";
 import classes from "./profile_tasks.module.scss";
 
+const example_tags: { first: string[]; second: string[] } = {
+  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+};
+
 const ProfileTasks: FunctionComponent = () => {
   const [openModal, setIsOpen] = useState(false); // Открыта модалка
   const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
@@ -62,40 +58,17 @@ const ProfileTasks: FunctionComponent = () => {
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
     return formatter.format(date);
   }, []);
-  const [tasks, setTasks] = useState<ITask[]>([]);
-  const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({});
-  const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({});
-  const [isLoading, setIsLoading] = useState(true);
-
+  const init_tasks: ITask[] = localStorage.getItem("tasks") ? JSON.parse(localStorage.getItem("tasks") as string) : [];
+  let clear = false;
+  init_tasks.forEach((task) => {
+    clear = clear || (task.new == undefined ? true : false);
+    if (!clear) task.new = true;
+    task.date = new Date(task.date);
+  });
+  const [tasks, setTasks] = useState<ITask[]>(clear ? [] : init_tasks);
   useEffect(() => {
-    fetchTasks();
-  }, []);
-
-  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);
-    }
-  };
+    localStorage.setItem("tasks", JSON.stringify(tasks));
+  }, [tasks]);
 
   const {
     handleSubmit,
@@ -108,81 +81,27 @@ const ProfileTasks: FunctionComponent = () => {
       tags: [],
     },
   });
-
-  const example_tags = useMemo(
-    () => ({
-      first: Object.keys(subjectChoices),
-      second: Object.keys(taskTypeChoices),
-    }),
-    [subjectChoices, taskTypeChoices]
-  );
-
-  const saveTask: SubmitHandler<ITaskForm> = async (data) => {
+  const saveTask: SubmitHandler<ITaskForm> = (data) => {
     if (!calendarDate) {
       setError("date", { message: "Выберите дату" });
       return;
     }
+    console.log(tags);
     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 (isCreating) {
-        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();
-
-      if (isCreating) setIsOpen(false);
-      setTags({ first: "", second: "", overdue: false });
-    } catch (error) {
-      console.error("Failed to save task:", error);
-    }
+    const eTask: ITask = {
+      ...data,
+      date: calendarDate,
+      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
+      new: true,
+    };
+    if (isCreating) setTasks([...tasks, eTask]);
+    else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
+    if (isCreating) setIsOpen(false);
+    setTags({ first: "", second: "", overdue: false });
   };
-
   useEffect(() => {
     if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
     else reset();
@@ -255,44 +174,17 @@ const ProfileTasks: FunctionComponent = () => {
     }).format(date);
   };
 
-  const handleDeleteTask = async () => {
+  const handleDeleteTask = () => {
     if (!editContent) return;
-
-    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 handleMarkTask = 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);
-    }
+    setTasks(tasks.filter((task) => task.id !== editContent.id));
+    setIsOpen(false);
+    setShowDeleteDialog(false);
   };
 
   const filteredTasks = useMemo(() => {
     let filtered = tasks;
 
+    // Фильтрация по поиску
     if (searchQuery) {
       filtered = filtered.filter(
         (task) =>
@@ -301,6 +193,7 @@ const ProfileTasks: FunctionComponent = () => {
       );
     }
 
+    // Фильтрация по тегам
     if (filterTags.first || filterTags.second) {
       filtered = filtered.filter(
         (task) =>
@@ -309,7 +202,7 @@ const ProfileTasks: FunctionComponent = () => {
       );
     }
 
-    filtered = filtered.filter((task) => (filterTags.overdue && !task.checked ? task.date < new Date() : 1));
+    filtered = filtered.filter((task) => (filterTags.overdue ? task.date < new Date() : task.date >= new Date()));
     return filtered;
   }, [tasks, searchQuery, filterTags]);
 
@@ -318,50 +211,19 @@ const ProfileTasks: FunctionComponent = () => {
   useEffect(() => {
     if (searchInputRef.current && openSearchModal) searchInputRef.current.focus();
   }, [searchInputRef, openSearchModal]);
-
-  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);
-    }
-  };
-
   return (
     <div class={classes.container}>
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
-        <ModalTags
-          zIndex={70}
-          isOpen={openModalTags}
-          setIsOpen={setOpenModalTags}
-          tagsList={example_tags}
-          value={tags}
-          onClose={() => {
-            if (!isCreating) setTags({ first: "", second: "", overdue: false });
-          }}
-          onChange={setTags}
-        />
-      )}
+      <ModalTags
+        zIndex={70}
+        isOpen={openModalTags}
+        setIsOpen={setOpenModalTags}
+        tagsList={example_tags}
+        value={tags}
+        onClose={() => {
+          if (!isCreating) setTags({ first: "", second: "", overdue: false });
+        }}
+        onChange={setTags}
+      />
       <ModalCalendar
         zIndex={80}
         isOpen={openModalCalendar}
@@ -612,8 +474,15 @@ const ProfileTasks: FunctionComponent = () => {
                       key={task.id}
                       checked={task.checked}
                       overdue={task.date < new Date()}
-                      onClick={() => handleViewTask(task.id)}
-                      onMarkClick={() => handleMarkTask(task.id)}
+                      onClick={() => {
+                        setIsOpen(true);
+                        setIsEdit(true);
+                        setEditContent(task);
+                        setCalendarDate(task.date);
+                      }}
+                      onMarkClick={() => {
+                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                      }}
                     />
                   ))}
                 </div>
@@ -628,8 +497,15 @@ const ProfileTasks: FunctionComponent = () => {
                       name={task.name}
                       key={task.id}
                       checked={task.checked}
-                      onClick={() => handleViewTask(task.id)}
-                      onMarkClick={() => handleMarkTask(task.id)}
+                      onClick={() => {
+                        setIsOpen(true);
+                        setIsEdit(true);
+                        setEditContent(task);
+                        setCalendarDate(task.date);
+                      }}
+                      onMarkClick={() => {
+                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                      }}
                     />
                   ))}
                 </div>
@@ -642,8 +518,15 @@ const ProfileTasks: FunctionComponent = () => {
                       name={task.name}
                       key={task.id}
                       checked={task.checked}
-                      onClick={() => handleViewTask(task.id)}
-                      onMarkClick={() => handleMarkTask(task.id)}
+                      onClick={() => {
+                        setIsOpen(true);
+                        setIsEdit(true);
+                        setEditContent(task);
+                        setCalendarDate(task.date);
+                      }}
+                      onMarkClick={() => {
+                        setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                      }}
                     />
                   ))}
                 </div>
@@ -689,8 +572,15 @@ const ProfileTasks: FunctionComponent = () => {
                 key={task.id}
                 checked={task.checked}
                 overdue={task.date < new Date()}
-                onClick={() => handleViewTask(task.id)}
-                onMarkClick={() => handleMarkTask(task.id)}
+                onClick={() => {
+                  setIsOpen(true);
+                  setIsEdit(true);
+                  setEditContent(task);
+                  setCalendarDate(task.date);
+                }}
+                onMarkClick={() => {
+                  setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                }}
               />
             ))
           ) : (

src/pages/register.tsx

@@ -1,132 +0,0 @@
-import Button from "@/components/ui/Button";
-import Input from "@/components/ui/Input";
-import { withTitle } from "@/constructors/Component";
-import { UrlsTitle } from "@/enums/urls";
-import { useAppContext } from "@/providers/AuthProvider";
-import apiClient from "@/services/api";
-import { FunctionComponent } from "preact";
-import { useLocation } from "preact-iso";
-import "preact/debug";
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
-import { ILoginForm } from "./login.dto";
-import classes from "./login.module.scss";
-
-interface IRegisterForm extends ILoginForm {
-  confirmPassword: string;
-}
-
-const RegisterPage: FunctionComponent = () => {
-  const { isLoggedIn } = useAppContext();
-  const { route } = useLocation();
-  const { control, handleSubmit, formState, setError } = useForm({
-    defaultValues: {
-      login: "",
-      password: "",
-      confirmPassword: "",
-    },
-    mode: "onChange",
-  });
-  const register: SubmitHandler<IRegisterForm> = async (data) => {
-    if (data.password !== data.confirmPassword) {
-      setError("confirmPassword", { message: "Пароли не совпадают" });
-      return;
-    }
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const response = await apiClient<{ success: boolean; user?: any; error?: string }>("/api/register/", {
-        method: "POST",
-        body: JSON.stringify({ username: data.login, password: data.password }),
-        needsCsrf: true,
-      });
-
-      if (response.success) {
-        route("/login", true);
-      } else {
-        const errorMessage = response.error || "Неверный логин или пароль";
-        setError("login", { message: errorMessage });
-        setError("password", { message: " " });
-        setError("confirmPassword", { message: " " });
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      console.error("Register failed:", error);
-      const errorMessage = "Ошибка входа. Попробуйте позже.";
-      setError("login", { message: errorMessage });
-      setError("password", { message: " " });
-      setError("confirmPassword", { message: " " });
-    }
-  };
-  if (isLoggedIn.value) route("/profile/tasks", true);
-  return !isLoggedIn.value ? (
-    <div class={classes.login_container}>
-      <div class={classes.login_card}>
-        <p class={classes.login_card_name}>Антихвост</p>
-        <form onSubmit={handleSubmit(register)}>
-          <Controller
-            name="login"
-            control={control}
-            rules={{
-              required: "Введите логин",
-              minLength: { value: 3, message: "Логин должен быть не менее 3 символов" },
-            }}
-            render={({ field }) => (
-              <Input placeholder="Логин" textAlign="center" error={formState.errors.login?.message} {...field} />
-            )}
-          />
-          <Controller
-            name="password"
-            control={control}
-            rules={{
-              required: "Введите пароль",
-              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
-            }}
-            render={({ field }) => (
-              <Input
-                placeholder="Пароль"
-                textAlign="center"
-                type="password"
-                error={formState.errors.password?.message}
-                {...field}
-              />
-            )}
-          />
-          <Controller
-            name="confirmPassword"
-            control={control}
-            rules={{
-              required: "Введите пароль",
-              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
-            }}
-            render={({ field }) => (
-              <Input
-                placeholder="Повторите пароль"
-                textAlign="center"
-                type="password"
-                error={formState.errors.confirmPassword?.message}
-                {...field}
-              />
-            )}
-          />
-          <Button type="submit" color="secondary" className="w-full">
-            Зарегистрироваться
-          </Button>
-        </form>
-        <span class="mt-5 text-center text-xs">
-          Уже есть аккаунт?{" "}
-          <button
-            class="cursor-pointer text-blue-500 underline"
-            onClick={() => {
-              route("/login", true);
-            }}
-          >
-            Войти
-          </button>
-        </span>
-      </div>
-    </div>
-  ) : (
-    <p>Redirecting...</p>
-  );
-};
-
-export default withTitle(UrlsTitle.REGISTER, RegisterPage);

src/providers/AuthProvider.tsx

@@ -1,75 +1,20 @@
-import apiClient from "@/services/api";
+import { stringToBoolean } from "@/utils/converter";
 import { signal, Signal } from "@preact/signals";
 import { createContext, JSX } from "preact";
-import { useContext, useEffect } from "preact/hooks";
-
-interface UserData {
-  id: number;
-  username: string;
-  email: string;
-}
-
-interface AuthStatusResponse {
-  isAuthenticated: boolean;
-  user?: UserData;
-}
+import { useContext } from "preact/hooks";
 
 interface AppContextValue {
   isLoggedIn: Signal<boolean>;
-  isCheckingAuth: Signal<boolean>;
-  currentUser: Signal<UserData | null>;
-  checkAuth: () => Promise<void>;
 }
+const ininitialValue = stringToBoolean(localStorage.getItem("loggedIn"));
 
-const initialLoggedIn = localStorage.getItem("loggedIn") === "true";
-
-const AppContext = createContext<AppContextValue | null>(null);
+const AppContext = createContext<AppContextValue>({
+  isLoggedIn: signal(ininitialValue),
+});
 
 const AppProvider = ({ children }: { children: JSX.Element }) => {
-  const isLoggedIn = signal(initialLoggedIn);
-  const isCheckingAuth = signal(true);
-  const currentUser = signal<UserData | null>(null);
-
-  const checkAuth = async () => {
-    console.log("Checking auth status...");
-    isCheckingAuth.value = true;
-    try {
-      const response = await apiClient<AuthStatusResponse>("/api/auth/status/", {
-        method: "GET",
-        needsCsrf: false,
-      });
-
-      if (response.isAuthenticated && response.user) {
-        console.log("User is authenticated:", response.user.username);
-        isLoggedIn.value = true;
-        currentUser.value = response.user;
-        localStorage.setItem("loggedIn", "true");
-      } else {
-        console.log("User is not authenticated.");
-        isLoggedIn.value = false;
-        currentUser.value = null;
-        localStorage.removeItem("loggedIn");
-      }
-    } catch (error: any) {
-      console.error("Auth check failed:", error.message);
-      isLoggedIn.value = false;
-      currentUser.value = null;
-      localStorage.removeItem("loggedIn");
-    } finally {
-      isCheckingAuth.value = false;
-      console.log("Auth check finished. isLoggedIn:", isLoggedIn.value);
-    }
-  };
-
-  useEffect(() => {
-    checkAuth();
-  }, []);
-
   const value: AppContextValue = {
-    isLoggedIn,
-    isCheckingAuth,
-    currentUser,
-    checkAuth,
+    isLoggedIn: signal(ininitialValue),
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
@@ -84,4 +29,3 @@ const useAppContext = () => {
 };
 
 export { AppProvider, useAppContext };
-export type { UserData };

src/services/api.ts

@@ -1,99 +0,0 @@
-import { Signal } from "@preact/signals";
-
-function getCookie(name: string): string | null {
-  let cookieValue = null;
-  if (document.cookie && document.cookie !== "") {
-    const cookies = document.cookie.split(";");
-    for (let i = 0; i < cookies.length; i++) {
-      const cookie = cookies[i].trim();
-      if (cookie.substring(0, name.length + 1) === name + "=") {
-        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-        break;
-      }
-    }
-  }
-  return cookieValue;
-}
-
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
-
-interface RequestOptions extends RequestInit {
-  needsCsrf?: boolean;
-  isFormData?: boolean;
-}
-
-async function apiClient<T>(
-  endpoint: string,
-  options: RequestOptions = {},
-  isLoggedInSignal?: Signal<boolean>
-): Promise<T> {
-  const url = `${API_BASE_URL}${endpoint}`;
-  const { needsCsrf = true, isFormData = false, ...fetchOptions } = options;
-
-  const headers: HeadersInit = {
-    ...(isFormData ? {} : { "Content-Type": "application/json" }),
-    Accept: "application/json",
-    ...fetchOptions.headers,
-  };
-
-  const method = options.method?.toUpperCase() || "GET";
-  if (needsCsrf && ["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
-    const csrfToken = getCookie("csrftoken");
-    if (csrfToken) {
-      (headers as Record<string, string>)["X-CSRFToken"] = csrfToken;
-    } else {
-      console.warn("CSRF token not found in cookies.");
-      await fetchCsrfToken(); // Implement this function if needed
-      const newCsrfToken = getCookie("csrftoken");
-      if (newCsrfToken) {
-        (headers as Record<string, string>)["X-CSRFToken"] = newCsrfToken;
-      } else {
-        throw new Error("CSRF token is missing");
-      }
-    }
-  }
-
-  const config: RequestInit = {
-    ...fetchOptions,
-    headers,
-    credentials: "include",
-  };
-
-  try {
-    const response = await fetch(url, config);
-
-    if (response.status === 401 || response.status === 403) {
-      console.error("Authentication error:", response.status);
-      if (isLoggedInSignal) {
-        isLoggedInSignal.value = false;
-        localStorage.setItem("loggedIn", "false");
-      }
-      throw new Error(`Authentication failed: ${response.status}`);
-    }
-
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      console.error("API Error:", response.status, errorData);
-      throw new Error(`HTTP error ${response.status}: ${JSON.stringify(errorData) || response.statusText}`);
-    }
-
-    if (response.status === 204) {
-      return {} as T;
-    }
-
-    return (await response.json()) as T;
-  } catch (error) {
-    console.error("API Client Fetch Error:", error);
-    throw error;
-  }
-}
-
-async function fetchCsrfToken() {
-  try {
-    await apiClient("/api/get-csrf/", { method: "GET", needsCsrf: false });
-  } catch (error) {
-    console.error("Failed to fetch CSRF token:", error);
-  }
-}
-
-export default apiClient;