web-chat/frontend/js/chat.js

const form = document.getElementById('form');
const input = document.getElementById('input');
const recipientForm = document.getElementById('recipientForm');
const recipientInput = document.getElementById('recipient');
const messages = document.getElementById('messages');
const messageBox = document.getElementById('messageBox');
const contacts = document.getElementById('contacts');

let currentRecipient = null;

window.onload = () => {
    initializeRecipient();
    if(!recipientInput.value){
        recipientInput.focus();
    }
}

function initializeRecipient() {
    const savedRecipient = localStorage.getItem('currentRecipient');
    if (savedRecipient) {
        currentRecipient = savedRecipient;
        recipientInput.value = savedRecipient;
        input.focus();
        return currentRecipient;
    }
}

async function getToken() {
    try {
        const response = await fetch('/auth/token');
        if (!response.ok) {
            console.log('Network response was not ok');
            return null;
        }
        return await response.text();
    } catch (error) {
        console.error('There was a problem with token fetching', error);
        return null;
    }
}

async function initializeSocket() {
    const token = await getToken();
    if (!token) {
        console.error('Not logged in');
        return;
    }

    const socket = io({
        auth: {
            token: token,
            serverOffset: 0
        }
    });

    socket.on('connect', () => {
        console.log('Connected to server');
        const initialRecipient = initializeRecipient();
        socket.emit('get messages', initialRecipient);
    });

    // Socket for displaying current username
    let currentUsername = null;
    socket.on('username', (username) => {
        currentUsername = username;
        document.getElementById('input').placeholder = `Send message as: ${username}`;
    })

    // 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) => {
        console.log('Received message:', msg);
        const { username, content, recipient } = msg;

        // username is sender username!!!

        // Display messages
        if (recipient === currentRecipient || username === currentRecipient) {
            const item = document.createElement('li');
            item.textContent = `${username}: ${content}`;
            messages.appendChild(item);
            messages.scrollTop = messages.scrollHeight;
        }

        // Add and display contact
        if (recipient !== currentRecipient && username !== currentUsername) {
            // Check if the contact has already been added
            if (!addedContacts.has(username)) {
                try{
                    socket.emit('contacts', username);
                } catch (err) {
                    messageBox.innerHTML = 'Failed to fetch contact api';
                    console.log('Failed to add contact', err);
                }
                // Add the username to the Set of contacts
                addedContacts.add(username);
            }
        }
    });

    // Contacts handler
    socket.on('contacts', (contacts) => {
        console.log('contactArray: ', contacts);
        for(const contact in contacts) {
            addContact(contact, socket);
        }
    })

    // If not previous messages found on backend
    socket.on('no messages', () => {
        console.log('No previous messages found');
        messages.innerHTML = '<p>No messages found</p>';
    });

    // Error messages from backend
    socket.on('socket error', (msg) => {
        console.log('There was an error: ', msg)
        messageBox.innerHTML = msg;
    })

    // Recipient form, it request previous messages after submitting
    recipientForm.addEventListener('submit', (e) => {
        e.preventDefault();
        if (recipientInput.value) {
            currentRecipient = recipientInput.value;
            localStorage.setItem('currentRecipient', currentRecipient);
            messages.innerHTML = '';
            console.log('Requesting messages for recipient:', currentRecipient);

            // Request previous messages after form submit
            socket.emit('get messages', currentRecipient);
        }
    });

    // Form for sending messages
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (input.value && currentRecipient) {
            console.log('Sending message:', input.value, 'to', currentRecipient);
            socket.emit('chat message', { content: input.value, recipient: currentRecipient });
            messages.scrollTop = messages.scrollHeight;
            input.value = '';
        }
    });

    // Socket connection for getting previous messages
    socket.on('messages history', (messagesHistory) => {
        console.log('Received messages history:', messagesHistory);
        messages.innerHTML = ''; // Clear previous messages
        for (const message of messagesHistory) {
            const item = document.createElement('li');
            item.textContent = `${message.username}: ${message.content}`;
            messages.appendChild(item);
        }
        messages.scrollTop = messages.scrollHeight;
    });

    function addContact(username, socket) {
        const contact = document.createElement('li');
        contact.className = 'contact-item';

        const usernameSpan = document.createElement('span');
        usernameSpan.textContent = username;
        usernameSpan.className = 'contact-username';

        const removeButton = document.createElement('button');
        removeButton.textContent = 'X';
        removeButton.className = 'remove-contact';

        contact.appendChild(usernameSpan);
        contact.appendChild(removeButton);

        usernameSpan.addEventListener('click', () => {
            currentRecipient = username;
            recipientInput.value = username;
            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)'
                }
            })

        });

        contacts.appendChild(contact);
        console.log('Created contact:', username);
    }
}


initializeSocket();