add guard cannotSendMessage

src/Model/chatModel.ts

@@ -161,7 +161,10 @@ export class ChatModel {
   };
 
   // messaging
-  sendMessage = (body: string): void => {
+  sendMessage = (body: string): boolean => {
+    const senderName = this.settingsModel.username;
+    if (senderName == "") return false;
+
     const allChannels = [this.info.primaryChannel];
     for (const secondaryChannel of this.info.secondaryChannels) {
       allChannels.push(secondaryChannel);
@@ -171,11 +174,12 @@ export class ChatModel {
 
     const chatMessage: ChatMessage = ChatModel.createChatMessage(
       combinedChannel,
-      this.settingsModel.username,
+      senderName,
       body
     );
 
     this.connectionModel.sendMessageOrStore(chatMessage);
+    return true;
   };
 
   // memory

src/View/homePage.tsx

@@ -96,7 +96,7 @@ export function HomePage(
           <span>{translations.homePage.yourNameLabel}</span>
           <input
             placeholder={translations.homePage.yourNamePlaceholder}
-            bind:value={settingsViewModel.nameInput}
+            bind:value={settingsViewModel.usernameInput}
             on:enter={settingsViewModel.setName}
           ></input>
         </div>

src/ViewModel/chatListViewModel.tsx

@@ -3,11 +3,13 @@ import * as React from "bloatless-react";
 import ChatListModel from "../Model/chatListModel";
 import { ChatModel } from "../Model/chatModel";
 import ChatViewModel from "./chatViewModel";
+import SettingsViewModel from "./settingsViewModel";
 import StorageModel from "../Model/storageModel";
 
 export default class ChatListViewModel {
   chatListModel: ChatListModel;
   storageModel: StorageModel;
+  settingsViewModel: SettingsViewModel;
 
   // state
   newChatPrimaryChannel: React.State<string> = new React.State("");
@@ -42,8 +44,13 @@ export default class ChatListViewModel {
   };
 
   createChatViewModel = (chatModel: ChatModel): ChatViewModel => {
-    return new ChatViewModel(chatModel, this.storageModel, this);
+    return new ChatViewModel(
-  }
+      chatModel,
+      this.storageModel,
+      this.settingsViewModel,
+      this
+    );
+  };
 
   // view
   openChat = (chatViewModel: ChatViewModel): void => {
@@ -59,7 +66,7 @@ export default class ChatListViewModel {
     for (const chatViewModel of this.chatViewModels.value) {
       chatViewModel.updateIndex();
     }
-  }
+  };
 
   // restore
   restoreChats = (): void => {
@@ -71,9 +78,14 @@ export default class ChatListViewModel {
   };
 
   // init
-  constructor(chatListModel: ChatListModel, storageModel: StorageModel) {
+  constructor(
+    chatListModel: ChatListModel,
+    storageModel: StorageModel,
+    settingsViewModel: SettingsViewModel
+  ) {
     this.chatListModel = chatListModel;
     this.storageModel = storageModel;
+    this.settingsViewModel = settingsViewModel;
 
     this.restoreChats();
   }

src/ViewModel/chatViewModel.tsx

@@ -5,11 +5,13 @@ import StorageModel, { storageKeys } from "../Model/storageModel";
 import ChatListViewModel from "./chatListViewModel";
 import { ChatModel } from "../Model/chatModel";
 import { Color } from "./colors";
+import SettingsViewModel from "./settingsViewModel";
 import { localeCompare } from "../Model/Utility/utility";
 
 export default class ChatViewModel {
   chatModel: ChatModel;
   storageModel: StorageModel;
+  settingsViewModel: SettingsViewModel;
   chatListViewModel: ChatListViewModel;
 
   // state
@@ -44,6 +46,7 @@ export default class ChatViewModel {
       this.primaryChannelInput.value == this.primaryChannel.value
   );
   cannotSetEncryptionKey: React.State<boolean>;
+  cannotSendMessage: React.State<boolean>;
 
   // sorting
   updateIndex = (): void => {
@@ -100,13 +103,13 @@ export default class ChatViewModel {
     this.close();
     this.chatModel.delete();
     this.chatListViewModel.restoreChats();
-  }
+  };
 
   // messaging
   sendMessage = (): void => {
     this.chatModel.sendMessage(this.composingMessage.value);
     this.composingMessage.value = "";
-  }
+  };
 
   // restore
   restorePageSelection = (): void => {
@@ -134,10 +137,12 @@ export default class ChatViewModel {
   constructor(
     chatModel: ChatModel,
     storageModel: StorageModel,
+    settingsViewModel: SettingsViewModel,
     chatListViewModel: ChatListViewModel
   ) {
     this.chatModel = chatModel;
     this.storageModel = storageModel;
+    this.settingsViewModel = settingsViewModel;
     this.chatListViewModel = chatListViewModel;
 
     this.primaryChannel.value = chatModel.info.primaryChannel;
@@ -149,6 +154,11 @@ export default class ChatViewModel {
       () => this.encryptionKeyInput.value == this.chatModel.info.encryptionKey
     );
 
+    this.cannotSendMessage = React.createProxyState(
+      [this.settingsViewModel.username],
+    () => this.settingsViewModel.username.value == ""
+    );
+
     this.color.value = chatModel.color;
 
     this.restoreSecondaryChannels();

src/ViewModel/settingsViewModel.ts

@@ -6,21 +6,23 @@ export default class SettingsViewModel {
   settingsModel: SettingsModel;
 
   // state
-  nameInput: React.State<string> = new React.State("");
+  username: React.State<string> = new React.State("");
+  usernameInput: React.State<string> = new React.State("");
   firstDayOfWeekInput: React.State<number> = new React.State(0);
 
   // guards
   cannotSetName: React.State<boolean> = React.createProxyState(
-    [this.nameInput],
+    [this.usernameInput],
     () =>
-      this.nameInput.value == "" ||
+      this.usernameInput.value == "" ||
-      this.nameInput.value == this.settingsModel.username
+      this.usernameInput.value == this.settingsModel.username
   );
 
   // set
   setName = (): void => {
-    this.settingsModel.setName(this.nameInput.value);
+    this.settingsModel.setName(this.usernameInput.value);
-    this.nameInput.callSubscriptions();
+    this.username.value = this.settingsModel.username;
+    this.usernameInput.callSubscriptions();
   };
 
   setFirstDayofWeek = (): void => {
@@ -31,7 +33,8 @@ export default class SettingsViewModel {
   constructor(settingsModel: SettingsModel) {
     this.settingsModel = settingsModel;
 
-    this.nameInput.value = settingsModel.username;
+    this.username.value = settingsModel.username;
+    this.usernameInput.value = settingsModel.username;
     this.firstDayOfWeekInput.value = settingsModel.firstDayOfWeek;
 
     // subscriptions

src/index.tsx

@@ -29,7 +29,11 @@ storageModel.print();
 // viewModels
 const settingsViewModel = new SettingsViewModel(settingsModel);
 const connectionViewModel = new ConnectionViewModel(connectionModel);
-const chatListViewModel = new ChatListViewModel(chatListModel, storageModel);
+const chatListViewModel = new ChatListViewModel(
+  chatListModel,
+  storageModel,
+  settingsViewModel
+);
 
 // view
 document.body.append(<div id="background"></div>);