implement connection handlers

src/Model/connectionModel.ts

@@ -37,13 +37,27 @@ export default class ConnectionModel {
     return this.udn.sendMessage(chatMessage.channel, stringifiedBody);
   };
 
-  handleMessage = (data: Message) => {};
-
   // setup
-  constructor() {
+  constructor(configuration: ConnectionModelConfiguration) {
+    // create frontend
     this.udn = new UDNFrontend();
-    this.udn.onmessage = this.handleMessage;
-    this.udn.onconnect = this.handleConnectionChange;
-    this.udn.ondisconnect = this.handleConnectionChange;
+
+    // setup handlers
+    this.udn.onmessage = (data: Message) => {
+        configuration.messageHandler(data);
+    };
+    this.udn.onconnect = () => {
+        this.handleConnectionChange();
+        configuration.connectionChangeHandler();
+    };
+    this.udn.ondisconnect = () => {
+        this.handleConnectionChange();
+        configuration.connectionChangeHandler();
+    };
   }
 }
+
+export interface ConnectionModelConfiguration {
+  connectionChangeHandler: () => void;
+  messageHandler: (data: Message) => void;
+}

src/View/maintenance.tsx

@@ -1,27 +1,43 @@
-import * as React from 'bloatless-react';
+import * as React from "bloatless-react";
 
-import ConnectionModel from '../Model/connectionModel';
-
-// model
-const connectionModel = new ConnectionModel();
+import ConnectionModel from "../Model/connectionModel";
 
 // state
-const address = new React.State("");
+const addressInput = React.restoreState("maintenance-address", "");
+const connectedAddress = new React.State("");
+const isConnected = new React.State(false);
+
+// model
+const connectionModel = new ConnectionModel({
+  connectionChangeHandler() {
+    isConnected.value = connectionModel.isConnected;
+    connectedAddress.value = connectionModel.address ?? "---";
+  },
+  messageHandler(data) {
+    console.log(data);
+  },
+});
 
 // methods
 function connect() {
-    connectionModel.connect(address.value);
+  connectionModel.connect(addressInput.value);
 }
 
 function disconnect() {
-    connectionModel.disconnect();
+  connectionModel.disconnect();
 }
 
 // view
 document.querySelector("main")!.append(
-    <div class="flex-column">
-        <input bind:value={address}></input>
-        <button on:click={connect}>Connect</button>
-        <button on:click={disconnect}>Disconnect</button>
-    </div>
-)
+  <div class="flex-column">
+    <input bind:value={addressInput}></input>
+    <button on:click={connect} toggle:disabled={isConnected}>
+      Connect
+    </button>
+    <button on:click={disconnect}>Disconnect</button>
+
+    <hr></hr>
+
+    <span subscribe:innerText={connectedAddress}></span>
+  </div>
+);