contact is in beta

backend/socket.js

@@ -90,7 +90,6 @@ function initializeSocket(server) {
                     //const { username: sender, recipient: receiver, content: content, id: id } = result.rows;
 
                     io.to(username).emit('messages history', result.rows);
-
                 } else {
                     io.to(username).emit('no messages');
                 }
@@ -119,15 +118,31 @@ function initializeSocket(server) {
             WHERE username = $1
         `);
             const result = await db.query(query, [username]);
-            console.log(result.rows)
+            io.to(username).emit('contacts', result.rows);
-            socket.emit('contacts', result.rows);
+
             } catch(err) {
                 console.error('Failed to get contacts from db');
-                socket.emit('socket error', 'Failed to get contacts (server error)');
+                io.to(username).emit('socket error', 'Failed to get contacts (server error)');
             }
         })
 
-        socket.on('delete contacts', async (contactUsername) => {
+        socket.on('get contacts', async () => {
+            const username = socket.user.username;
+            try {
+                const query = (`
+            SELECT contact, username
+            FROM contacts
+            WHERE username = $1
+        `);
+                const result = await db.query(query, [username]);
+                io.to(username).emit('contacts', result.rows);
+
+            } catch(err) {
+                console.error('Failed to get contacts from db');
+                io.to(username).emit('socket error', 'Failed to get contacts (server error)');
+            }
+        })
+        socket.on('delete contact', async (contactUsername) => {
             const username = socket.user.username;
             try {
                 const query = (' DELETE FROM contacts WHERE (username = $1 AND contact = $2)');
@@ -135,7 +150,7 @@ function initializeSocket(server) {
                 socket.emit('delete contacts', 'ok');
             } catch(err) {
                 console.error('Failed to remove contact from db');
-                socket.emit('socket error', 'Failed to remove contact (server error)');
+                io.to(username).emit('socket error', 'Failed to remove contact (server error)');
             }
         })
         // disconnect event

frontend/js/chat.js

@@ -56,6 +56,7 @@ async function initializeSocket() {
     socket.on('connect', () => {
         console.log('Connected to server');
         const initialRecipient = initializeRecipient();
+        socket.emit('get contacts')
         socket.emit('get messages', initialRecipient);
     });
 
@@ -67,7 +68,6 @@ async function initializeSocket() {
     })
 
     // Set for not displaying same contact multiple times
-
     const addedContacts = new Set();
     // Main socket connection, it is displaying all messages in real time
     socket.on('chat message', async (msg) => {
@@ -102,9 +102,9 @@ async function initializeSocket() {
 
     // Contacts handler
     socket.on('contacts', (contacts) => {
-        console.log('contactArray: ', contacts);
+        console.log('Received contacts: ', contacts);
-        for(const contact in contacts) {
+        for(const contact of contacts) {
-            addContact(contact, socket);
+            addContact(contact.contact, socket)
         }
     })
 
@@ -157,44 +157,44 @@ async function initializeSocket() {
         messages.scrollTop = messages.scrollHeight;
     });
 
-    function addContact(username, socket) {
+    function addContact(contactUsername, socket) {
         const contact = document.createElement('li');
         contact.className = 'contact-item';
-
         const usernameSpan = document.createElement('span');
-        usernameSpan.textContent = username;
+        usernameSpan.textContent = contactUsername;
         usernameSpan.className = 'contact-username';
 
-        const removeButton = document.createElement('button');
+        const removeButton = createRemoveButton(contactUsername, contact);
-        removeButton.textContent = 'X';
-        removeButton.className = 'remove-contact';
 
         contact.appendChild(usernameSpan);
         contact.appendChild(removeButton);
 
         usernameSpan.addEventListener('click', () => {
-            currentRecipient = username;
+            currentRecipient = contactUsername;
-            recipientInput.value = username;
+            recipientInput.value = contactUsername;
             localStorage.setItem('currentRecipient', currentRecipient);
-            socket.emit('get messages', username);
+            socket.emit('get messages', contactUsername);
-        });
-
-        removeButton.addEventListener('click', (e) => {
-            e.stopPropagation();
-            socket.emit('delete contact', username);
-            socket.on('delete contact', (res) => {
-                if(res === 'ok') {
-                    contacts.removeChild(contact);
-                    addedContacts.delete(username);
-                } else {
-                    messageBox.innerHTML = 'Failed to remove contact (server error)'
-                }
-            })
-
         });
 
         contacts.appendChild(contact);
-        console.log('Created contact:', username);
+    }
+
+    function createRemoveButton(contactUsername, contactElement) {
+        const removeButton = document.createElement('button');
+        removeButton.textContent = 'X';
+        removeButton.className = 'remove-contact';
+        removeButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            socket.emit('delete contact', contactUsername);
+            removeContact(contactUsername, contactElement);
+        });
+
+        return removeButton;
+    }
+
+    function removeContact(contactUsername, contactElement) {
+        contacts.removeChild(contactElement);
+        addedContacts.delete(contactUsername);
     }
 }