"use strict"
/* global m */
/* eslint-disable no-console */

function displayItems() {
    return "Nothing to display yet"
}

const TwirlipChat = {
    view: function() {

        return m("main.ba.ma2.pa2", [
            m("h1", {class: "title"}, "twirlip12 chat app"),
            displayItems()
        ])
    }
}


window.onload = () => m.mount(document.body, TwirlipChat)

@@ -58,69 +58,686 @@
 */%0A%0A
-function displayItems() %7B%0A    return %22Nothing to display yet%22
+let chatRoom = %22test%22%0Alet userID = %22anonymous%22%0Alet chatText = %22%22%0Aconst messages = %5B%5D%0A%0Afunction chatRoomChange(event) %7B%0A    chatRoom = event.target.value%0A    // TODO: Other stuff for stream change%0A%7D%0A%0Afunction userIDChange(event) %7B%0A    userID = event.target.value%0A    // TODO: Other stuff for userID change%0A%7D%0A%0Afunction chatTextChange(event) %7B%0A    chatText = event.target.value%0A%7D%0A%0Afunction sendChatMessage() %7B%0A    const timestamp = new Date().toISOString()%0A    const command = %22insert%22%0A    const streamId = %7BchatRoom%7D%0A%0A    sendMessage(%7B command, streamId, chatText, userID, timestamp %7D)%0A    chatText= %22%22%0A%7D%0A%0Afunction sendMessage(message) %7B%0A    // TODO fix%0A    messages.push(message)
 %0A%7D%0A%0A
@@ -780,14 +780,14 @@
 tion
+ 
 () %7B%0A
-%0A
     
@@ -804,114 +804,904 @@
  m(%22
-main.ba.ma2.pa2%22, %5B%0A            m(%22h1%22, %7Bclass: %22title%22%7D, %22twirlip12 chat app%22),%0A            displayItems(
+div%22, %5B%0A            m(%22h4.tc%22, %22Twirlip Chat%22),%0A            m(%22div.ma1%22,%0A                m(%22span.dib.tr.w4%22, %22Chat room:%22),%0A                m(%22input%22, %7Bvalue: chatRoom, onchange: chatRoomChange%7D)%0A            ),%0A            m(%22div.ma1%22,%0A                m(%22span.dib.tr.w4%22, %22User ID:%22),%0A                m(%22input%22, %7Bvalue: userID, onchange: userIDChange%7D)%0A            ),%0A            messages.map(function (message) %7B%0A                var localeTimestamp = new Date(Date.parse(message.timestamp)).toLocaleString()%0A                return m(%22div%22, %5B%0A                    m(%22span%22, %7Btitle: localeTimestamp, style: %22font-size: 50%25;%22%7D, message.userID + %22:%22),%0A                    %22 %22,%0A                    message.chatText%0A                %5D)%0A            %7D),%0A            m(%22br%22),%0A            m(%22textarea%22, %7Bvalue: chatText, onchange: chatTextChange%7D),%0A            m(%22button%22, %7Bonclick: sendChatMessage%7D, %22Send%22
 )%0A  
@@ -1718,17 +1718,16 @@
    %7D%0A%7D%0A%0A
-%0A
 window.o

improve chat app using code from chat-example