diff --git a/backend/socket.js b/backend/socket.js index 0818876..e648172 100644 --- a/backend/socket.js +++ b/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) - socket.emit('contacts', result.rows); + io.to(username).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 diff --git a/frontend/js/chat.js b/frontend/js/chat.js index 9eb86ce..f6f1bb2 100644 --- a/frontend/js/chat.js +++ b/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); - for(const contact in contacts) { - addContact(contact, socket); + console.log('Received contacts: ', contacts); + for(const contact of contacts) { + 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'); - removeButton.textContent = 'X'; - removeButton.className = 'remove-contact'; + const removeButton = createRemoveButton(contactUsername, contact); contact.appendChild(usernameSpan); contact.appendChild(removeButton); usernameSpan.addEventListener('click', () => { - currentRecipient = username; - recipientInput.value = username; + currentRecipient = contactUsername; + recipientInput.value = contactUsername; localStorage.setItem('currentRecipient', currentRecipient); - socket.emit('get messages', username); - }); - - 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)' - } - }) - + socket.emit('get messages', contactUsername); }); 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); } }