contacts appear on page load

client/src/components/chat/ContactProfile.tsx

@@ -1,9 +1,9 @@
-import zdjecie from "../../../assets/walter.png";
+import zdjecie from '../../../assets/walter.png';
 
-type ContactProfileProps = {
+type Contact = {
   contact: string;
 };
-function ContactProfile({ contact }: ContactProfileProps) {
+function ContactProfile({ contact }: Contact) {
   return (
     <>
       <div className="m-2 flex items-center">

client/src/components/chat/ContactsList.tsx

@@ -1,44 +1,36 @@
-import { sendRequestHistorical, socket } from '../../socket/socket.tsx';
+import { socket } from '../../socket/socket.tsx';
 import { useEffect, useState } from 'react';
 
-type Contact = {
-  contact: string;
+type ContactList = {
+  username: string;
+  usernamecontact: string;
   read: boolean;
 };
 
 function ContactsList() {
-  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [contacts, setContacts] = useState<ContactList[]>([]);
 
   useEffect(() => {
-    sendRequestHistorical();
-
-    function contactHandler(contactInf: Contact) {
-      setContacts((prevContacts) => {
-        // Check if the contact already exists
-        if (!prevContacts.some((m) => m.contact === contactInf.contact)) {
-          return [...prevContacts, contactInf];
-        }
-        return prevContacts;
-      });
-    }
-
-    socket.on('contact', (contactInf: Contact) => {
-      console.log('Received contact: ', contactInf);
-      contactHandler(contactInf);
+    socket.on('contacts list', (contactsList: ContactList[]) => {
+      console.log('Received contacts: ', contactsList);
+      setContacts(contactsList);
     });
+
+    return () => {
+      socket.off('contacts list');
+    };
   }, []);
 
-  const contactList = contacts.map((contact: Contact, index) => (
-    <li className="hover: accent-gray-800" key={index}>
-      {contact.contact}
+  const contactsList = contacts.map((contacts: ContactList, index) => (
+    <li className="hover:bg-gray-800" key={index}>
+      {contacts.usernamecontact}
     </li>
   ));
+
   return (
-    <>
-      <div className="flex-grow overflow-y-auto w-64">
-        <ul className="m-2">{contactList}</ul>
-      </div>
-    </>
+    <div className="flex-grow overflow-y-auto w-64">
+      <ul className="m-2 flex-grow-1">{contactsList}</ul>
+    </div>
   );
 }
 

client/src/socket/socket.tsx

@@ -7,7 +7,6 @@ const socket = io({
     token: token,
   },
 });
-
 socket.on('connect', () => console.log('connected'));
 
 socket.on('disconnect', () => {
@@ -31,10 +30,12 @@ function sendMessage(message: string, recipient: string | null) {
     timestamp: timestamp,
   });
 }
+
 type Contact = {
   contact: string;
   read: boolean;
 };
+
 function sendContact(data: Contact) {
   const { contact, read } = data;
   socket.emit('add contact', { contact: contact, read: read });
@@ -48,7 +49,7 @@ function sendRequestHistorical(recipient: string) {
 
 function sendGetContacts(username: string) {
   socket.emit('get contacts', username);
-  console.log('Requested contact list');
+  console.log('Requested contact list for: ', username);
 }
 export {
   sendMessage,

server/db/db.js

@@ -116,7 +116,7 @@ async function insertMessage(sender, recipient, message, timestamp) {
 }
 
 async function getMessages(username, recipient) {
-  console.log(`Username: ${username}, recipient: ${recipient}`);
+  console.log(`getMessages for Username: ${username}, recipient: ${recipient}`);
   const query = ` 
   SELECT * FROM messages
   WHERE (sender = $1 AND recipient = $2) OR (sender = $2 AND recipient = $1)
@@ -187,7 +187,7 @@ async function insertContact(username, usernameContact, read) {
 
 async function getContacts(username) {
   const query = `
-  SELECT * FROM contacts
+  SELECT usernameContact, read FROM contacts
   WHERE username = $1;
   `;
   try {

server/socket/socket.js

@@ -34,15 +34,25 @@ function initializeSocket(io) {
       next(new Error("Invalid token"));
     }
   });
-  io.on("connection", (socket) => {
+
+  io.on("connection", async (socket) => {
     const username = socket.username;
     if (!username) {
       socket.on("disconnect", () => {
         console.log(socket.id, " disconnected due to: invalid username/token");
       });
+      return;
     }
     socket.join(username); // join username room
 
+    const sendContactList = async () => {
+      const contacts = await getContacts(username);
+      io.to(username).emit("contacts list", contacts);
+      console.log("sent on 'contacts list: ", contacts);
+    };
+
+    await sendContactList(username);
+
     socket.on("chat message", async (msg) => {
       const { message, recipient, timestamp } = msg;
       const sender = username;
@@ -91,11 +101,6 @@ function initializeSocket(io) {
       console.log("sent on 'contact' socket: ", { contact, read });
     });
 
-    socket.on("get contacts", (username) => {
-      const contacts = getContacts(username);
-      io.to(username).emit(contacts);
-      console.log("sent on 'get contacts: ", contacts);
-    });
     socket.on("disconnect", (reason) => {
       console.log(socket.id, " disconnected due to: ", reason);
     });