slawk0/web-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added sorting messages to display unread on top

Browse Source
This commit is contained in:
slawk0
2024-09-17 20:31:05 +02:00
parent a21dcd681e
commit 2f395051d1
2 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
backend/socket.js
View File

@@ -102,7 +102,8 @@ function initializeSocket(server) {
// Contacts socket // Contacts socket
socket.on('contacts', async (contactUsername) => { socket.on('contacts', async (contactUsername) => {
const username = socket.user.username; const username = socket.user.username;
const status = 'unread'; const status = (contactUsername.status === "read") ? "read" : "unread";
// Update contact list in db // Update contact list in db
try { try {
const query = ` const query = `
@@ -112,7 +113,7 @@ function initializeSocket(server) {
SELECT 1 FROM contacts WHERE username = $1 AND contact = $2 SELECT 1 FROM contacts WHERE username = $1 AND contact = $2
) )
`; `;
await db.query(query, [username, contactUsername, status]); await db.query(query, [username, contactUsername.contact, status]);
} catch (err) { } catch (err) {
console.error('Failed to update contacts ', err) console.error('Failed to update contacts ', err)
socket.emit('socket error', 'Failed to update contacts (server error)') socket.emit('socket error', 'Failed to update contacts (server error)')

32
frontend/js/chat.js
View File

@@ -74,13 +74,6 @@ async function initializeSocket() {
console.log('Received message:', msg); console.log('Received message:', msg);
const { username, content, recipient } = msg; const { username, content, recipient } = msg;
// if(username !== currentRecipient && username !== currentUsername) {
// socket.emit('status', username);
// console.log('new message from ', username);
// const unreadIndicator = document.querySelector('.unread-indicator');
// unreadIndicator.style.display = 'inline';
// }
// username is sender username!!! // username is sender username!!!
// Display messages // Display messages
@@ -95,9 +88,9 @@ async function initializeSocket() {
if (recipient !== currentRecipient && username !== currentUsername) { if (recipient !== currentRecipient && username !== currentUsername) {
// Check if the contact has already been added // Check if the contact has already been added
socket.emit('status', username); socket.emit('status', username);
console.log('new message from ', username); console.log('new message from ', username, "recipient: ", recipient, 'currentRecipient: ', currentRecipient );
// const unreadIndicator = document.querySelector('.unread-indicator');
// unreadIndicator.style.display = 'inline'; // Notify about unread message
const contactItem = Array.from(contacts.children).find( const contactItem = Array.from(contacts.children).find(
item => item.querySelector('.contact-username').textContent === username item => item.querySelector('.contact-username').textContent === username
); );
@@ -105,8 +98,9 @@ async function initializeSocket() {
const unreadIndicator = contactItem.querySelector('.unread-indicator'); const unreadIndicator = contactItem.querySelector('.unread-indicator');
unreadIndicator.style.display = 'inline'; unreadIndicator.style.display = 'inline';
} }
// Avoid duplicating contacts
if (!addedContacts.has(username)) { if (!addedContacts.has(username)) {
socket.emit('contacts', username); socket.emit('contacts', { contact: username, status: "unread" });
console.log('added contact') console.log('added contact')
// Add the username to the Set of contacts // Add the username to the Set of contacts
@@ -145,7 +139,7 @@ async function initializeSocket() {
localStorage.setItem('currentRecipient', currentRecipient); localStorage.setItem('currentRecipient', currentRecipient);
messages.innerHTML = ''; messages.innerHTML = '';
console.log('Requesting messages for recipient:', currentRecipient); console.log('Requesting messages for recipient:', currentRecipient);
socket.emit('contacts', currentRecipient); socket.emit('contacts', { contact: currentRecipient, status: "read"});
// Request previous messages after form submit // Request previous messages after form submit
socket.emit('get messages', currentRecipient); socket.emit('get messages', currentRecipient);
} }
@@ -178,6 +172,8 @@ async function initializeSocket() {
function addContact(contactUsername, status, socket) { function addContact(contactUsername, status, socket) {
const contact = document.createElement('li'); const contact = document.createElement('li');
contact.className = 'contact-item'; contact.className = 'contact-item';
contact.dataset.username = contactUsername;
contact.dataset.unread = status === "unread" ? "true" : "false";
const leftWrapper = document.createElement('div'); const leftWrapper = document.createElement('div');
leftWrapper.className = 'left-wrapper'; leftWrapper.className = 'left-wrapper';
@@ -220,10 +216,22 @@ async function initializeSocket() {
socket.emit('get messages', contactUsername); socket.emit('get messages', contactUsername);
socket.emit('read', contactUsername); socket.emit('read', contactUsername);
unreadIndicator.style.display = 'none'; unreadIndicator.style.display = 'none';
contact.dataset.unread = "false";
sortContacts();
input.focus(); input.focus();
}); });
contacts.appendChild(contact); contacts.appendChild(contact);
sortContacts();
}
function sortContacts() {
const contactsList = Array.from(contacts.children);
contactsList.sort((a, b) => {
if (a.dataset.unread === "true" && b.dataset.unread === "false") return -1;
if (a.dataset.unread === "false" && b.dataset.unread === "true") return 1;
return a.dataset.username.localeCompare(b.dataset.username);
});
contactsList.forEach(contact => contacts.appendChild(contact));
} }
} }
initializeSocket(); initializeSocket();