WIP API

2025-12-14 18:47:14 +05:00
parent bb833d956e
commit 433b9e896c
18 changed files with 2891 additions and 1260 deletions
--- a/app/valounterHistoryRequest/page.jsx
+++ b/app/valounterHistoryRequest/page.jsx
@@ -1,56 +1,148 @@
 "use client";

-import React, { useState } from "react";
-import { FaBell, FaUser, FaStar } from "react-icons/fa";
+import React, { useEffect, useState } from "react";
+import { FaBell, FaUser } from "react-icons/fa";
 import TabBar from "../components/TabBar";
 import RequestDetailsModal from "../components/ValounterRequestDetailsModal";

-const requests = [
-  {
-    id: 4,
-    title: "Приобрести продукты пенсионерке",
-    status: "Выполнена",
-    statusColor: "#71A5E9",
-    date: "До 28.11.2025",
-    time: "13:00",
-    createdAt: "28.11.2025",
-    description: "Купить продукты и принести по адресу.",
-  },
-  {
-    id: 5,
-    title: "Приобрести продукты пенсионерке",
-    status: "В процессе",
-    statusColor: "#E971E1",
-    date: "До 28.11.2025",
-    time: "13:00",
-    createdAt: "28.11.2025",
-    description: "Купить продукты и принести по адресу.",
-  },
-  {
-    id: 6,
-    title: "Приобрести продукты пенсионерке",
-    status: "В процессе",
-    statusColor: "#E971E1",
-    date: "До 28.11.2025",
-    time: "13:00",
-    createdAt: "28.11.2025",
-    description: "Купить продукты и принести по адресу.",
-  },
-  {
-    id: 7,
-    title: "Приобрести продукты пенсионерке",
-    status: "В процессе",
-    statusColor: "#E971E1",
-    date: "До 28.11.2025",
-    time: "13:00",
-    createdAt: "28.11.2025",
-    description: "Купить продукты и принести по адресу.",
-  },
-];
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+const statusMap = {
+  pending_moderation: { label: "На модерации", color: "#E9D171" },
+  approved: { label: "Принята", color: "#94E067" },
+  in_progress: { label: "В процессе", color: "#E971E1" },
+  completed: { label: "Выполнена", color: "#71A5E9" },
+  cancelled: { label: "Отменена", color: "#FF8282" },
+  rejected: { label: "Отклонена", color: "#FF8282" },
+};

 const HistoryRequestPage = () => {
+  const [userName, setUserName] = useState("Волонтёр");
+
+  const [requests, setRequests] = useState([]); // истории заявок волонтёра
  const [selectedRequest, setSelectedRequest] = useState(null);

+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  const getAccessToken = () => {
+    if (typeof window === "undefined") return null;
+    const saved = localStorage.getItem("authUser");
+    const authUser = saved ? JSON.parse(saved) : null;
+    return authUser?.accessToken || null;
+  };
+
+  // подгружаем имя
+  useEffect(() => {
+    const fetchProfile = async () => {
+      if (!API_BASE) return;
+      const token = getAccessToken();
+      if (!token) return;
+
+      try {
+        const res = await fetch(`${API_BASE}/users/me`, {
+          headers: {
+            Accept: "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        });
+        if (!res.ok) return;
+        const data = await res.json();
+        const fullName =
+          [data.first_name, data.last_name]
+            .filter(Boolean)
+            .join(" ")
+            .trim() || data.email;
+        setUserName(fullName);
+      } catch {
+        // оставляем дефолт
+      }
+    };
+
+    fetchProfile();
+  }, []);
+
+  // загружаем историю заявок волонтёра
+  useEffect(() => {
+    const fetchVolunteerRequests = async () => {
+      if (!API_BASE) {
+        setError("API_BASE_URL не задан");
+        setLoading(false);
+        return;
+      }
+      const token = getAccessToken();
+      if (!token) {
+        setError("Вы не авторизованы");
+        setLoading(false);
+        return;
+      }
+
+      try {
+        // вариант 1 (рекомендуется на бэке): отдельный эндпоинт, здесь предположим, что бек отдаёт RequestListItem[]
+        const res = await fetch(`${API_BASE}/requests/my?role=volunteer`, {
+          headers: {
+            Accept: "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        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(); // массив RequestListItem[file:519]
+
+        const mapped = data.map((item) => {
+          const m = statusMap[item.status] || {
+            label: item.status,
+            color: "#E2E2E2",
+          };
+
+          const created = new Date(item.created_at);
+          const createdAt = created.toLocaleDateString("ru-RU");
+          const time = created.toLocaleTimeString("ru-RU", {
+            hour: "2-digit",
+            minute: "2-digit",
+          });
+
+          return {
+            id: item.id,
+            title: item.title,
+            status: m.label,
+            statusColor: m.color,
+            createdAt,
+            date: createdAt,
+            time,
+            description: item.description,
+            address: item.address,
+            city: item.city,
+            requesterName: item.requester_name,
+            requestTypeName: item.request_type_name,
+            rawStatus: item.status,
+          };
+        });
+
+        setRequests(mapped);
+        setLoading(false);
+      } catch (e) {
+        setError(e.message || "Ошибка сети");
+        setLoading(false);
+      }
+    };
+
+    fetchVolunteerRequests();
+  }, []);
+
  const handleOpen = (req) => {
    setSelectedRequest(req);
  };
@@ -69,7 +161,7 @@ const HistoryRequestPage = () => {
              <FaUser className="text-white text-sm" />
            </div>
            <p className="font-montserrat font-extrabold text-[20px] leading-[11px] text-white">
-              Александр
+              {userName}
            </p>
          </div>
          <button
@@ -84,14 +176,32 @@ const HistoryRequestPage = () => {
          История заявок
        </h1>

+        {error && (
+          <div className="mb-2 bg-red-500 text-white text-xs font-montserrat px-3 py-2 rounded-lg">
+            {error}
+          </div>
+        )}
+
        {/* Список заявок */}
        <main className="space-y-3 overflow-y-auto pr-1 max-h-[80vh]">
+          {loading && (
+            <p className="text-white text-sm font-montserrat">
+              Загрузка заявок...
+            </p>
+          )}
+
+          {!loading && requests.length === 0 && !error && (
+            <p className="text-white text-sm font-montserrat">
+              У вас пока нет заявок
+            </p>
+          )}
+
          {requests.map((req) => (
            <button
              key={req.id}
              type="button"
              onClick={() => handleOpen(req)}
-              className="w-full text-left bg-white rounded-xl px-3 py-2 flex flex-col gap-1"
+              className="w-full text-left bg-white rounded-xl px-3.py-2 flex flex-col gap-1"
            >
              {/* верхняя строка: статус + дата/время */}
              <div className="flex items-center justify-between gap-2">
@@ -117,7 +227,7 @@ const HistoryRequestPage = () => {
              </p>

              {/* Кнопка "Развернуть" */}
-              <div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex items-center justify-center">
+              <div className="mt-2 w-full bg-[#94E067] rounded-lg py-3 flex.items-center justify-center">
                <span className="font-montserrat font-bold text-[15px] leading-[18px] text-white">
                  Развернуть
                </span>
@@ -138,91 +248,3 @@ const HistoryRequestPage = () => {
 };

 export default HistoryRequestPage;
-
-// const RequestDetailsModal = ({ request, onClose }) => {
-//   const isDone = request.status === "Выполнена";
-
-//   return (
-//     <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4">
-//       <div className="w-full max-w-sm bg-[#90D2F9] rounded-2xl p-3 relative">
-//         {/* Белая карточка */}
-//         <div className="bg-white rounded-xl p-3 flex flex-col gap-3">
-//           {/* Шапка попапа */}
-//           <div className="flex items-center justify-between mb-1">
-//             <button
-//               type="button"
-//               onClick={onClose}
-//               className="text-white bg-[#90D2F9] w-7 h-7 rounded-full flex items-center justify-center text-sm"
-//             >
-//               ←
-//             </button>
-//             <p className="flex-1 text-center font-montserrat font-extrabold text-[15px] text-white">
-//               Заявка от {request.createdAt}
-//             </p>
-//             <span className="w-7" />
-//           </div>
-
-//           {/* Статус + срок */}
-//           <div className="flex items-center justify-between">
-//             <span
-//               className="inline-flex items-center justify-center px-2 py-0.5 rounded-full font-montserrat text-[8px] font-light text-black"
-//               style={{ backgroundColor: "#71A5E9" }}
-//             >
-//               Выполнена
-//             </span>
-//             <div className="text-right leading-tight">
-//               <p className="font-montserrat text-[8px] text-black">
-//                 До {request.date.replace("До ", "")}
-//               </p>
-//               <p className="font-montserrat text-[8px] text-black">
-//                 {request.time}
-//               </p>
-//             </div>
-//           </div>
-
-//           {/* Название задачи */}
-//           <p className="font-montserrat font-semibold text-[12px] leading-[15px] text-black">
-//             {request.title}
-//           </p>
-
-//           {/* Блок отзыва */}
-//           {isDone && (
-//             <div className="bg-[#72B8E2] rounded-lg p-2 flex flex-col gap-2">
-//               <p className="font-montserrat font-bold text-[10px] text-white">
-//                 Отзыв
-//               </p>
-//               <p className="font-montserrat text-[10px] text-white">
-//                 Здесь будет текст отзыва с бэка.
-//               </p>
-//             </div>
-//           )}
-
-//           {/* Оценка волонтера */}
-//           <div className="mt-1">
-//             <p className="font-montserrat font-semibold text-[12px] text-black mb-1">
-//               Оценить волонтера
-//             </p>
-//             <div className="flex gap-1">
-//               {[1, 2, 3, 4, 5].map((star) => (
-//                 <FaStar key={star} className="text-[#F6E168]" size={20} />
-//               ))}
-//             </div>
-//           </div>
-
-//           {/* Кнопка оставить отзыв */}
-//           {isDone && (
-//             <button
-//               type="button"
-//               className="mt-3 w-full bg-[#94E067] rounded-lg py-2 flex items-center justify-center"
-//             >
-//               <span className="font-montserrat font-bold text-[14px] text-white">
-//                 Оставить отзыв
-//               </span>
-//             </button>
-//           )}
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-