6 Commits

15 changed files with 389 additions and 1269 deletions

View File

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

View File

@@ -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>

View File

@@ -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;

View File

@@ -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));
};
// Initial update
updateStatus();
// Update when tasks change
const handleStorage = (e: StorageEvent) => {
if (e.key === "tasks") {
updateStatus();
}
};
if (isLoggedIn.value) {
fetchUserData();
}
}, [isLoggedIn.value]);
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>

View File

@@ -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>
);

View File

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

View File

@@ -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) {
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);
} 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: " " });
}
};
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>
) : (

View File

@@ -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}>

View File

@@ -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();
setTasks(tasks.filter((task) => task.id !== editContent.id));
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(() => {
@@ -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,12 +230,6 @@ 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}
@@ -399,9 +272,7 @@ 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={cn("w-full p-2 text-2xl outline-0", {
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
})}
class="w-full text-2xl outline-0"
disabled={!isEditModal}
placeholder="Название"
{...register("name", {
@@ -410,9 +281,7 @@ const ProfileCalendar: FunctionComponent = () => {
})}
/>
<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,
})}
class="h-[5rem] w-full resize-none outline-0"
disabled={!isEditModal}
placeholder={isEditModal ? "Описание" : ""}
{...register("description", {
@@ -464,12 +333,9 @@ 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);
@@ -488,12 +354,9 @@ 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 });
@@ -540,7 +403,12 @@ const ProfileCalendar: FunctionComponent = () => {
key={task.id}
name={task.name}
checked={task.checked}
onClick={() => handleViewTask(task.id)}
onClick={() => {
setIsOpen(true);
setIsEdit(true);
setEditContent(task);
setCalendarDate(task.date);
}}
onMarkClick={() => handleTaskCheck(task.id)}
/>
))}
@@ -549,8 +417,6 @@ const ProfileCalendar: FunctionComponent = () => {
<div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
)}
</div>
</>
)}
</div>
);
};

View File

@@ -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);
};
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);
// 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 (
<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>

View File

@@ -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;
};
};
}

View File

@@ -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,
const eTask: ITask = {
...data,
date: calendarDate,
tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
new: true,
};
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) setTasks([...tasks, eTask]);
else setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
if (isCreating) setIsOpen(false);
setTags({ first: "", second: "", overdue: false });
} catch (error) {
console.error("Failed to save task:", error);
}
};
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();
setTasks(tasks.filter((task) => task.id !== editContent.id));
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);
}
};
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) =>
@@ -318,38 +211,8 @@ 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}
@@ -361,7 +224,6 @@ const ProfileTasks: FunctionComponent = () => {
}}
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)));
}}
/>
))
) : (

View File

@@ -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);

View File

@@ -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 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,
const AppContext = createContext<AppContextValue>({
isLoggedIn: signal(ininitialValue),
});
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 AppProvider = ({ children }: { children: JSX.Element }) => {
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 };

View File

@@ -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;