From 8740802bc6fb91e48a85077ff07d7d439380bf9b Mon Sep 17 00:00:00 2001
From: Dave Smith-Hayes <me@davesmithhayes.com>
Date: Tue, 8 Oct 2024 20:31:53 -0400
Subject: [PATCH] we have a nominally working, albeit ugly, chat application!
 Now I just need to write a talk about deploying shit, and test deploying.

---
 chat-app/frontend/index.js   | 17 +++++++++++++----
 chat-app/src/chat-room.ts    |  5 +++++
 chat-app/src/index.ts        |  3 ++-
 chat-app/static/css/main.css | 25 ++++++++++++++++++++++---
 chat-app/static/js/index.js  | 14 +++++++++++---
 5 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/chat-app/frontend/index.js b/chat-app/frontend/index.js
index 5b34281..76f73f1 100644
--- a/chat-app/frontend/index.js
+++ b/chat-app/frontend/index.js
@@ -14,7 +14,10 @@ socket.onmessage = function (event) {
 }
 
 function newMessageText(name, message) {
-  return `${name}: ${message}`;
+  return [
+    m("span.chatter", name + ": "),
+    m("span.chatter-message", message)
+  ];
 }
 
 const MessageBox = {
@@ -25,10 +28,15 @@ const MessageBox = {
   }
 };
 
+function clearMessageBox() {
+  const messageBox = document.getElementById("message");
+  messageBox.value = "";
+}
+
 function sendMessage(e) {
   e.preventDefault();
-  const form = new FormData(e.target);
 
+  const form = new FormData(e.target);
   const message = {};
 
   for (const [key, value] of form.entries()) {
@@ -36,14 +44,15 @@ function sendMessage(e) {
   }
 
   socket.send(JSON.stringify(message));
+  clearMessageBox();
 }
 
 const MessageInput = {
   view: function () {
-    return m("div", [
+    return m("div.chat-input", [
       m("form", { method: "post", onsubmit: sendMessage }, [
         m("input", { name: "chatter", placeholder: "Name" }),
-        m("input", { name: "message", placeholder: "Message" }),
+        m("input", { name: "message", placeholder: "Message", id: "message", required: true }),
         m("input", { type: "submit", value: "Send" })
       ])
     ]);
diff --git a/chat-app/src/chat-room.ts b/chat-app/src/chat-room.ts
index f3e41cd..f279fa6 100644
--- a/chat-app/src/chat-room.ts
+++ b/chat-app/src/chat-room.ts
@@ -40,6 +40,11 @@ export class ChatRoom extends EventEmitter {
   public getNewestMessage(): Message {
     const message = this.messages[this.messages - 1];
   }
+
+  // set up the lifetime to clear messages in memory
+  protected pruneMessages(lifetime: number): void {
+
+  }
 }
 
 export const chatRoom = new ChatRoom();
diff --git a/chat-app/src/index.ts b/chat-app/src/index.ts
index 2ecd59b..31dfef2 100644
--- a/chat-app/src/index.ts
+++ b/chat-app/src/index.ts
@@ -32,8 +32,9 @@ app.get("/chat-service", upgradeWebSocket((c) => {
     onClose() {
       console.log("Connection closed.");
     },
-    onError(event) {
+    onError(event, ws) {
       console.error(event);
+      ws.close();
     }
   }
 }));
diff --git a/chat-app/static/css/main.css b/chat-app/static/css/main.css
index 31c767a..f95a028 100644
--- a/chat-app/static/css/main.css
+++ b/chat-app/static/css/main.css
@@ -1,4 +1,23 @@
-input, label {
-    display: block;
-    margin-top: 0.5em;
+.messages .message {
+    padding: 0.5em;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    margin-bottom: 0.5em;
+}
+.chatter {
+    font-weight: bold;
+}
+
+.chat-input > form {
+    display: flex;
+    width: 100%;
+}
+.chat-input > form > input {
+    padding: 0.7em;
+}
+.chat-input > form > input[name="chatter"] {
+    width: 20%;
+}
+.chat-input > form > input[name="message"] {
+    width: 75%;
 }
diff --git a/chat-app/static/js/index.js b/chat-app/static/js/index.js
index 97643c3..5bfcd9a 100644
--- a/chat-app/static/js/index.js
+++ b/chat-app/static/js/index.js
@@ -1726,7 +1726,14 @@ function createWebSocket() {
 
 // frontend/index.js
 function newMessageText(name, message) {
-  return `${name}: ${message}`;
+  return [
+    import_mithril.default("span.chatter", name + ": "),
+    import_mithril.default("span.chatter-message", message)
+  ];
+}
+function clearMessageBox() {
+  const messageBox = document.getElementById("message");
+  messageBox.value = "";
 }
 function sendMessage(e) {
   e.preventDefault();
@@ -1736,6 +1743,7 @@ function sendMessage(e) {
     message[key] = value;
   }
   socket.send(JSON.stringify(message));
+  clearMessageBox();
 }
 var messages = [];
 var socket = createWebSocket();
@@ -1755,10 +1763,10 @@ var MessageBox = {
 };
 var MessageInput = {
   view: function() {
-    return import_mithril.default("div", [
+    return import_mithril.default("div.chat-input", [
       import_mithril.default("form", { method: "post", onsubmit: sendMessage }, [
         import_mithril.default("input", { name: "chatter", placeholder: "Name" }),
-        import_mithril.default("input", { name: "message", placeholder: "Message" }),
+        import_mithril.default("input", { name: "message", placeholder: "Message", id: "message", required: true }),
         import_mithril.default("input", { type: "submit", value: "Send" })
       ])
     ]);