fixed messages pagination

client/src/api/contactsApi.tsx

@@ -54,7 +54,7 @@ export async function getMessages(
 
     return response.data;
   } catch (e) {
-    //console.error('Failed to get messages: ', e);
+    console.error('Failed to get messages: ', e);
     throw e;
   }
 }

client/src/components/chat/MessageForm.tsx

@@ -95,7 +95,7 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
       }
     }
 
-    const tempId: string = nanoid(); // Temporary ID for unsent messag
+    const tempId: string = nanoid(); // Temporary ID for unsent messages
 
     const tempMessage: ChatMessages = {
       sender: username,
@@ -105,6 +105,7 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
       pending: true,
       tempId: tempId,
       attachment_url: attachmentUrl || null,
+      sender_id: 0,
     };
 
     setMessages((prevMessages) => [...prevMessages, tempMessage]); // Display as gray
@@ -121,13 +122,18 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
         status: string;
         message_id: number;
         tempId: number;
-        content: string;
+        message: string;
       }) => {
         if (response.status === 'ok') {
           setMessages((prevMessages) =>
             prevMessages.map((msg) =>
               msg.tempId === tempId
-                ? { ...msg, pending: false, message_id: response.message_id }
+                ? {
+                    ...msg,
+                    pending: false,
+                    message_id: response.message_id,
+                    sender_id: msg.sender_id,
+                  }
                 : msg,
             ),
           );
@@ -137,7 +143,7 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
           setFile(null);
         }
         console.log(
-          `status: ${response.status}, tempId: ${response.tempId}, message: ${response.content}`,
+          `status: ${response.status}, tempId: ${response.tempId}, message: ${response.message}`,
         );
       },
     );

client/src/components/chat/MessagesArea.tsx

@@ -44,7 +44,7 @@ function MessagesArea({
       fetchPreviousMessages(currentContact)
         .then(() => setIsLoading(false))
         .catch((e) => {
-          console.error('Failed to fetch messages: ', e);
+          //console.error('Failed to fetch messages: ', e);
           setIsLoading(false);
         });
     }
@@ -70,13 +70,19 @@ function MessagesArea({
                 contact_username: msg.sender,
                 read: false,
                 contact_id: msg.message_id,
+                contact_user_id: msg.sender_id,
               },
             ];
           }
           return prevContacts;
         });
         updateContactStatus(
-          { contact_username: msg.sender, read: false },
+          {
+            contact_username: msg.sender,
+            read: false,
+            contact_id: msg.message_id,
+            contact_user_id: msg.sender_id,
+          },
           false,
         );
         console.log('changed status to false for: ', msg.sender);
@@ -122,7 +128,7 @@ function MessagesArea({
       }`}
       key={msg.message_id || msg.tempId}
     >
-      {msg.sender}: {msg.content}
+      {msg.message_id} {msg.sender}: {msg.content}
       {msg.attachment_url ? (
         <div className="mt-2">
           {msg.attachment_url.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? (

client/src/pages/Chat.tsx

@@ -17,6 +17,7 @@ export type ChatMessages = {
   tempId: string;
   pending: boolean;
   attachment_url: string | null;
+  sender_id: number;
 };
 
 export type ContactsProps = {

server/db/db.js

@@ -221,7 +221,7 @@ async function insertMessage(
     INSERT INTO Messages (conversation_id, user_id, content, attachment_url)
     SELECT conversation_id, sender.user_id, $3, $4
     FROM final_conversation, sender
-    RETURNING message_id, content, sent_at, attachment_url;  
+    RETURNING message_id, content, sent_at, attachment_url, user_id AS sender_id;
   `;
 
   try {
@@ -313,7 +313,7 @@ async function getMessages(user_id, receiverUsername, limit = 50, cursor = 0) {
           SELECT 1 
           FROM Memberships 
           WHERE conversation_id = Conversations.conversation_id 
-          AND user_id = (SELECT user_id FROM sender)
+          AND user_id = $1
         )
         AND EXISTS (
           SELECT 1 
@@ -322,11 +322,6 @@ async function getMessages(user_id, receiverUsername, limit = 50, cursor = 0) {
           AND user_id = (SELECT user_id FROM recipient)
         )
         LIMIT 1
-    ),
-    sender AS (
-        SELECT user_id 
-        FROM Accounts 
-        WHERE user_id = $1
     )
     SELECT 
         m.message_id, 
@@ -338,7 +333,7 @@ async function getMessages(user_id, receiverUsername, limit = 50, cursor = 0) {
     FROM Messages m
     JOIN Accounts a ON m.user_id = a.user_id
     JOIN Memberships mem ON m.conversation_id = mem.conversation_id AND mem.user_id = (SELECT user_id FROM recipient)
-    JOIN Accounts r ON mem.user_id = r.user_id
+    JOIN Accounts r ON m.user_id = r.user_id
     WHERE m.conversation_id = (SELECT conversation_id FROM conversation)
     AND m.message_id < $3
     ORDER BY m.message_id DESC
@@ -371,23 +366,18 @@ async function getMessages(user_id, receiverUsername, limit = 50, cursor = 0) {
             AND user_id = (SELECT user_id FROM recipient)
           )
           LIMIT 1
-      ),
-      sender AS (
-          SELECT user_id 
-          FROM Accounts 
-          WHERE user_id = $1
       )
       SELECT 
           m.message_id, 
           m.content, 
           m.sent_at, 
           m.attachment_url, 
-          a.username AS sender,
-          r.username AS recipient
+          a.username AS sender_username,
+          r.username AS recipient_username
       FROM Messages m
       JOIN Accounts a ON m.user_id = a.user_id
       JOIN Memberships mem ON m.conversation_id = mem.conversation_id AND mem.user_id = (SELECT user_id FROM recipient)
-      JOIN Accounts r ON mem.user_id = r.user_id
+      JOIN Accounts r ON m.user_id = r.user_id
       WHERE m.conversation_id = (SELECT conversation_id FROM conversation)
       ORDER BY m.message_id DESC
       LIMIT $3;

server/socket/socket.js

@@ -92,11 +92,15 @@ function initializeSocket(io) {
           attachment_url,
         );
         if (!insertedMessage) {
-          callback({ status: "error", message: "Failed to insert message" });
+          callback({
+            tempId: msg.tempId,
+            status: "error",
+            message: "Failed to insert message",
+          });
           return;
         }
 
-        const { message_id, timestamp } = insertedMessage;
+        const { message_id, timestamp, sender_id } = insertedMessage;
         console.log("(socket) received from chat message", msg);
 
         io.to(username).to(recipient).emit("chat message", {
@@ -105,6 +109,7 @@ function initializeSocket(io) {
           attachment_url,
           recipient,
           message_id,
+          sender_id,
         });
         console.log("(socket) sent on 'chat message' socket: ", {
           sender,
@@ -113,6 +118,7 @@ function initializeSocket(io) {
           recipient,
           timestamp,
           message_id,
+          sender_id,
         });
 
         callback({
@@ -122,7 +128,11 @@ function initializeSocket(io) {
         });
       } catch (e) {
         console.error("(socket) Failed to insert message ", e);
-        callback({ status: "error", message: "Internal server error" });
+        callback({
+          tempId: msg.tempId,
+          status: "error",
+          message: "Internal server error",
+        });
       }
     });