api-interaction.js

<script type="application/javascript">
    const root = document.getElementById("messages");
    const messageTextInput = document.getElementById("message_text");

    let can_send_message = true;

    let messages = [];
    const renderMessage = ({text, created}) => {
        let message = document.createElement("div");
        message.innerHTML = `
        <div class="message__created">${created}</div>
            <div class="message__text">${text}</div>

`
        message.classList.add("message")
        root.appendChild(message);
    }

    const renderMessages = () => {
        root.innerHTML = "";
        messages.forEach(message => renderMessage(message));
    }

    const listMessages = () => {
        fetch("/api/messages.list")
            .then(res => (res.json()))
            .then(res => {
                messages = res.messages;
                renderMessages();
            })
    }

    listMessages();
    setInterval(listMessages, 3000);

    const sendMessage = () => {
        if (!can_send_message) return;
        let text = messageTextInput.value;
        can_send_message = false;
        fetch("/api/messages.create", {
            "method": "POST",
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            "body": JSON.stringify({
                "text": text,
            })
        })
            .then(res => (res.json()))
            .then(res => {
                return res;
            })
            .then(data => {
                messages.unshift(data.message);
                renderMessages();
                can_send_message = true;
            })
        messageTextInput.value = "";
    }
</script>