e.target === e.currentTarget && onClose()}>
+
+ );
+}
+
+// ─── Login form (inline modal) ──────────────────────────────────────────────
+function LoginFormInline({ saveAuth, onClose, onSwitch }) {
+ const [login, setLogin] = useState("");
+ const [password, setPassword] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState("");
+
+ const handleSubmit = async () => {
+ if (!login || !password) { setError("Введите логин и пароль"); return; }
+ setLoading(true); setError("");
+
+ try {
+ const res = await fetch(`${API_URL}/api/v1/auth/login`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ login, password }),
+ });
+
+ if (!res.ok) {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.message || "Неверный логин или пароль");
+ }
+
+ const { token, user } = await res.json();
+ saveAuth(user, token);
+ onClose();
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <>
+
+ {/* Header */}
+ setMode("register")}
+ />
+ : setMode("login")}
+ />
+ }
+
+
+
+ {mode === "login" ? "Вход в аккаунт" : "Регистрация"}
+
+
+
+
+ {mode === "login"
+ ?
+
+ { setLogin(e.target.value); setError(""); }}
+ autoComplete="off"
+ />
+
+
+
+
+ { setPassword(e.target.value); setError(""); }}
+ onKeyDown={e => e.key === "Enter" && handleSubmit()}
+ />
+
+
+ {error && {error}
} + ++ Нет аккаунта?{" "} + +
+ + ); +} + +// ─── Register form (inline modal) ────────────────────────────────────────── +function RegisterFormInline({ saveAuth, onClose, onSwitch }) { + const [form, setForm] = useState({ + name: "", login: "", password: "", password2: "", + }); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [errors, setErrors] = useState({}); + + const setField = useCallback((key, val) => { + setForm(p => ({ ...p, [key]: val })); + setErrors(p => ({ ...p, [key]: "" })); + }, []); + + const validate = () => { + const e = {}; + if (!form.name.trim()) e.name = "Введите имя"; + if (!form.login.trim()) e.login = "Введите логин"; + else if (form.login.length < 3) e.login = "Минимум 3 символа"; + if (form.password.length < 6) e.password = "Минимум 6 символов"; + if (form.password !== form.password2) e.password2 = "Пароли не совпадают"; + setErrors(e); + return !Object.keys(e).length; + }; + + const handleSubmit = async () => { + if (!validate()) return; + setLoading(true); setError(""); + + try { + // 1. Регистрация + const regRes = await fetch(`${API_URL}/api/v1/auth/register`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + name: form.name, + login: form.login, + password: form.password, + }), + }); + + const regData = await regRes.json(); + if (!regRes.ok) throw new Error(regData.message || "Ошибка регистрации"); + + // 2. Автоматический вход после регистрации + const loginRes = await fetch(`${API_URL}/api/v1/auth/login`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ login: form.login, password: form.password }), + }); + + if (!loginRes.ok) throw new Error("Аккаунт создан. Войдите вручную."); + + const { token, user } = await loginRes.json(); + saveAuth(user, token); + onClose(); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + return ( + <> +
+
+ setField("name", e.target.value)}
+ />
+ {errors.name &&
+
+ {errors.name}
} +
+
+ setField("login", e.target.value)}
+ />
+ {errors.login &&
+
+ {errors.login}
} +
+
+
+ {error &&
+
+ setField("password", e.target.value)}
+ />
+ {errors.password &&
+ {errors.password}
} +
+
+ setField("password2", e.target.value)}
+ />
+ {errors.password2 &&
+ {errors.password2}
} +{error}
} + ++ Уже есть аккаунт?{" "} + +
+ + ); +} + +// ─── Shared submit button ────────────────────────────────────────────────── +function SubmitButton({ loading, label, onClick }) { + return ( + + ); +} diff --git a/src/components/ChatListPage.jsx b/src/components/ChatListPage.jsx new file mode 100644 index 0000000..ec4a9e3 --- /dev/null +++ b/src/components/ChatListPage.jsx @@ -0,0 +1,118 @@ +import { useEffect, useCallback } from "react"; +import { useNavigate } from "react-router-dom"; +import { useChats } from "../hooks/useChats"; +import { useAuthContext } from "../context/AuthContext"; +import { useUnread } from "../context/UnreadContext"; +import { getPostForChat } from "../stores/chatPostStore"; +import { API_URL } from "../config/authConstants"; +import { useDeleteChat } from "../hooks/useDeleteChat"; +import TrashIcon from "./icons/TrashIcon"; + +export default function ChatListPage() { + const navigate = useNavigate(); + const { chats, loading, fetchChats } = useChats(); + const { isAuthenticated } = useAuthContext(); + const { updateFromChats, unreadMap } = useUnread(); + const { deleteChat } = useDeleteChat(); + + useEffect(() => { + if (isAuthenticated) { + fetchChats(); + } + }, [isAuthenticated, fetchChats]); + + useEffect(() => { + if (chats.length > 0) { + updateFromChats(chats); + } + }, [chats, updateFromChats]); + + const handleDeleteChat = useCallback(async (chatId) => { + if (!window.confirm("Вы уверены, что хотите удалить этот чат?")) return; + const ok = await deleteChat(chatId); + if (ok) fetchChats(); + }, [deleteChat, fetchChats]); + + if (!isAuthenticated) { + return ( +
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Чаты
+
+ Войдите, чтобы видеть чаты
+
+
+ );
+}
diff --git a/src/components/ChatPage.jsx b/src/components/ChatPage.jsx
new file mode 100644
index 0000000..6b572aa
--- /dev/null
+++ b/src/components/ChatPage.jsx
@@ -0,0 +1,148 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useChats } from "../hooks/useChats";
+import { useChatSocket } from "../hooks/useChatSocket";
+import { getPostForChat } from "../stores/chatPostStore";
+import { setActiveChatId } from "../stores/activeChatStore";
+import { useUnread } from "../context/UnreadContext";
+import { API_URL } from "../config/authConstants";
+import Picker from "@emoji-mart/react";
+import emojiData from "@emoji-mart/data";
+
+export default function ChatPage() {
+ const { chatId } = useParams();
+ const navigate = useNavigate();
+ const { fetchMessages, markAsRead } = useChats();
+ const { clearChatUnread } = useUnread();
+ const [messages, setMessages] = useState([]);
+ const [input, setInput] = useState("");
+ const [showEmoji, setShowEmoji] = useState(false);
+ const messagesEndRef = useRef(null);
+ const emojiPickerRef = useRef(null);
+
+ useEffect(() => {
+ const handleClick = (e) => {
+ if (emojiPickerRef.current && !emojiPickerRef.current.contains(e.target)) {
+ setShowEmoji(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClick);
+ return () => document.removeEventListener("mousedown", handleClick);
+ }, []);
+
+ const myUserId = (() => {
+ try { return JSON.parse(localStorage.getItem("user"))?.id; }
+ catch { return null; }
+ })();
+
+ const handleIncoming = useCallback((msg) => {
+ setMessages((prev) => [...prev, msg]);
+ }, []);
+
+ const { sendMessage, connected } = useChatSocket(chatId, handleIncoming);
+
+ useEffect(() => {
+ if (chatId) {
+ setActiveChatId(chatId);
+ fetchMessages(chatId).then(setMessages);
+ markAsRead(chatId);
+ clearChatUnread(chatId);
+ }
+ return () => setActiveChatId(null);
+ }, [chatId, fetchMessages, markAsRead, clearChatUnread]);
+
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+ }, [messages]);
+
+ const handleSend = (e) => {
+ e.preventDefault();
+ if (!input.trim()) return;
+ sendMessage(input);
+ setInput("");
+ };
+
+ const handleEmojiSelect = (emoji) => {
+ setInput((prev) => prev + emoji.native);
+ };
+
+ const post = getPostForChat(chatId);
+ const postImg = post?.images?.[0] ? `${API_URL}${post.images[0]}` : null;
+
+ return (
+
+
+
+
+
+
+ Чаты
+
+
+ {loading && (
+
+ Загрузка...
+ )}
+
+ {!loading && chats.length === 0 && (
+ У вас пока нет чатов
+ )}
+
+ {!loading && chats.map((chat) => {
+ const post = getPostForChat(chat.id);
+ const title = post?.title || chat.otherUser?.name || "Пользователь";
+ const imgSrc = post?.images?.[0] ? `${API_URL}${post.images[0]}` : null;
+ const emoji = post?.emoji;
+ const unreadCount = unreadMap[chat.id] ?? chat.unreadCount ?? chat.unreadMessages ?? 0;
+ return (
+ 0 ? " unread" : ""}`}
+ onClick={() => navigate(`/chats/${chat.id}`)}
+ >
+
+ );
+ })}
+
+ {imgSrc ? (
+ 
+ ) : (
+ emoji || chat.otherUser?.name?.[0] || "?"
+ )}
+
+
+
+ {unreadCount > 0 && (
+ {title}
+
+ {chat.lastMessage?.content || "Нет сообщений"}
+
+ {unreadCount > 99 ? "99+" : unreadCount}
+ )}
+
+
+
+ );
+}
diff --git a/src/components/ImageViewer.jsx b/src/components/ImageViewer.jsx
new file mode 100644
index 0000000..f7af9e7
--- /dev/null
+++ b/src/components/ImageViewer.jsx
@@ -0,0 +1,66 @@
+import { useState, useCallback, useEffect } from "react";
+import CloseIcon from "./icons/CloseIcon";
+import { API_URL } from "../config/authConstants";
+
+export default function ImageViewer({ images, initialIndex = 0, onClose }) {
+ const [index, setIndex] = useState(initialIndex);
+
+ const urls = images.map(u => (u.startsWith("http") ? u : `${API_URL}${u}`));
+
+ const next = useCallback(() => {
+ setIndex(i => (i + 1) % urls.length);
+ }, [urls.length]);
+
+ const prev = useCallback(() => {
+ setIndex(i => (i - 1 + urls.length) % urls.length);
+ }, [urls.length]);
+
+ const handleImgClick = useCallback(() => {
+ next();
+ }, [next]);
+
+ useEffect(() => {
+ const handleKey = (e) => {
+ if (e.key === "Escape") onClose();
+ if (e.key === "ArrowRight") next();
+ if (e.key === "ArrowLeft") prev();
+ };
+ window.addEventListener("keydown", handleKey);
+ return () => window.removeEventListener("keydown", handleKey);
+ }, [onClose, next, prev]);
+
+ useEffect(() => {
+ setIndex(initialIndex);
+ }, [initialIndex]);
+
+ if (!urls.length) return null;
+
+ return (
+
+
+
+
+
+
+
+ {postImg ? (
+ 
+ ) : (
+ post?.emoji || "📋"
+ )}
+
+ {post?.title || "Чат"}
+
+ {connected ? "В сети" : "Отключено"}
+
+
+ {messages.length === 0 && (
+
+
+ Нет сообщений
+ )}
+ {messages.map((m) => (
+
+ {m.content}
+
+ ))}
+
+
+ {showEmoji && (
+
+
+
+ )}
+
+ e.target === e.currentTarget && onClose()}>
+
+
+
+ );
+}
diff --git a/src/components/PostOnFeed.jsx b/src/components/PostOnFeed.jsx
index cc61ec0..97e8ef3 100644
--- a/src/components/PostOnFeed.jsx
+++ b/src/components/PostOnFeed.jsx
@@ -17,7 +17,11 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
const handleContact = async (e) => {
e.stopPropagation();
try {
- const chat = await createOrGetChat(ad.userId, ad.id);
+ const chat = await createOrGetChat(ad.userId, ad.id, {
+ title: ad.title,
+ images: ad.images,
+ emoji: ad.emoji,
+ });
navigate(`/chats/${chat.id}`);
} catch (err) {
console.error(err);
diff --git a/src/components/ReviewsPage.jsx b/src/components/ReviewsPage.jsx
new file mode 100644
index 0000000..2c5c0a7
--- /dev/null
+++ b/src/components/ReviewsPage.jsx
@@ -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 "./icons/MenuIcon";
+import Sidebar from "./Sidebar";
+import ProfileAvatar from "./profile/ProfileAvatar";
+import { ProfileModal } from "./profile";
+import AuthModal from "./AuthModal";
+import "../styles/reviews.css";
+
+/* ── Star rating sub-component ── */
+function StarRating({ value, onChange, size = 28, readOnly = false }) {
+ const [hovered, setHovered] = useState(0);
+
+ return (
+
+ 
+
+ {urls.length > 1 && (
+
+
+ {urls.map((_, i) => (
+
+ )}
+
+ {[1, 2, 3, 4, 5].map((star) => {
+ const filled = star <= (hovered || value);
+ return (
+
+ );
+ })}
+
+ );
+}
+
+/* ── Single review card ── */
+function ReviewCard({ review }) {
+ const date = review.createdAt
+ ? new Date(review.createdAt).toLocaleDateString("ru-RU", {
+ day: "numeric", month: "long", year: "numeric",
+ })
+ : "";
+
+ return (
+
+
+ );
+}
+
+/* ── 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 (
+
+
+ {review.text &&
+ {review.authorName ? review.authorName.charAt(0).toUpperCase() : "?"}
+
+
+ {review.authorName || "Аноним"}
+ {date && {date}}
+
+
+
+ {review.text}
} +