4 Messenger

function attachEvents() {
    console.log('TODO...');

    const textareaMessages = document.querySelector('#messages');
    const inputAuthor = document.querySelector('#author');
    const inputContent = document.querySelector('#content');
    const btnSubmit = document.querySelector('#submit');
    const btnRefresh = document.querySelector('#refresh');

    let baseURL = 'http://localhost:3000/messenger';

    btnSubmit.addEventListener('click', onClickSubmit);
    btnRefresh.addEventListener('click', onClickRefresh);

    function onClickSubmit(e) {
        if (inputAuthor.value !== '' && inputContent.value !== '') {
            fetch(baseURL, {
                method: 'POST',
                body: JSON.stringify({
                    author: inputAuthor.value,
                    content: inputContent.value
                })
            });

            inputAuthor.value = '';
            inputContent.value = '';
        }
    }

    function onClickRefresh(e) {
        fetch(baseURL)
        .then(response => response.json())
        .then(result => showMessages(result));

        function showMessages(data) {
            let messages = Object.values(data).map(x => `${x.author}: ${x.content}`);
            // console.log(messages);

            textareaMessages.value = messages.join('\n');
        }
    }

}

attachEvents();