added new start page
This commit is contained in:
SlimusMinus
343
src/pages/ReviewsPage.jsx
Normal file
343
src/pages/ReviewsPage.jsx
Normal file
@@ -0,0 +1,343 @@
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { API_URL } from "../config/authConstants";
|
||||
import { useAuthContext } from "../context/AuthContext";
|
||||
import MenuIcon from "../components/icons/MenuIcon";
|
||||
import Sidebar from "../components/Sidebar";
|
||||
import ProfileAvatar from "../components/profile/ProfileAvatar";
|
||||
import { ProfileModal } from "../components/profile";
|
||||
import AuthModal from "../components/AuthModal";
|
||||
import "../styles/reviews.css";
|
||||
|
||||
/* ── Star rating sub-component ── */
|
||||
function StarRating({ value, onChange, size = 28, readOnly = false }) {
|
||||
const [hovered, setHovered] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="rv-stars">
|
||||
{[1, 2, 3, 4, 5].map((star) => {
|
||||
const filled = star <= (hovered || value);
|
||||
return (
|
||||
<svg
|
||||
key={star}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
className={`rv-star${filled ? " filled" : ""}${!readOnly ? " interactive" : ""}`}
|
||||
onClick={() => !readOnly && onChange(star)}
|
||||
onMouseEnter={() => !readOnly && setHovered(star)}
|
||||
onMouseLeave={() => !readOnly && setHovered(0)}
|
||||
>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
fill={filled ? "#f5a623" : "none"}
|
||||
stroke={filled ? "#f5a623" : "currentColor"}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Single review card ── */
|
||||
function ReviewCard({ review }) {
|
||||
const date = review.createdAt
|
||||
? new Date(review.createdAt).toLocaleDateString("ru-RU", {
|
||||
day: "numeric", month: "long", year: "numeric",
|
||||
})
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div className="rv-card">
|
||||
<div className="rv-card-head">
|
||||
<div className="rv-card-avatar">
|
||||
{review.authorName ? review.authorName.charAt(0).toUpperCase() : "?"}
|
||||
</div>
|
||||
<div className="rv-card-meta">
|
||||
<span className="rv-card-name">{review.authorName || "Аноним"}</span>
|
||||
{date && <span className="rv-card-date">{date}</span>}
|
||||
</div>
|
||||
<div className="rv-card-rating">
|
||||
<StarRating value={review.rating} readOnly size={18} />
|
||||
<span className="rv-card-rating-num">{review.rating}/5</span>
|
||||
</div>
|
||||
</div>
|
||||
{review.text && <p className="rv-card-text">{review.text}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Review form ── */
|
||||
function ReviewForm({ onSubmit, submitting }) {
|
||||
const [rating, setRating] = useState(0);
|
||||
const [text, setText] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (rating === 0) {
|
||||
setError("Поставьте оценку");
|
||||
return;
|
||||
}
|
||||
setError("");
|
||||
onSubmit({ rating, text: text.trim() });
|
||||
setRating(0);
|
||||
setText("");
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="rv-form" onSubmit={handleSubmit}>
|
||||
<h3 className="rv-form-title">Оставить отзыв</h3>
|
||||
<div className="rv-form-rating">
|
||||
<span className="rv-form-label">Оценка:</span>
|
||||
<StarRating value={rating} onChange={setRating} size={32} />
|
||||
</div>
|
||||
{error && <div className="rv-form-error">{error}</div>}
|
||||
<textarea
|
||||
className="rv-form-textarea"
|
||||
placeholder="Напишите ваш отзыв (необязательно)..."
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
maxLength={500}
|
||||
rows={4}
|
||||
/>
|
||||
<div className="rv-form-footer">
|
||||
<span className="rv-form-counter">{text.length}/500</span>
|
||||
<button className="rv-form-submit" type="submit" disabled={submitting}>
|
||||
{submitting ? "Отправка..." : "Отправить"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Main Reviews page ── */
|
||||
export default function ReviewsPage() {
|
||||
const navigate = useNavigate();
|
||||
const { user, isAuthenticated } = useAuthContext();
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [profileModalOpen, setProfileModalOpen] = useState(false);
|
||||
const [authModalOpen, setAuthModalOpen] = useState(false);
|
||||
const [activeNav] = useState("Отзывы");
|
||||
|
||||
const [reviews, setReviews] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
/* Profile data for sidebar */
|
||||
const profileData = user
|
||||
? {
|
||||
login: user.login || "",
|
||||
firstName: user.firstName || (user.name || "").trim().split(/\s+/)[0] || "",
|
||||
lastName: user.lastName || (user.name || "").trim().split(/\s+/).slice(1).join(" ") || "",
|
||||
email: user.email || "",
|
||||
phone: user.phone || "",
|
||||
avatar: user.avatar && user.avatar.startsWith("/") ? `${API_URL}${user.avatar}` : user.avatar || null,
|
||||
id: user.id,
|
||||
}
|
||||
: {};
|
||||
|
||||
/** Load reviews from backend */
|
||||
const loadReviews = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
console.log('[Reviews] GET request to:', `${API_URL}/api/v1/reviews`);
|
||||
const res = await fetch(`${API_URL}/api/v1/reviews`);
|
||||
console.log('[Reviews] Response status:', res.status, res.ok);
|
||||
if (!res.ok) throw new Error(`Ошибка ${res.status}`);
|
||||
const data = await res.json();
|
||||
console.log('[Reviews] Response data:', data);
|
||||
const list = Array.isArray(data) ? data : data.items ?? data.reviews ?? [];
|
||||
console.log('[Reviews] Parsed list:', list);
|
||||
setReviews(list);
|
||||
} catch (err) {
|
||||
console.error('[Reviews] Error:', err);
|
||||
setError(err.message || "Не удалось загрузить отзывы");
|
||||
// Show empty state with mock data hint
|
||||
setReviews([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { loadReviews(); }, [loadReviews]);
|
||||
|
||||
/** Submit a new review */
|
||||
const handleSubmitReview = useCallback(async ({ rating, text }) => {
|
||||
if (!isAuthenticated) {
|
||||
setAuthModalOpen(true);
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
console.log('[Reviews] POST request body:', { rating, text });
|
||||
const res = await fetch(`${API_URL}/api/v1/reviews`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ rating, text }),
|
||||
});
|
||||
console.log('[Reviews] POST response status:', res.status, res.ok);
|
||||
if (res.ok) {
|
||||
const responseData = await res.json();
|
||||
console.log('[Reviews] POST response data:', responseData);
|
||||
}
|
||||
if (!res.ok) throw new Error(`Ошибка ${res.status}`);
|
||||
// Reload reviews after successful submit
|
||||
await loadReviews();
|
||||
} catch (err) {
|
||||
// Fallback: add review locally if API is unavailable
|
||||
setReviews((prev) => [
|
||||
{
|
||||
id: Date.now(),
|
||||
authorName: profileData.firstName || "Вы",
|
||||
rating,
|
||||
text,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [isAuthenticated, loadReviews, profileData.firstName]);
|
||||
|
||||
/** Average rating */
|
||||
const avgRating = reviews.length
|
||||
? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1)
|
||||
: null;
|
||||
|
||||
/** Rating distribution */
|
||||
const distribution = [5, 4, 3, 2, 1].map((star) => ({
|
||||
star,
|
||||
count: reviews.filter((r) => r.rating === star).length,
|
||||
pct: reviews.length
|
||||
? Math.round((reviews.filter((r) => r.rating === star).length / reviews.length) * 100)
|
||||
: 0,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="f-app">
|
||||
<Sidebar
|
||||
open={sidebarOpen}
|
||||
activeNav={activeNav}
|
||||
onClose={() => setSidebarOpen(false)}
|
||||
onNavClick={(label) => {
|
||||
if (label === "Главная") navigate("/feed");
|
||||
}}
|
||||
isAuthenticated={isAuthenticated}
|
||||
onLoginClick={() => setAuthModalOpen(true)}
|
||||
onRulesClick={() => {}}
|
||||
/>
|
||||
|
||||
<div className="f-main">
|
||||
{/* Top bar */}
|
||||
<div className="f-topbar">
|
||||
<button className="f-menu-btn" onClick={() => setSidebarOpen((v) => !v)}>
|
||||
<MenuIcon />
|
||||
</button>
|
||||
<div className="f-topbar-center">
|
||||
<h1 className="rv-page-title">Отзывы</h1>
|
||||
</div>
|
||||
{/* Иконка профиля в правом углу */}
|
||||
{isAuthenticated ? (
|
||||
<div className="f-topbar-profile" onClick={() => setProfileModalOpen(true)}>
|
||||
<ProfileAvatar avatar={profileData.avatar} name={`${profileData.firstName || ""} ${profileData.lastName || ""}`} />
|
||||
</div>
|
||||
) : (
|
||||
<button className="f-login-btn" onClick={() => setAuthModalOpen(true)}>
|
||||
Войти
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rv-layout">
|
||||
{/* Left: Summary + form */}
|
||||
<div className="rv-sidebar">
|
||||
{/* Summary */}
|
||||
<div className="rv-summary">
|
||||
<div className="rv-summary-score">
|
||||
{avgRating ? (
|
||||
<>
|
||||
<span className="rv-summary-num">{avgRating}</span>
|
||||
<StarRating value={Math.round(Number(avgRating))} readOnly size={22} />
|
||||
</>
|
||||
) : (
|
||||
<span className="rv-summary-none">Пока нет отзывов</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="rv-summary-total">
|
||||
{reviews.length} {reviews.length === 1 ? "отзыв" : reviews.length < 5 ? "отзыва" : "отзывов"}
|
||||
</span>
|
||||
|
||||
{/* Distribution bars */}
|
||||
{reviews.length > 0 && (
|
||||
<div className="rv-distribution">
|
||||
{distribution.map(({ star, count, pct }) => (
|
||||
<div key={star} className="rv-dist-row">
|
||||
<span className="rv-dist-star">{star} ★</span>
|
||||
<div className="rv-dist-bar">
|
||||
<div className="rv-dist-fill" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<span className="rv-dist-count">{count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add review form */}
|
||||
{isAuthenticated ? (
|
||||
<ReviewForm onSubmit={handleSubmitReview} submitting={submitting} />
|
||||
) : (
|
||||
<div className="rv-login-prompt">
|
||||
<p>Войдите, чтобы оставить отзыв</p>
|
||||
<button className="rv-login-btn" onClick={() => setAuthModalOpen(true)}>
|
||||
Войти
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Reviews list */}
|
||||
<div className="rv-list">
|
||||
{loading ? (
|
||||
<div className="f-center">
|
||||
<div className="f-spinner-wrap">
|
||||
<div className="f-spinner" />
|
||||
Загружаем отзывы...
|
||||
</div>
|
||||
</div>
|
||||
) : error && reviews.length === 0 ? (
|
||||
<div className="f-center">
|
||||
<div className="f-center-icon">💬</div>
|
||||
<div className="f-center-title">Отзывов пока нет</div>
|
||||
<div className="f-center-sub">Станьте первым — оставьте отзыв о площадке</div>
|
||||
</div>
|
||||
) : (
|
||||
reviews.map((review) => <ReviewCard key={review.id} review={review} />)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profile modal */}
|
||||
{profileModalOpen && isAuthenticated && (
|
||||
<ProfileModal onClose={() => setProfileModalOpen(false)} initialData={profileData} />
|
||||
)}
|
||||
|
||||
{/* Auth modal */}
|
||||
{authModalOpen && (
|
||||
<AuthModal onClose={() => setAuthModalOpen(false)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user