WIP API

app/ProfilePage/page.jsx

@@ -1,16 +1,88 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { FaUserCircle, FaStar } from "react-icons/fa";
 import TabBar from "../components/TabBar";
 
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
+
 const ProfilePage = () => {
   const router = useRouter();
 
-  const fullName = "Иванов Александр Сергеевич";
-  const birthDate = "12.03.1990";
-  const rating = 4.8;
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      if (!API_BASE) {
+        setError("API_BASE_URL не задан");
+        setLoading(false);
+        return;
+      }
+
+      const saved =
+        typeof window !== "undefined"
+          ? localStorage.getItem("authUser")
+          : null;
+      const authUser = saved ? JSON.parse(saved) : null;
+      const accessToken = authUser?.accessToken;
+      if (!accessToken) {
+        setError("Вы не авторизованы");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const res = await fetch(`${API_BASE}/users/me`, {
+          headers: {
+            Accept: "application/json",
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+
+        if (!res.ok) {
+          let msg = "Не удалось загрузить профиль";
+          try {
+            const data = await res.json();
+            if (data.error) msg = data.error;
+          } catch {
+            const text = await res.text();
+            if (text) msg = text;
+          }
+          setError(msg);
+          setLoading(false);
+          return;
+        }
+
+        const data = await res.json(); // UserProfile[file:519]
+        setProfile(data);
+        setLoading(false);
+      } catch (e) {
+        setError(e.message || "Ошибка сети");
+        setLoading(false);
+      }
+    };
+
+    fetchProfile();
+  }, []);
+
+  const handleLogout = () => {
+    // опционально: запрос /auth/logout, если используешь[file:519]
+    localStorage.removeItem("authUser");
+    router.push("/");
+  };
+
+  const fullName =
+    profile &&
+    [profile.first_name, profile.last_name].filter(Boolean).join(" ").trim();
+
+  const rating = profile?.volunteer_rating ?? 0;
+  const email = profile?.email || "—";
+  const phone = profile?.phone || "—";
+  const address = profile?.address || "Адрес не указан";
+  const city = profile?.city || "";
 
   return (
     <div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
@@ -32,16 +104,25 @@ const ProfilePage = () => {
 
         {/* Карточка профиля */}
         <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
+          {/* Ошибка / загрузка */}
+          {error && (
+            <p className="w-full text-center text-xs font-montserrat text-red-500">
+              {error}
+            </p>
+          )}
+          {loading && !error && (
+            <p className="w-full text-center text-xs font-montserrat text-black">
+              Загрузка профиля...
+            </p>
+          )}
+
           {/* Аватар */}
           <FaUserCircle className="text-[#72B8E2] w-20 h-20" />
 
           {/* ФИО и рейтинг */}
           <div className="text-center space-y-1">
-            {/* <p className="font-montserrat font-extrabold text-[16px] text-black">
-              ФИО
-            </p> */}
             <p className="font-montserrat font-bold text-[20px] text-black">
-              {fullName}
+              {fullName || email}
             </p>
 
             {/* Рейтинг + звезды */}
@@ -65,16 +146,17 @@ const ProfilePage = () => {
             </div>
           </div>
 
-          {/* Контакты и день рождения */}
+          {/* Контакты и адрес */}
           <div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
             <p className="font-montserrat text-[12px]">
-              Дата рождения: {birthDate}
+              Почта: {email}
             </p>
             <p className="font-montserrat text-[12px]">
-              Почта: example@mail.com
+              Телефон: {phone}
             </p>
             <p className="font-montserrat text-[12px]">
-              Телефон: +7 (900) 000-00-00
+              Адрес: {address}
+              {city ? `, ${city}` : ""}
             </p>
           </div>
 
@@ -91,6 +173,7 @@ const ProfilePage = () => {
             </button>
             <button
               type="button"
+              onClick={handleLogout}
               className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
             >
               <span className="font-montserrat font-extrabold text-[14px] text-white">