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
socket.on('contacts', async (contactUsername) => {
const username = socket.user.username;
const status = 'unread';
const status = (contactUsername.status === "read") ? "read" : "unread";
// Update contact list in db
try {
const query = `
@@ -112,7 +113,7 @@ function initializeSocket(server) {
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) {
console.error('Failed to update contacts ', err)
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);
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!!!
// Display messages
@@ -95,9 +88,9 @@ async function initializeSocket() {
if (recipient !== currentRecipient && username !== currentUsername) {
// Check if the contact has already been added
socket.emit('status', username);
console.log('new message from ', username);
// const unreadIndicator = document.querySelector('.unread-indicator');
// unreadIndicator.style.display = 'inline';
console.log('new message from ', username, "recipient: ", recipient, 'currentRecipient: ', currentRecipient );
// Notify about unread message
const contactItem = Array.from(contacts.children).find(
item => item.querySelector('.contact-username').textContent === username
);
@@ -105,8 +98,9 @@ async function initializeSocket() {
const unreadIndicator = contactItem.querySelector('.unread-indicator');
unreadIndicator.style.display = 'inline';
}
// Avoid duplicating contacts
if (!addedContacts.has(username)) {
socket.emit('contacts', username);
socket.emit('contacts', { contact: username, status: "unread" });
console.log('added contact')
// Add the username to the Set of contacts
@@ -145,7 +139,7 @@ async function initializeSocket() {
localStorage.setItem('currentRecipient', currentRecipient);
messages.innerHTML = '';
console.log('Requesting messages for recipient:', currentRecipient);
socket.emit('contacts', currentRecipient);
socket.emit('contacts', { contact: currentRecipient, status: "read"});
// Request previous messages after form submit
socket.emit('get messages', currentRecipient);
}
@@ -178,6 +172,8 @@ async function initializeSocket() {
function addContact(contactUsername, status, socket) {
const contact = document.createElement('li');
contact.className = 'contact-item';
contact.dataset.username = contactUsername;
contact.dataset.unread = status === "unread" ? "true" : "false";
const leftWrapper = document.createElement('div');
leftWrapper.className = 'left-wrapper';
@@ -220,10 +216,22 @@ async function initializeSocket() {
socket.emit('get messages', contactUsername);
socket.emit('read', contactUsername);
unreadIndicator.style.display = 'none';
contact.dataset.unread = "false";
sortContacts();
input.focus();
});
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();