From d75208f88b7def523fdc59e9e75614aabdcb8e32 Mon Sep 17 00:00:00 2001
From: slawk0 <justgetahouse4@pm.me>
Date: Sun, 12 Jan 2025 15:37:38 +0100
Subject: [PATCH] unread messages  handling works

---
 client/index.html                             |  2 +-
 client/src/api/contactsApi.tsx                | 15 ----
 .../components/chat/chatArea/MessagesArea.tsx | 87 +++++++++++--------
 .../chat/leftSidebar/ContactsList.tsx         | 48 +++++-----
 .../chat/leftSidebar/LastActiveTime.tsx       |  2 +-
 .../chat/rightSidebar/ParticipantsBar.tsx     |  2 +
 client/src/context/chat/ChatProvider.tsx      | 14 ++-
 client/src/pages/Login.tsx                    |  2 +-
 server/db/db.js                               | 73 +++++++++-------
 9 files changed, 130 insertions(+), 115 deletions(-)

diff --git a/client/index.html b/client/index.html
index 9bdc162..6f848dc 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,7 +7,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/turtle.svg"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Turtel chat 🐢</title>
+      <title>Turtel chat</title>
 
     <style>
       body{
diff --git a/client/src/api/contactsApi.tsx b/client/src/api/contactsApi.tsx
index 9000f95..8cebba5 100644
--- a/client/src/api/contactsApi.tsx
+++ b/client/src/api/contactsApi.tsx
@@ -12,21 +12,6 @@ export async function getContactsList(): Promise<ContactsProps[]> {
   }
 }
 
-export async function setContactStatus(conversation_id: string, read: boolean) {
-  try {
-    const response = await axiosClient.put(
-      `/api/chat/contacts/${conversation_id}`,
-      { status: read },
-      { withCredentials: true },
-    );
-    console.log(response.data);
-    return response.data;
-  } catch (e) {
-    console.error('Failed to set contact status: ', e);
-    throw e;
-  }
-}
-
 export async function sendContact(contact: string) {
   try {
     const response = await axiosClient.post(`/api/chat/contact/${contact}`);
diff --git a/client/src/components/chat/chatArea/MessagesArea.tsx b/client/src/components/chat/chatArea/MessagesArea.tsx
index d157296..34acd7b 100644
--- a/client/src/components/chat/chatArea/MessagesArea.tsx
+++ b/client/src/components/chat/chatArea/MessagesArea.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useRef, useState } from 'react';
 import { socket } from '@/socket/socket.ts';
-import { sendContact, setContactStatus } from '@/api/contactsApi.tsx';
+import { sendContact } from '@/api/contactsApi.tsx';
 import LoadingWheel from '../LoadingWheel.tsx';
 import AnimatedMessage from '@/components/chat/chatArea/AnimatedMessage.tsx';
 import { ChatMessagesProps } from '@/types/types.ts';
@@ -13,11 +13,11 @@ function MessagesArea() {
     messages,
     setMessages,
     currentContact,
-    updateContactStatus,
     messageHandler,
     setContactsList,
     errorMessage,
     fetchPreviousMessages,
+    contactsList,
     setCurrentContact,
   } = useChat();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -98,9 +98,23 @@ function MessagesArea() {
       if (isFromCurrentConversation) {
         messageHandler(msg);
         if (!isFocused) {
-          updateContactStatus(msg.conversation_id, false);
-          setCurrentContact({ ...currentContact, read: false });
+          setContactsList((prevContacts) => {
+            return prevContacts.map((contact) =>
+              contact.conversation_id === currentContact?.conversation_id
+                ? {
+                    ...contact,
+                    read: false,
+                  }
+                : contact,
+            );
+          });
+
           document.title = 'New message ❗';
+        } else {
+          socket?.emit('read message', {
+            conversation_id: msg.conversation_id,
+            message_id: msg.conversation_id,
+          });
         }
       }
 
@@ -108,8 +122,6 @@ function MessagesArea() {
       setContactsList((prevContacts) => {
         // If message is from another conversation
         if (!isFromCurrentConversation && !isFromCurrentUser) {
-          setContactStatus(msg.conversation_id, false);
-
           // Check if contact exists
           const existingContact = prevContacts.find(
             (c) => c.conversation_id === msg.conversation_id,
@@ -120,8 +132,8 @@ function MessagesArea() {
             return [
               ...prevContacts,
               {
-                username: msg.sender,
                 read: false,
+                username: msg.sender,
                 id: msg.message_id,
                 user_id: msg.sender_id,
                 conversation_id: msg.conversation_id,
@@ -189,23 +201,43 @@ function MessagesArea() {
       socket.off('chat message');
       socket.off('delete message');
     };
-  }, [
-    currentContact,
-    user?.username,
-    setContactsList,
-    updateContactStatus,
-    isFocused,
-  ]);
+  }, [currentContact, user?.username, setContactsList, isFocused]);
 
   useEffect(() => {
-    if (isFocused && currentContact?.read == true) {
+    if (!currentContact) return;
+    const currentContactOnList = contactsList.find((contact) => {
+      return contact.conversation_id == currentContact?.conversation_id;
+    });
+    if (currentContactOnList && messages.length > 1) {
+      socket?.emit('message read', {
+        conversation_id: currentContact?.conversation_id,
+        message_id: messages[messages.length - 1].message_id,
+      });
+
+      setCurrentContact({ ...currentContact, read: currentContactOnList.read });
+    }
+    return () => {
+      if (!socket) return;
+      socket.off('message read');
+    };
+  }, [contactsList, currentContact?.conversation_id]);
+
+  useEffect(() => {
+    if (currentContact?.read == true) {
       return;
     }
     document.title = previousTitle.current;
+    if (messages.length > 1) {
+      console.error(
+        'read !== true, emiting message read socket for: ',
+        currentContact?.username,
+        messages[messages.length - 1].message_id,
+      );
 
-    if (currentContact?.conversation_id && currentContact?.read !== true) {
-      updateContactStatus(currentContact.conversation_id, true);
-      setCurrentContact({ ...currentContact, read: true });
+      socket?.emit('message read', {
+        conversation_id: currentContact?.conversation_id,
+        message_id: messages[messages.length - 1].message_id,
+      });
     }
 
     const timeout = setTimeout(() => {
@@ -219,24 +251,11 @@ function MessagesArea() {
             : contact,
         );
       });
-    }, 1000);
+    }, 800);
 
     return () => clearTimeout(timeout);
   }, [isFocused]);
 
-  useEffect(() => {
-    if (!socket) return;
-    if (currentContact?.read == true) return;
-    socket.emit('message read', {
-      conversation_id: currentContact?.conversation_id,
-      message_id: messages[messages?.length - 1].message_id,
-    });
-    console.info('MESSAGE READ: ', {
-      conversation_id: currentContact?.conversation_id,
-      message_id: messages[messages?.length - 1].message_id,
-    });
-  }, [isFocused]);
-
   useEffect(() => {
     const hasNewMessages = messages.length > previousMessagesLength.current;
     previousMessagesLength.current = messages.length;
@@ -254,8 +273,6 @@ function MessagesArea() {
 
   return (
     <div ref={containerRef} className="flex flex-col h-full overflow-y-auto">
-      <p>READ STATUS: {currentContact?.read ? <p>true</p> : <p>false</p>}</p>
-      <p>ISFOCUSED: {isFocused ? <p>tak</p> : <p>nie</p>}</p>
       <p className="text-center text-gray-400">{errorMessage}</p>
       <ul className="flex-grow list-none">
         {isLoading ? <LoadingWheel /> : null}
@@ -267,6 +284,8 @@ function MessagesArea() {
           />
         ))}
       </ul>
+      <p>READ STATUS: {currentContact?.read ? 'tak' : 'nie'}</p>
+      <p>ISFOCUSED: {isFocused ? 'tak' : 'nie'}</p>
     </div>
   );
 }
diff --git a/client/src/components/chat/leftSidebar/ContactsList.tsx b/client/src/components/chat/leftSidebar/ContactsList.tsx
index c71f234..bb1f3df 100644
--- a/client/src/components/chat/leftSidebar/ContactsList.tsx
+++ b/client/src/components/chat/leftSidebar/ContactsList.tsx
@@ -24,7 +24,6 @@ function ContactsList() {
     contactsList,
     setContactsList,
     setCurrentContact,
-    updateContactStatus,
     setMessages,
     setErrorMessage,
   } = useChat();
@@ -48,28 +47,25 @@ function ContactsList() {
     };
   }, [socket]);
 
-  useEffect(() => {
-    contactsList.forEach((contact) => {
-      if (contact.last_message_id && contact.last_read_message_id) {
-        if (contact.last_message_id > contact.last_read_message_id) {
-          setContactsList((prevContacts) =>
-            prevContacts.map((prevContact) =>
-              prevContact.id === contact.id
-                ? { ...prevContact, read: false }
-                : prevContact,
-            ),
-          );
-        }
-      }
-    });
-  }, [contactsList]);
-
   const fetchContacts = async () => {
     console.log('Fetching contacts list');
     const response = await axiosClient.get(`/api/chat/contacts`);
     console.log('Get contacts list response: ', response.data);
+    const fetchedContacts: ContactsProps[] = response.data;
 
-    setContactsList(response.data);
+    const updatedContacts = fetchedContacts.map((contact) => {
+      if (
+        contact.last_message_id &&
+        contact.last_read_message_id &&
+        contact.last_message_id !== contact.last_read_message_id
+      ) {
+        return { ...contact, read: false };
+      } else {
+        return { ...contact, read: true };
+      }
+    });
+
+    setContactsList(updatedContacts);
   };
 
   async function removeContact(contactId: number, conversation_id: string) {
@@ -100,13 +96,22 @@ function ContactsList() {
   }
 
   const sortedContacts = [...contactsList].sort((a, b) => {
-    // First, sort by read status
+    // First, sort by read status (unread first)
     if (a.read !== b.read) {
       return a.read ? 1 : -1;
     }
-    if (a.read && b.read) {
-      return -a.last_active?.localeCompare(b.last_active);
+
+    // If both are read or both are unread, sort by last_message_time (if available)
+    if (a.last_message_time !== null && b.last_message_time !== null) {
+      return -a.last_message_time.localeCompare(b.last_message_time);
     }
+
+    // If one or both last_message_time are null, sort by last_active_time
+    if (a.last_message_time === null || b.last_message_time === null) {
+      return -a.last_active.localeCompare(b.last_active);
+    }
+
+    // Default case (should not be reached)
     return 0;
   });
 
@@ -115,7 +120,6 @@ function ContactsList() {
       className="m-1 flex p-2 hover:bg-zinc-900 cursor-pointer transition-colors rounded-lg justify-between items-start min-h-[40px]"
       onClick={() => {
         initializeContact(contact);
-        updateContactStatus(contact.conversation_id, true);
       }}
     >
       <div className="flex flex-col w-full">
diff --git a/client/src/components/chat/leftSidebar/LastActiveTime.tsx b/client/src/components/chat/leftSidebar/LastActiveTime.tsx
index e7d96bb..1d4489a 100644
--- a/client/src/components/chat/leftSidebar/LastActiveTime.tsx
+++ b/client/src/components/chat/leftSidebar/LastActiveTime.tsx
@@ -30,7 +30,7 @@ const LastActiveTime = ({ contact }: LastActiveTimeProps) => {
     const intervalId = setInterval(updateTime, 60000);
 
     return () => clearInterval(intervalId);
-  }, [contact?.last_message]);
+  }, [contact?.last_message_time]);
 
   return <span className="text-xs font-bold text-gray-500">{timeAgo}</span>;
 };
diff --git a/client/src/components/chat/rightSidebar/ParticipantsBar.tsx b/client/src/components/chat/rightSidebar/ParticipantsBar.tsx
index a0b86a8..b4555de 100644
--- a/client/src/components/chat/rightSidebar/ParticipantsBar.tsx
+++ b/client/src/components/chat/rightSidebar/ParticipantsBar.tsx
@@ -139,6 +139,7 @@ function ParticipantsBar() {
       last_message: string | null;
       last_message_time: string | null;
       last_message_sender: string | null;
+      last_read_message_id: number | null;
     }) => {
       const { group_id } = msg;
       if (
@@ -157,6 +158,7 @@ function ParticipantsBar() {
           last_message_id: msg.last_message_id,
           last_message_sender: msg.last_message_sender,
           last_message_time: msg.last_message_time,
+          last_read_message_id: msg.last_read_message_id,
         });
       }
 
diff --git a/client/src/context/chat/ChatProvider.tsx b/client/src/context/chat/ChatProvider.tsx
index bddd7f2..5426d21 100644
--- a/client/src/context/chat/ChatProvider.tsx
+++ b/client/src/context/chat/ChatProvider.tsx
@@ -2,7 +2,7 @@ import { ChatContext } from '@/context/chat/ChatContext.tsx';
 import { ReactNode, useState } from 'react';
 import { ChatMessagesProps, ContactsProps, MeProps } from '@/types/types.ts';
 import { joinRoom } from '@/socket/socket.ts';
-import { getMessages, setContactStatus } from '@/api/contactsApi.tsx';
+import { getMessages } from '@/api/contactsApi.tsx';
 import axios from 'axios';
 
 export const ChatProvider = ({ children }: { children: ReactNode }) => {
@@ -23,7 +23,7 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
   async function initializeContact(newContact: ContactsProps) {
     setMessages([]); // Clear messages from previous contact
     localStorage.setItem('contact', JSON.stringify(newContact)); // Set current contact in localstorage
-    setCurrentContact({ ...newContact, read: true });
+    setCurrentContact({ ...newContact });
     console.log('Initialized contact: ', newContact);
     try {
       const joinResult = await joinRoom(newContact.conversation_id);
@@ -53,19 +53,19 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
   const fetchMessages = async (conversation_id: string) => {
     console.log('Fetching messages for: ', conversation_id);
     try {
-      const messages = await getMessages(conversation_id);
-      if (messages.messages.length < 50) {
+      const fetchedMessages = await getMessages(conversation_id);
+      if (fetchedMessages.messages.length < 50) {
         setHasMoreMessages(false);
         setErrorMessage('No more messages found');
       }
 
       setCursor(() => {
         return Math.min(
-          ...messages.messages.map((message) => message.message_id),
+          ...fetchedMessages.messages.map((message) => message.message_id),
         );
       });
 
-      messages.messages.forEach(messageHandler);
+      fetchedMessages.messages.forEach(messageHandler);
     } catch (e) {
       if (axios.isAxiosError(e)) {
         setErrorMessage(e.message);
@@ -94,8 +94,6 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
     setContactsList((prevContacts) =>
       prevContacts.map((contact) => {
         if (contact.conversation_id === conversation_id) {
-          setContactStatus(conversation_id, read);
-
           return { ...contact, read: read };
         } else {
           return contact;
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index cf20efa..21a1248 100644
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -113,7 +113,7 @@ export default function Login() {
             <div className="text-red-400 text-sm">{message}</div>
           </form>
           <p className="text-gray-300 mt-10 text-center text-sm">
-            Don't have account?{' '}
+            or{' '}
             <Link
               to="/signup"
               className="text-green-400 leading-6 hover:text-green-600"
diff --git a/server/db/db.js b/server/db/db.js
index 534ae4d..51a315d 100644
--- a/server/db/db.js
+++ b/server/db/db.js
@@ -707,49 +707,56 @@ async function checkMembership(user_id, conversation_id) {
 async function getContacts(user_id) {
   const contactsQuery = `
     WITH DirectContacts AS (
-      SELECT 
-        c.contact_id AS id,
-        a.user_id AS user_id,
-        a.username AS username,
-        conv.last_active,
-        c.conversation_id,
-        conv.conversation_type AS type,
-        m.last_read_message_id
-      FROM Contacts c
+      SELECT DISTINCT ON (c.conversation_id)
+      c.contact_id AS id,
+      a.user_id AS user_id,
+      a.username AS username,
+      conv.last_active,
+      c.conversation_id,
+      conv.conversation_type AS type,
+      requesting_member.last_read_message_id
+    FROM Contacts c
       JOIN Conversations conv ON c.conversation_id = conv.conversation_id
-      JOIN Memberships m ON m.conversation_id = conv.conversation_id  
-      JOIN Accounts a ON a.user_id = m.user_id
-      WHERE c.user_id = $1
-        AND conv.conversation_type = 'direct'
-        AND (a.user_id != $1 OR (SELECT COUNT(*) FROM Memberships WHERE conversation_id = c.conversation_id) = 1)
-      ORDER BY c.conversation_id, conv.last_active DESC
-    ),
-    GroupContacts AS (
-      SELECT 
-        c.contact_id AS id,
-        NULL::uuid AS user_id,
-        conv.name AS username,
-        conv.last_active,
-        c.conversation_id,
-        conv.conversation_type AS type,
-        m.last_read_message_id  -- We need to add Memberships join here too
-      FROM Contacts c
+      JOIN Memberships requesting_member
+      ON requesting_member.conversation_id = conv.conversation_id
+      AND requesting_member.user_id = $1
+      JOIN Memberships other_member
+      ON other_member.conversation_id = conv.conversation_id
+      JOIN Accounts a ON a.user_id = other_member.user_id
+    WHERE c.user_id = $1
+      AND conv.conversation_type = 'direct'
+      AND (
+      a.user_id != $1
+       OR (SELECT COUNT(*) FROM Memberships WHERE conversation_id = c.conversation_id) = 1
+      )
+      ),
+      GroupContacts AS (
+    SELECT DISTINCT ON (c.conversation_id)
+      c.contact_id AS id,
+      NULL::uuid AS user_id,
+      conv.name AS username,
+      conv.last_active,
+      c.conversation_id,
+      conv.conversation_type AS type,
+      m.last_read_message_id
+    FROM Contacts c
       JOIN Conversations conv ON c.conversation_id = conv.conversation_id
-      JOIN Memberships m ON m.conversation_id = conv.conversation_id  -- Added this JOIN
-      WHERE c.user_id = $1
-        AND conv.conversation_type = 'group'
-      ORDER BY c.conversation_id, conv.last_active DESC
-    )
+      JOIN Memberships m
+      ON m.conversation_id = conv.conversation_id
+      AND m.user_id = $1
+    WHERE c.user_id = $1
+      AND conv.conversation_type = 'group'
+      )
     SELECT * FROM DirectContacts
     UNION ALL
     SELECT * FROM GroupContacts
-    ORDER BY last_active DESC;
+    ORDER BY last_active DESC NULLS LAST;
   `;
 
   try {
     const contactsResult = await client.query(contactsQuery, [user_id]);
 
-    // Map the results to include the latest message and message_id
+    // Map the results to include the latest message info
     const contacts = await Promise.all(
       contactsResult.rows.map(async (row) => {
         const latestMessage = await getLatestMessage(row.conversation_id);