added new start page

2026-07-06 23:59:48 +03:00
parent 538a7f65eb
commit abdb7c021c
17 changed files with 705 additions and 24 deletions
--- a/src/pages/ChatListPage.jsx
+++ b/src/pages/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 "../components/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 (
+      <div className="f-app">
+        <div className="chat-page">
+          <div className="chat-header">
+            <button className="chat-back-btn" onClick={() => navigate("/feed")}>
+              ←
+            </button>
+            <div className="chat-header-title">Чаты</div>
+            <div />
+          </div>
+          <div className="chat-empty-full">Войдите, чтобы видеть чаты</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="f-app">
+      <div className="chat-page">
+        <div className="chat-header">
+          <button className="chat-back-btn" onClick={() => navigate("/feed")}>
+            ←
+          </button>
+          <div className="chat-header-title">Чаты</div>
+          <div />
+        </div>
+
+        <div className="chat-list">
+          {loading && (
+            <div className="chat-empty-full">Загрузка...</div>
+          )}
+
+          {!loading && chats.length === 0 && (
+            <div className="chat-empty-full">У вас пока нет чатов</div>
+          )}
+
+          {!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 (
+              <div
+                key={chat.id}
+                className={`chat-list-item${unreadCount > 0 ? " unread" : ""}`}
+                onClick={() => navigate(`/chats/${chat.id}`)}
+              >
+                <div className="chat-list-avatar">
+                  {imgSrc ? (
+                    <img src={imgSrc} alt="" className="chat-list-avatar-img" />
+                  ) : (
+                    emoji || chat.otherUser?.name?.[0] || "?"
+                  )}
+                </div>
+                <div className="chat-list-info">
+                  <div className="chat-list-name">{title}</div>
+                  <div className="chat-list-preview">
+                    {chat.lastMessage?.content || "Нет сообщений"}
+                  </div>
+                </div>
+                {unreadCount > 0 && (
+                  <div className="chat-list-unread-badge">{unreadCount > 99 ? "99+" : unreadCount}</div>
+                )}
+                <button
+                  className="chat-list-delete-btn"
+                  title="Удалить чат"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDeleteChat(chat.id);
+                  }}
+                >
+                  <TrashIcon />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}