fixed code

src/pages/ChatListPage.jsx

@@ -1,20 +1,20 @@
 import { useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from 'react-i18next';
 import { useChats } from "../hooks/useChats";
 import { useAuthContext } from "../context/AuthContext";
 import { useUnread } from "../context/UnreadContext";
 import { getPostForChat } from "../stores/chatPostStore";
-import { getImageUrl } from "../config/authConstants";
 import { useDeleteChat } from "../hooks/useDeleteChat";
-import TrashIcon from "../components/icons/TrashIcon";
-import { useTranslation } from 'react-i18next';
+import ChatHeader from "../components/chat/ChatHeader";
+import ChatListItem from "../components/chat/ChatListItem";
 
 export default function ChatListPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { chats, loading, fetchChats } = useChats();
   const { isAuthenticated } = useAuthContext();
-  const { updateFromChats, unreadMap } = useUnread();
+  const { unreadMap } = useUnread();
   const { deleteChat } = useDeleteChat();
 
   useEffect(() => {
@@ -23,98 +23,52 @@ export default function ChatListPage() {
     }
   }, [isAuthenticated, fetchChats]);
 
-  useEffect(() => {
-    if (chats.length > 0) {
-      updateFromChats(chats);
-    }
-  }, [chats, updateFromChats]);
-
   const handleDeleteChat = useCallback(async (chatId) => {
     if (!window.confirm(t('chat.confirmDeleteChat'))) return;
     const ok = await deleteChat(chatId);
     if (ok) fetchChats();
   }, [t, deleteChat, fetchChats]);
 
+  const goBack = () => navigate("/feed");
+  const openChat = (chatId) => navigate(`/chats/${chatId}`);
+
   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">{t('chat.chats')}</div>
-            <div />
+        <div className="f-app">
+          <div className="chat-page">
+            <ChatHeader title={t('chat.chats')} onBack={goBack} />
+            <div className="chat-empty-full">{t('chat.loginToSee')}</div>
           </div>
-          <div className="chat-empty-full">{t('chat.loginToSee')}</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">{t('chat.chats')}</div>
-          <div />
-        </div>
+      <div className="f-app">
+        <div className="chat-page">
+          <ChatHeader title={t('chat.chats')} onBack={goBack} />
 
-        <div className="chat-list">
-          {loading && (
-            <div className="chat-empty-full">{t('chat.loading')}</div>
-          )}
+          <div className="chat-list">
+            {loading && (
+                <div className="chat-empty-full">{t('chat.loading')}</div>
+            )}
 
-          {!loading && chats.length === 0 && (
-            <div className="chat-empty-full">{t('chat.noChats')}</div>
-          )}
+            {!loading && chats.length === 0 && (
+                <div className="chat-empty-full">{t('chat.noChats')}</div>
+            )}
 
-          {!loading && chats.map((chat) => {
-            const post = getPostForChat(chat.id);
-            const title = post?.title || chat.otherUser?.name || t('chat.user');
-            const imgSrc = getImageUrl(post?.images?.[0]);
-            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 || t('chat.noMessages')}
-                  </div>
-                </div>
-                {unreadCount > 0 && (
-                  <div className="chat-list-unread-badge">{unreadCount > 99 ? "99+" : unreadCount}</div>
-                )}
-                <button
-                  className="chat-list-delete-btn"
-                  title={t('chat.deleteChat')}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleDeleteChat(chat.id);
-                  }}
-                >
-                  <TrashIcon />
-                </button>
-              </div>
-            );
-          })}
+            {!loading && chats.map((chat) => (
+                <ChatListItem
+                    key={chat.id}
+                    chat={chat}
+                    post={getPostForChat(chat.id)}
+                    unreadMap={unreadMap}
+                    onOpen={openChat}
+                    onDelete={handleDeleteChat}
+                />
+            ))}
+          </div>
         </div>
       </div>
-    </div>
   );
-}
+}