chunking messages is working :)

client/src/api/contactsApi.tsx

@@ -54,7 +54,7 @@ export async function getMessages(
   cursor: number | null = 0,
   limit: number = 50,
 ): Promise<{ messages: MessagesProps[]; nextCursor: number | null }> {
-  if (contact == null) {
+  if (contact === null || cursor === null) {
     return { messages: [], nextCursor: null };
   }
   try {

client/src/components/chat/ContactsList.tsx

@@ -31,7 +31,6 @@ function ContactsList({
   setCurrentContact,
   updateContactStatus,
   setMessages,
-  currentContact,
 }: ContactsListProps) {
   function contactHandler(contactsList: ContactsProps) {
     setContactsList((prevContacts) => {
@@ -50,7 +49,6 @@ function ContactsList({
   const fetchContacts = async () => {
     const contacts: ContactsProps[] = await getContactsList();
     console.log('Fetching contacts list');
-    console.log(contacts);
     contacts.forEach(contactHandler);
   };
 
@@ -60,11 +58,9 @@ function ContactsList({
       return;
     }
 
-    if (!currentContact === null) {
-      fetchContacts().catch((e) =>
-        console.error('Failed to fetch contacts: ', e),
-      );
-    }
+    fetchContacts().catch((e) =>
+      console.error('Failed to fetch contacts: ', e),
+    );
 
     return () => {
       if (!socket) {

client/src/components/chat/MessagesArea.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { socket } from '../../socket/socket.tsx';
 import { useOutletContext } from 'react-router-dom';
 import { UsernameType } from '../../utils/ProtectedRoutes.tsx';
-import { sendContact, setContactStatus } from '../../api/contactsApi.tsx';
+import { sendContact } from '../../api/contactsApi.tsx';
 
 type ChatMessages = {
   sender: string;
@@ -31,44 +31,34 @@ type MessagesAreaProps = {
   cursor: number | null;
   messageHandler: (msg: ChatMessages) => void;
   setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
+  fetchPreviousMessages: (contact: string | null) => Promise<void>;
 };
 
 function MessagesArea({
   messages,
-  setMessages,
   currentContact,
   updateContactStatus,
-  setCursor,
-  cursor,
   setContactsList,
+  messageHandler,
+  fetchPreviousMessages,
 }: MessagesAreaProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const { username }: UsernameType = useOutletContext();
+  let scrollPosition = 0;
 
-  function messageHandler(msg: ChatMessages) {
-    setMessages((prevMessages) => {
-      if (!prevMessages.some((m) => m.message_id === msg.message_id)) {
-        return [...prevMessages, msg];
-      }
-      return prevMessages;
-    });
-  }
+  const handleScroll = () => {
+    const container = containerRef.current;
+    if (container && container.scrollTop < 30) {
+      scrollPosition = container.scrollTop;
+      fetchPreviousMessages(currentContact).catch((e) =>
+        console.error('Failed to fetch messages: ', e),
+      );
+    }
+  };
 
   useEffect(() => {
-    if (!socket) {
-      console.error('Socket not initialized');
-      return;
-    }
-
-    const handleScroll = () => {
-      const container = containerRef.current;
-      if (container) {
-        if (container.scrollTop === 0) {
-          console.log('Scrolled to top!');
-        }
-      }
-    };
+    if (!socket) return;
 
     const currentContainer = containerRef.current;
     if (currentContainer) {
@@ -106,7 +96,7 @@ function MessagesArea({
         console.error('Socket not initialized');
         return;
       }
-      // Clean up event listeners
+
       if (currentContainer) {
         currentContainer.removeEventListener('scroll', handleScroll);
       }
@@ -121,7 +111,7 @@ function MessagesArea({
 
   const messageList = messages.map((msg: ChatMessages) => (
     <li className="ml-2 rounded p-1 hover:bg-gray-800" key={msg.message_id}>
-      {msg.sender}: {msg.message}
+      {msg.message_id} {msg.sender}: {msg.message}
     </li>
   ));
 

client/src/pages/Chat.tsx

@@ -66,6 +66,21 @@ function Chat() {
     console.log('Fetching messages for: ', currentContact);
     messages.messages.forEach(messageHandler);
   };
+
+  const fetchPreviousMessages = async (contact: string | null) => {
+    const messages = await getMessages(contact, cursor, 50);
+    console.log('Fetching messages for: ', contact);
+    setCursor(messages.nextCursor);
+    messages.messages.forEach((msg) => {
+      setMessages((prevMessages) => {
+        if (!prevMessages.some((m) => m.message_id === msg.message_id)) {
+          return [msg, ...prevMessages];
+        }
+        return prevMessages;
+      });
+    });
+  };
+
   function messageHandler(msg: ChatMessages) {
     setMessages((prevMessages) => {
       // Check if the message already exists in the state
@@ -129,6 +144,7 @@ function Chat() {
               cursor={cursor}
               messageHandler={messageHandler}
               setContactsList={setContactsList}
+              fetchPreviousMessages={fetchPreviousMessages}
             />
           </div>
           <div className="flex-shrink-0 mb-2 mt-0">

server/db/db.js

@@ -149,7 +149,7 @@ async function getMessages(username, recipient, limit = 50, cursor = 0) {
     const messages = results.rows;
 
     const nextCursor =
-      messages.length > limit ? messages[limit - 1].message_id : null;
+      messages.length > limit ? messages[limit - 2].message_id : null;
 
     return { messages: messages.reverse(), nextCursor: nextCursor };
   } catch (e) {