From 56337237edc3b1c575f8b773f4b1b67170da7b02 Mon Sep 17 00:00:00 2001 From: Iron_Felix Date: Sat, 20 Dec 2025 01:54:09 +0300 Subject: [PATCH] feat: first settings page version --- modules/frontend/src/App.tsx | 7 + .../src/pages/SettingsPage/SettingsPage.tsx | 321 ++++++++++-------- 2 files changed, 194 insertions(+), 134 deletions(-) diff --git a/modules/frontend/src/App.tsx b/modules/frontend/src/App.tsx index de7101c..f8ebdf5 100644 --- a/modules/frontend/src/App.tsx +++ b/modules/frontend/src/App.tsx @@ -5,6 +5,7 @@ import UserPage from "./pages/UserPage/UserPage"; import TitlesPage from "./pages/TitlesPage/TitlesPage"; import TitlePage from "./pages/TitlePage/TitlePage"; import { LoginPage } from "./pages/LoginPage/LoginPage"; +import { SettingsPage } from "./pages/SettingsPage/SettingsPage"; import { Header } from "./components/Header/Header"; // import { OpenAPI } from "./api"; @@ -46,6 +47,12 @@ const App: React.FC = () => { element={userId ? : } /> + {/*settings*/} + : } + /> + {/* titles */} } /> } /> diff --git a/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx b/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx index 16c7e9e..b05a03f 100644 --- a/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx +++ b/modules/frontend/src/pages/SettingsPage/SettingsPage.tsx @@ -1,154 +1,207 @@ -// import React, { useEffect, useState } from "react"; -// import { updateUser, getUsersId } from "../../api"; -// import { useNavigate } from "react-router-dom"; +import React, { useEffect, useState, useRef } from "react"; +import { updateUser, getUsersId, postMediaUpload } from "../../api"; +import { useNavigate } from "react-router-dom"; -// export const SettingsPage: React.FC = () => { -// const navigate = useNavigate(); +export const SettingsPage: React.FC = () => { + const navigate = useNavigate(); + const fileInputRef = useRef(null); -// const userId = Number(localStorage.getItem("user_id")); -// const initialNickname = localStorage.getItem("user_name") || ""; -// const [mail, setMail] = useState(""); -// const [nickname, setNickname] = useState(initialNickname); -// const [dispName, setDispName] = useState(""); -// const [userDesc, setUserDesc] = useState(""); -// const [avatarId, setAvatarId] = useState(null); + const userId = Number(localStorage.getItem("user_id")); + + // Состояния для полей формы + const [mail, setMail] = useState(""); + const [nickname, setNickname] = useState(""); + const [dispName, setDispName] = useState(""); + const [userDesc, setUserDesc] = useState(""); + const [avatarId, setAvatarId] = useState(null); + const [avatarUrl, setAvatarUrl] = useState(null); -// const [loading, setLoading] = useState(false); -// const [success, setSuccess] = useState(null); -// const [error, setError] = useState(null); + const [loading, setLoading] = useState(false); + const [uploading, setUploading] = useState(false); + const [success, setSuccess] = useState(null); + const [error, setError] = useState(null); -// useEffect(() => { -// const fetch = async () => { -// const res = await getUsersId({ -// path: { user_id: String(userId) }, -// }); + // Загружаем текущие данные пользователя при входе + useEffect(() => { + const fetchUserData = async () => { + try { + const res = await getUsersId({ + path: { user_id: String(userId) }, + }); + if (res.data) { + setMail(res.data.mail || ""); + setNickname(res.data.nickname || ""); + setDispName(res.data.disp_name || ""); + setUserDesc(res.data.user_desc || ""); + setAvatarId(res.data.image?.id ?? null); + setAvatarUrl(res.data.image?.image_path ?? null); + } + } catch (err) { + console.error("Failed to fetch user:", err); + } + }; + fetchUserData(); + }, [userId]); -// setProfile(res.data); -// }; + // Обработка загрузки файла + const handleFileChange = async (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; -// fetch(); -// }, [userId]); + setUploading(true); + setError(null); -// const saveSettings = async (e: React.FormEvent) => { -// e.preventDefault(); -// setLoading(true); -// setSuccess(null); -// setError(null); + const formData = new FormData(); + formData.append("file", file); -// try { -// const res = await updateUser({ -// path: { user_id: userId }, -// body: { -// ...(mail ? { mail } : {}), -// ...(nickname ? { nickname } : {}), -// ...(dispName ? { disp_name: dispName } : {}), -// ...(userDesc ? { user_desc: userDesc } : {}), -// ...(avatarId !== undefined ? { avatar_id: avatarId } : {}), -// } -// }); + try { + const res = await postMediaUpload({ + body: formData, + // Сбрасываем заголовок, чтобы браузер сам поставил multipart/form-data + boundary + headers: { "Content-Type": undefined as any }, + }); -// // Обновляем локальное отображение username -// if (nickname) { -// localStorage.setItem("user_name", nickname); -// window.dispatchEvent(new Event("storage")); // чтобы Header обновился -// } + if (res.data && res.data.id) { + setAvatarId(res.data.id); + setAvatarUrl(res.data.image_path ?? null); // Для мгновенного превью + setSuccess("Image uploaded!"); + } + } catch (err: any) { + setError("Failed to upload image"); + } finally { + setUploading(false); + } + }; -// setSuccess("Settings updated!"); -// setTimeout(() => navigate("/profile"), 800); + const saveSettings = async (e: React.FormEvent) => { + e.preventDefault(); + setLoading(true); + setSuccess(null); + setError(null); -// } catch (err: any) { -// console.error(err); -// setError(err?.message || "Failed to update settings"); -// } finally { -// setLoading(false); -// } -// }; + try { + await updateUser({ + path: { user_id: userId }, + body: { + mail: mail || undefined, + nickname: nickname || undefined, + disp_name: dispName || undefined, + user_desc: userDesc || undefined, + avatar_id: avatarId, // Может быть числом или null для удаления + }, + }); -// return ( -//
-//

User Settings

+ localStorage.setItem("user_name", nickname); + window.dispatchEvent(new Event("storage")); -// {success &&
{success}
} -// {error &&
{error}
} + setSuccess("Settings updated successfully!"); + setTimeout(() => navigate("/profile"), 1000); + } catch (err: any) { + setError(err?.message || "Failed to update settings"); + } finally { + setLoading(false); + } + }; -//
-// {/* Email */} -//
-// -// setMail(e.target.value)} -// placeholder="example@mail.com" -// className="w-full px-4 py-2 border rounded-lg" -// /> -//
+ return ( +
+

User Settings

-// {/* Nickname */} -//
-// -// setNickname(e.target.value)} -// className="w-full px-4 py-2 border rounded-lg" -// /> -//
+ {success &&
{success}
} + {error &&
{error}
} -// {/* Display name */} -//
-// -// setDispName(e.target.value)} -// placeholder="Shown name" -// className="w-full px-4 py-2 border rounded-lg" -// /> -//
+
+
+ Avatar + {uploading && ( +
+ Uploading... +
+ )} +
+ +
+ + {avatarId && ( + + )} +
+ +
-// {/* Bio */} -//
-// -//