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);
    });
    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', (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/incoming messages
        if (recipient !== currentRecipient && username !== currentUsername) {
            // Check if the contact has already been added
            if (!addedContacts.has(username)) {
                addContact(username, socket);
                // Add the username to the Set of added contacts
                addedContacts.add(username);
            }
        }

        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();
                contacts.removeChild(contact);
                addedContacts.delete(username);
            });

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

    });

    // 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;
    });
}

initializeSocket();