119 lines
3.6 KiB
React
119 lines
3.6 KiB
React
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import PageLayout from "../components/PageLayout";
|
|
import { getUserInfo, getUserOrders } from "../api";
|
|
import OrderCard from "../components/OrderCard";
|
|
|
|
export default function Profile() {
|
|
const [user, setUser] = useState(null);
|
|
const [orders, setOrders] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
Promise.all([getUserInfo(), getUserOrders()])
|
|
.then(([userRes, ordersRes]) => {
|
|
setUser(userRes.data);
|
|
setOrders(ordersRes.data);
|
|
})
|
|
.catch(() => { })
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("user");
|
|
navigate("/");
|
|
};
|
|
|
|
const statusLabels = {
|
|
new: "Новый",
|
|
packed: "Собирают",
|
|
delivered: "Доставлен",
|
|
cancel: "Отменен",
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<PageLayout>
|
|
<p className="text-white p-6 md:p-16">Загрузка..</p>
|
|
</PageLayout>
|
|
);
|
|
}
|
|
|
|
const activeOrders = orders.filter(
|
|
(o) => o.status === "new" || o.status === "packed",
|
|
);
|
|
|
|
const completedOrders = orders.filter(
|
|
(o) => o.status === "delivered" || o.status === "cancel",
|
|
);
|
|
return (
|
|
<PageLayout>
|
|
<main className="px-6 md:px-16 grow w-full mb-10 text-white">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h1 className="text-2xl md:text-4xl font-medium uppercase">
|
|
Личный кабинет
|
|
</h1>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="text-white/60 hover:text-red-400 transition-colors text-sm uppercase"
|
|
>
|
|
Выйти
|
|
</button>
|
|
</div>
|
|
|
|
<section className="mb-10 bg-white/5 rounded-lg p-6 border border-white/10">
|
|
<h2 className="text-white/80 space-y-2">
|
|
{user && (
|
|
<div className="text-white/80 space-y-2">
|
|
<p>
|
|
Имя: {user.first_name || "не указано"}{" "}
|
|
{user.last_name || "не указано"}
|
|
</p>
|
|
<p>Телефон: {user.phone || "не указано"}</p>
|
|
<p>Логин: {user.username}</p>
|
|
</div>
|
|
)}
|
|
</h2>
|
|
</section>
|
|
<section className="mb-10">
|
|
<h2 className="text-xl font-medium mb-4">Активные заказы</h2>
|
|
{activeOrders.length === 0 ? (
|
|
<p className="text-white/60">Нет активных заказов</p>
|
|
) : (
|
|
<div className="flex flex-col gap-4">
|
|
{activeOrders.map((order) => (
|
|
<OrderCard
|
|
key={order.id}
|
|
order={order}
|
|
statusLabels={statusLabels}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-xl font-medium mb-4 text-white/50">
|
|
Завершённые
|
|
</h2>
|
|
{completedOrders.length === 0 ? (
|
|
<p className="text-white/60">Нет завершённых заказов</p>
|
|
) : (
|
|
<div className="flex flex-col gap-4">
|
|
{completedOrders.map((order) => (
|
|
<OrderCard
|
|
key={order.id}
|
|
order={order}
|
|
statusLabels={statusLabels}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
</PageLayout>
|
|
);
|
|
}
|