05. Messenger

function attachEvents() {
    const url = 'http://localhost:3030/jsonstore/messenger'
    const textArea = document.getElementById('messages');
    const sendBtn = document.getElementById('submit');
    const refreshBtn = document.getElementById('refresh');

    const senderName = document.querySelector('#controls > div:nth-child(1) > input[type=text]')
    const senderMsg = document.querySelector('#controls > div:nth-child(2) > input[type=text]')

    senderName.value = 'Spami'
    senderMsg.value = 'Hello, George nice to see you! :)))'

    sendBtn.addEventListener('click', onSend);
    refreshBtn.addEventListener('click', onRefresh);

    loadMessages()

    function loadMessages() {
        fetch(url).then(response => response.json()).then(result => {
            for (let i in result) {
                console.log(result[i])
                textArea.textContent += `${result[i].author}: ${result[i].content}\n`
            }
        })
    }


    function onSend() {
        let authorName = senderName.value
        let msgText = senderMsg.value;

        fetch(url, {
            method: "POST",
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify({
                author: authorName,
                content: msgText
            })
        })

    }

    function onRefresh() {
        textArea.textContent = ""
        fetch(url)
            .then(response => response.json())
            .then(result => {
                for (let i in result) {
                    console.log(result[i])
                    textArea.textContent += `${result[i].author}: ${result[i].content}\n`
                }
            })
        senderName.value = ""
        senderMsg.value = ""
    }

}

attachEvents();