feat: first settings page version

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 ? <UserPage userId={userId} /> : <LoginPage />}
         />
 
+        {/*settings*/}
+        <Route
+          path="/settings"
+          element={userId ? <SettingsPage /> : <LoginPage />}
+        />
+
         {/* titles */}
         <Route path="/titles" element={<TitlesPage />} />
         <Route path="/titles/:id" element={<TitlePage />} />

modules/frontend/src/pages/SettingsPage/SettingsPage.tsx

@@ -1,154 +1,207 @@
-// import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
-// import { updateUser, getUsersId } from "../../api";
+import { updateUser, getUsersId, postMediaUpload } from "../../api";
-// import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
-// export const SettingsPage: React.FC = () => {
+export const SettingsPage: React.FC = () => {
-//   const navigate = useNavigate();
+  const navigate = useNavigate();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-//   const userId = Number(localStorage.getItem("user_id"));
+  const userId = Number(localStorage.getItem("user_id"));
-//   const initialNickname = localStorage.getItem("user_name") || "";
+  
-//   const [mail, setMail] = useState("");
+  // Состояния для полей формы
-//   const [nickname, setNickname] = useState(initialNickname);
+  const [mail, setMail] = useState("");
-//   const [dispName, setDispName] = useState("");
+  const [nickname, setNickname] = useState("");
-//   const [userDesc, setUserDesc] = useState("");
+  const [dispName, setDispName] = useState("");
-//   const [avatarId, setAvatarId] = useState<number | null>(null);
+  const [userDesc, setUserDesc] = useState("");
+  const [avatarId, setAvatarId] = useState<number | null>(null);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
 
-//   const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-//   const [success, setSuccess] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
-//   const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-// useEffect(() => {
+  // Загружаем текущие данные пользователя при входе
-//   const fetch = async () => {
+  useEffect(() => {
-//     const res = await getUsersId({
+    const fetchUserData = async () => {
-//       path: { user_id: String(userId) },
+      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<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-//   fetch();
+    setUploading(true);
-// }, [userId]);
+    setError(null);
 
-//   const saveSettings = async (e: React.FormEvent) => {
+    const formData = new FormData();
-//     e.preventDefault();
+    formData.append("file", file);
-//     setLoading(true);
-//     setSuccess(null);
-//     setError(null);
 
-//     try {
+    try {
-//       const res = await updateUser({
+      const res = await postMediaUpload({
-//         path: { user_id: userId },
+        body: formData,
-//         body: {
+        // Сбрасываем заголовок, чтобы браузер сам поставил multipart/form-data + boundary
-//           ...(mail ? { mail } : {}),
+        headers: { "Content-Type": undefined as any },
-//           ...(nickname ? { nickname } : {}),
+      });
-//           ...(dispName ? { disp_name: dispName } : {}),
-//           ...(userDesc ? { user_desc: userDesc } : {}),
-//           ...(avatarId !== undefined ? { avatar_id: avatarId } : {}),
-//         }
-//       });
 
-//       // Обновляем локальное отображение username
+      if (res.data && res.data.id) {
-//       if (nickname) {
+        setAvatarId(res.data.id);
-//         localStorage.setItem("user_name", nickname);
+        setAvatarUrl(res.data.image_path ?? null); // Для мгновенного превью
-//         window.dispatchEvent(new Event("storage")); // чтобы Header обновился
+        setSuccess("Image uploaded!");
-//       }
+      }
+    } catch (err: any) {
+      setError("Failed to upload image");
+    } finally {
+      setUploading(false);
+    }
+  };
 
-//       setSuccess("Settings updated!");
+  const saveSettings = async (e: React.FormEvent) => {
-//       setTimeout(() => navigate("/profile"), 800);
+    e.preventDefault();
+    setLoading(true);
+    setSuccess(null);
+    setError(null);
 
-//     } catch (err: any) {
+    try {
-//       console.error(err);
+      await updateUser({
-//       setError(err?.message || "Failed to update settings");
+        path: { user_id: userId },
-//     } finally {
+        body: {
-//       setLoading(false);
+          mail: mail || undefined,
-//     }
+          nickname: nickname || undefined,
-//   };
+          disp_name: dispName || undefined,
+          user_desc: userDesc || undefined,
+          avatar_id: avatarId, // Может быть числом или null для удаления
+        },
+      });
 
-//   return (
+      localStorage.setItem("user_name", nickname);
-//     <div className="max-w-2xl mx-auto p-6">
+      window.dispatchEvent(new Event("storage"));
-//       <h1 className="text-3xl font-bold mb-6">User Settings</h1>
 
-//       {success && <div className="text-green-600 mb-4">{success}</div>}
+      setSuccess("Settings updated successfully!");
-//       {error && <div className="text-red-600 mb-4">{error}</div>}
+      setTimeout(() => navigate("/profile"), 1000);
+    } catch (err: any) {
+      setError(err?.message || "Failed to update settings");
+    } finally {
+      setLoading(false);
+    }
+  };
 
-//       <form className="space-y-6" onSubmit={saveSettings}>
+  return (
-//         {/* Email */}
+    <div className="max-w-2xl mx-auto p-6">
-//         <div>
+      <h1 className="text-3xl font-bold mb-6">User Settings</h1>
-//           <label className="block text-sm font-medium mb-1">Email</label>
-//           <input
-//             type="email"
-//             value={mail}
-//             onChange={(e) => setMail(e.target.value)}
-//             placeholder="example@mail.com"
-//             className="w-full px-4 py-2 border rounded-lg"
-//           />
-//         </div>
 
-//         {/* Nickname */}
+      {success && <div className="p-3 bg-green-100 text-green-700 rounded-lg mb-4">{success}</div>}
-//         <div>
+      {error && <div className="p-3 bg-red-100 text-red-700 rounded-lg mb-4">{error}</div>}
-//           <label className="block text-sm font-medium mb-1">Nickname</label>
-//           <input
-//             type="text"
-//             value={nickname}
-//             onChange={(e) => setNickname(e.target.value)}
-//             className="w-full px-4 py-2 border rounded-lg"
-//           />
-//         </div>
 
-//         {/* Display name */}
+      <div className="mb-8 flex flex-col items-center p-4 border rounded-xl bg-gray-50">
-//         <div>
+        <div className="relative w-32 h-32 mb-4 group">
-//           <label className="block text-sm font-medium mb-1">Display name</label>
+          <img
-//           <input
+            src={avatarUrl || "https://via.placeholder.com/150"}
-//             type="text"
+            alt="Avatar"
-//             value={dispName}
+            className="w-full h-full object-cover rounded-full border-4 border-white shadow-md"
-//             onChange={(e) => setDispName(e.target.value)}
+          />
-//             placeholder="Shown name"
+          {uploading && (
-//             className="w-full px-4 py-2 border rounded-lg"
+            <div className="absolute inset-0 flex items-center justify-center bg-black/40 rounded-full text-white text-xs">
-//           />
+              Uploading...
-//         </div>
+            </div>
+          )}
+        </div>
+        
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-100"
+          >
+            Change photo
+          </button>
+          {avatarId && (
+            <button
+              type="button"
+              onClick={() => { setAvatarId(null); setAvatarUrl(null); }}
+              className="px-4 py-2 text-sm text-red-600 hover:text-red-700"
+            >
+              Remove
+            </button>
+          )}
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          accept="image/*"
+          onChange={handleFileChange}
+        />
+      </div>
 
-//         {/* Bio */}
+      <form className="space-y-6" onSubmit={saveSettings}>
-//         <div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-//           <label className="block text-sm font-medium mb-1">Bio</label>
+          <div>
-//           <textarea
+            <label className="block text-sm font-medium mb-1">Nickname</label>
-//             value={userDesc}
+            <input
-//             onChange={(e) => setUserDesc(e.target.value)}
+              type="text"
-//             rows={4}
+              value={nickname}
-//             className="w-full px-4 py-2 border rounded-lg resize-none"
+              onChange={(e) => setNickname(e.target.value)}
-//           />
+              className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
-//         </div>
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Display Name</label>
+            <input
+              type="text"
+              value={dispName}
+              onChange={(e) => setDispName(e.target.value)}
+              className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+            />
+          </div>
+        </div>
 
-//         {/* Avatar ID */}
+        <div>
-//         <div>
+          <label className="block text-sm font-medium mb-1">Email</label>
-//           <label className="block text-sm font-medium mb-1">Avatar ID</label>
+          <input
-//           <input
+            type="email"
-//             type="number"
+            value={mail}
-//             value={avatarId ?? ""}
+            onChange={(e) => setMail(e.target.value)}
-//             onChange={(e) => {
+            className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
-//               const v = e.target.value;
+          />
-//               setAvatarId(v === "" ? null : Number(v));
+        </div>
-//             }}
-//             placeholder="Image ID"
-//             className="w-full px-4 py-2 border rounded-lg"
-//           />
 
-//           <button
+        <div>
-//             type="button"
+          <label className="block text-sm font-medium mb-1">Bio</label>
-//             onClick={() => setAvatarId(null)}
+          <textarea
-//             className="text-sm text-blue-600 mt-1 hover:underline"
+            value={userDesc}
-//           >
+            onChange={(e) => setUserDesc(e.target.value)}
-//             Remove avatar
+            rows={4}
-//           </button>
+            className="w-full px-4 py-2 border rounded-lg resize-none focus:ring-2 focus:ring-blue-500 outline-none"
-//         </div>
+          />
+        </div>
 
-//         <button
+        <button
-//           type="submit"
+          type="submit"
-//           disabled={loading}
+          disabled={loading || uploading}
-//           className="w-full bg-blue-600 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 disabled:opacity-50"
+          className="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 disabled:opacity-50 transition-colors"
-//         >
+        >
-//           {loading ? "Saving..." : "Save changes"}
+          {loading ? "Saving Changes..." : "Save Settings"}
-//         </button>
+        </button>
-//       </form>
+      </form>
-//     </div>
+    </div>
-//   );
+  );
-// };
+};