bad commit

src/views/home/group/chat/Chat.tsx

@@ -1,18 +1,72 @@
-import { FC, useEffect } from 'react';
-import { useAppDispatch } from '../../../../redux/hooks';
+import { FC, useEffect, useRef } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
 import { setMenuActiveGroupPage } from '../../../../redux/slices/store';
+import { fetchGroupMessages } from '../../../../redux/slices/groupChat';
 import { SearchInput } from '../../../../components/input/SearchInput';
 
 interface GroupChatProps {
     groupId: number;
 }
 
+const CHUNK_SIZE = 10;
+
 export const Chat: FC<GroupChatProps> = ({ groupId }) => {
     const dispatch = useAppDispatch();
+    const messages = useAppSelector((s) => s.groupchat.messages[groupId] || []);
+    const hasMore = useAppSelector((s) => s.groupchat.hasMore[groupId]);
+    const isInitialLoaded = useAppSelector(
+        (s) => s.groupchat.isInitialLoaded[groupId],
+    );
 
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    // активируем таб
     useEffect(() => {
         dispatch(setMenuActiveGroupPage('chat'));
     }, []);
+
+    useEffect(() => {
+        console.log(messages);
+    }, [messages]);
+
+    // первичная загрузка
+    useEffect(() => {
+        dispatch(
+            fetchGroupMessages({
+                groupId,
+                limit: CHUNK_SIZE,
+            }),
+        );
+    }, [groupId]);
+
+    // автоскролл вниз после начальной загрузки
+    useEffect(() => {
+        if (!isInitialLoaded || !scrollRef.current) return;
+        scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }, [isInitialLoaded, messages.length]);
+
+    // догрузка старых сообщений при скролле вверх
+    const handleScroll = () => {
+        const div = scrollRef.current;
+        if (!div || !hasMore) return;
+
+        if (div.scrollTop < 100) {
+            const first = messages[0];
+            if (!first) return;
+
+            const beforeId = first.id - CHUNK_SIZE;
+            console.log(beforeId);
+
+            dispatch(
+                fetchGroupMessages({
+                    groupId,
+                    limit: CHUNK_SIZE,
+                    afterMessageId: beforeId,
+                }),
+            );
+        }
+    };
+
     return (
         <div className="h-full relative">
             <div className="grid grid-rows-[40px,1fr,50px] h-full relative min-h-0 gap-[20px]">
@@ -24,13 +78,30 @@ export const Chat: FC<GroupChatProps> = ({ groupId }) => {
                     />
                 </div>
 
-                <div className="min-h-0 overflow-y-scroll thin-dark-scrollbar">
+                <div
+                    className="min-h-0 overflow-y-scroll thin-dark-scrollbar"
+                    ref={scrollRef}
+                    onScroll={handleScroll}
+                >
                     <div className="flex flex-col gap-[20px] min-h-0 h-0">
-                        {/* сообщения */}
+                        {messages.map((msg) => (
+                            <div
+                                key={msg.id}
+                                className="bg-gray-800 text-white p-3 rounded-lg"
+                            >
+                                <div className="text-sm opacity-60">
+                                    {msg.authorUsername} {msg.id}
+                                </div>
+                                <div>{msg.content}</div>
+                                <div className="text-[10px] opacity-40 mt-1">
+                                    {new Date(msg.createdAt).toLocaleString()}
+                                </div>
+                            </div>
+                        ))}
                     </div>
                 </div>
 
-                <div className=" bg-red-300">footer / input bar</div>
+                <div className="bg-red-300">footer / input bar</div>
             </div>
         </div>
     );