add connectionViewModel

src/ViewModel/connectionViewModel.tsx

@@ -0,0 +1,53 @@
+import * as React from "bloatless-react";
+
+import ConnectionModel from "../Model/connectionModel";
+import { Message } from "udn-frontend";
+
+export default class ConnectionViewModel {
+  connectionModel: ConnectionModel;
+
+  // state
+  serverAddressInput: React.State<string> = new React.State("");
+  isConnected: React.State<boolean> = new React.State(false);
+
+  // toggles
+  cannotConnect: React.State<boolean> = React.createProxyState(
+    [this.serverAddressInput, this.isConnected],
+    () =>
+      (this.isConnected.value == true &&
+        this.serverAddressInput.value == this.connectionModel.address) ||
+      this.serverAddressInput.value == ""
+  );
+  cannotDisonnect: React.State<boolean> = React.createProxyState(
+    [this.isConnected],
+    () => this.isConnected.value == false
+  );
+
+  // handlers
+  connectionChangeHandler = (): void => {
+    this.isConnected.value = this.connectionModel.isConnected;
+    if (this.connectionModel.address) {
+      this.serverAddressInput.value = this.connectionModel.address;
+    }
+  };
+
+  messageHandler = (data: Message): void => {};
+
+  // methods
+  connect = (): void => {
+    this.connectionModel.connect(this.serverAddressInput.value);
+  };
+
+  disconnect = (): void => {
+    this.connectionModel.disconnect();
+  };
+
+  // init
+  constructor() {
+    const connectionModel = new ConnectionModel({
+      connectionChangeHandler: this.connectionChangeHandler,
+      messageHandler: this.messageHandler,
+    });
+    this.connectionModel = connectionModel;
+  }
+}

src/ViewModel/settingsViewModel.ts

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
 import SettingsModel from "../Model/settingsModel";
+import StorageModel from "../Model/storageModel";
 
 export default class SettingsViewModel {
   settingsModel: SettingsModel;
@@ -10,7 +11,7 @@ export default class SettingsViewModel {
   firstDayOfWeekInput: React.State<number> = new React.State(0);
 
   // toggles
-  cannotSetName = React.createProxyState(
+  cannotSetName: React.State<boolean> = React.createProxyState(
     [this.nameInput],
     () =>
       this.nameInput.value == "" ||
@@ -28,7 +29,8 @@ export default class SettingsViewModel {
   };
 
   // init
-  constructor(settingsModel: SettingsModel) {
+  constructor(storageModel: StorageModel) {
+    const settingsModel = new SettingsModel(storageModel);
     this.settingsModel = settingsModel;
 
     this.nameInput.value = settingsModel.username;