remodel ChatViewModel

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -5,9 +5,10 @@ import * as React from "bloatless-react";
 import { ChatMessage, ChatMessageStatus } from "../../Model/Chat/chatModel";
 
 import ChatViewModel from "./chatViewModel";
+import MessagePageViewModel from "../Pages/messagePageViewModel";
 
 export default class ChatMessageViewModel {
-  chatViewModel: ChatViewModel;
+  messagePageViewModel: MessagePageViewModel;
 
   // data
   chatMessage: ChatMessage;
@@ -25,10 +26,10 @@ export default class ChatMessageViewModel {
     navigator.clipboard.writeText(this.body.value);
   };
   resendMessage = (): void => {
-    this.chatViewModel.sendMessageFromBody(this.body.value);
+    this.messagePageViewModel.sendMessageFromBody(this.body.value);
   };
   decryptMessage = (): void => {
-    this.chatViewModel.decryptMessage(this);
+    this.messagePageViewModel.decryptMessage(this);
   };
 
   // load
@@ -42,11 +43,11 @@ export default class ChatMessageViewModel {
 
   // init
   constructor(
-    chatViewModel: ChatViewModel,
+    messagePageViewModel: MessagePageViewModel,
     chatMessage: ChatMessage,
     sentByUser: boolean
   ) {
-    this.chatViewModel = chatViewModel;
+    this.messagePageViewModel = messagePageViewModel;
 
     this.chatMessage = chatMessage;
     this.sentByUser = sentByUser;

src/ViewModel/Chat/chatViewModel.ts

@@ -4,10 +4,10 @@ import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";
 import StorageModel, { filePaths } from "../../Model/Global/storageModel";
 
 import ChatListViewModel from "./chatListViewModel";
-import ChatMessageViewModel from "./chatMessageViewModel";
-import { Color } from "../../colors";
+import MessagePageViewModel from "../Pages/messagePageViewModel";
+import SettingsPageViewModel from "../Pages/settingsPageViewModel";
 import SettingsViewModel from "../Global/settingsViewModel";
-import { localeCompare } from "../../Model/Utility/utility";
+import TaskPageViewModel from "../Pages/taskPageViewModel";
 
 export default class ChatViewModel {
   chatModel: ChatModel;
@@ -15,46 +15,17 @@ export default class ChatViewModel {
   settingsViewModel: SettingsViewModel;
   chatListViewModel: ChatListViewModel;
 
+  taskPageViewModel: TaskPageViewModel;
+  messagePageViewModel: MessagePageViewModel;
+  settingsPageViewModel: SettingsPageViewModel;
+
   // state
   index: React.State<number> = new React.State(0);
 
-  primaryChannel: React.State<string> = new React.State("");
-  primaryChannelInput: React.State<string> = new React.State("");
-
-  secondaryChannels: React.ListState<string> = new React.ListState();
-  newSecondaryChannelInput: React.State<string> = new React.State("");
-
-  encryptionKeyInput: React.State<string> = new React.State("");
-  shouldShowEncryptionKey: React.State<boolean> = new React.State(false);
-  encryptionKeyInputType: React.State<"text" | "password"> =
-    React.createProxyState([this.shouldShowEncryptionKey], () =>
-      this.shouldShowEncryptionKey.value == true ? "text" : "password"
-    );
-
-  color: React.State<Color> = new React.State<Color>(Color.Standard);
-
   selectedPage: React.State<ChatPageType> = new React.State<ChatPageType>(
     ChatPageType.Messages
   );
 
-  chatMessageViewModels: React.MapState<ChatMessageViewModel> =
-    new React.MapState();
-  composingMessage: React.State<string> = new React.State("");
-
-  // guards
-  cannotSetPrimaryChannel: React.State<boolean> = React.createProxyState(
-    [this.primaryChannel, this.primaryChannelInput],
-    () =>
-      this.primaryChannelInput.value == "" ||
-      this.primaryChannelInput.value == this.primaryChannel.value
-  );
-  cannotAddSecondaryChannel: React.State<boolean> = React.createProxyState(
-    [this.newSecondaryChannelInput],
-    () => this.newSecondaryChannelInput.value == ""
-  );
-  cannotSetEncryptionKey: React.State<boolean>;
-  cannotSendMessage: React.State<boolean>;
-
   // sorting
   updateIndex = (): void => {
     this.index.value = this.chatModel.index;
@@ -63,95 +34,12 @@ export default class ChatViewModel {
   // view
   open = (): void => {
     this.chatListViewModel.openChat(this);
-    this.loadMessages();
   };
 
   close = (): void => {
     this.chatListViewModel.closeChat();
   };
 
-  // add
-  addChatMessage = (chatMessage: ChatMessage): void => {
-    const chatMessageModel = new ChatMessageViewModel(
-      this,
-      chatMessage,
-      chatMessage.sender == this.settingsViewModel.username.value
-    );
-
-    const existingChatMessageViewModel: ChatMessageViewModel | undefined =
-      this.chatMessageViewModels.value.get(chatMessage.id);
-    if (existingChatMessageViewModel != undefined) {
-      existingChatMessageViewModel.body.value = chatMessage.body;
-      existingChatMessageViewModel.status.value = chatMessage.status;
-    } else {
-      this.chatMessageViewModels.set(chatMessage.id, chatMessageModel);
-    }
-  };
-
-  // settings
-  setPrimaryChannel = (): void => {
-    this.chatModel.setPrimaryChannel(this.primaryChannelInput.value);
-    this.primaryChannel.value = this.chatModel.info.primaryChannel;
-    this.chatListViewModel.updateIndices();
-  };
-
-  addSecondaryChannel = (): void => {
-    this.secondaryChannels.add(this.newSecondaryChannelInput.value);
-    this.newSecondaryChannelInput.value = "";
-    this.storeSecondaryChannels();
-    this.loadSecondaryChannels();
-  };
-
-  removeSecondaryChannel = (secondaryChannel: string): void => {
-    this.secondaryChannels.remove(secondaryChannel);
-    this.storeSecondaryChannels();
-  };
-
-  storeSecondaryChannels = (): void => {
-    this.chatModel.setSecondaryChannels([
-      ...this.secondaryChannels.value.values(),
-    ]);
-  };
-
-  setEncryptionKey = (): void => {
-    this.chatModel.setEncryptionKey(this.encryptionKeyInput.value);
-
-    // disable button
-    this.encryptionKeyInput.callSubscriptions();
-  };
-
-  setColor = (newColor: Color): void => {
-    this.color.value = newColor;
-    this.chatModel.setColor(newColor);
-  };
-
-  remove = (): void => {
-    this.close();
-    this.chatModel.delete();
-    this.chatListViewModel.loadChats();
-  };
-
-  // messaging
-  sendMessage = (): void => {
-    if (this.cannotSendMessage.value == true) return;
-
-    this.sendMessageFromBody(this.composingMessage.value);
-    this.composingMessage.value = "";
-  };
-
-  sendMessageFromBody = (body: string): void => {
-    this.chatModel.sendMessage(body);
-  };
-
-  decryptMessage = async (
-    messageViewModel: ChatMessageViewModel
-  ): Promise<void> => {
-    const chatMessage: ChatMessage = messageViewModel.chatMessage;
-    await this.chatModel.decryptMessage(chatMessage);
-    this.chatModel.addMessage(chatMessage);
-    messageViewModel.loadData();
-  };
-
   // load
   loadPageSelection = (): void => {
     const path: string[] = StorageModel.getPath(
@@ -168,21 +56,6 @@ export default class ChatViewModel {
     });
   };
 
-  loadSecondaryChannels = (): void => {
-    this.secondaryChannels.clear();
-    for (const secondaryChannel of this.chatModel.info.secondaryChannels.sort(
-      localeCompare
-    )) {
-      this.secondaryChannels.add(secondaryChannel);
-    }
-  };
-
-  loadMessages = (): void => {
-    for (const chatMessage of this.chatModel.messages) {
-      this.addChatMessage(chatMessage);
-    }
-  };
-
   // init
   constructor(
     chatModel: ChatModel,
@@ -196,34 +69,22 @@ export default class ChatViewModel {
     this.settingsViewModel = settingsViewModel;
     this.chatListViewModel = chatListViewModel;
 
+    // page viewModels
+    this.taskPageViewModel = new TaskPageViewModel(
+      this.chatModel.fileModel.taskModel,
+      this.storageModel
+    );
+    this.messagePageViewModel = new MessagePageViewModel(this);
+    this.settingsPageViewModel = new SettingsPageViewModel(this);
+
     // handlers
     chatModel.setMessageHandler((chatMessage) => {
-      this.addChatMessage(chatMessage);
+      this.messagePageViewModel.addChatMessage(chatMessage);
     });
 
     // load
-    this.primaryChannel.value = chatModel.info.primaryChannel;
-    this.primaryChannelInput.value = chatModel.info.primaryChannel;
-
-    this.encryptionKeyInput.value = chatModel.info.encryptionKey;
-    this.cannotSetEncryptionKey = React.createProxyState(
-      [this.encryptionKeyInput],
-      () => this.encryptionKeyInput.value == this.chatModel.info.encryptionKey
-    );
-
-    this.color.value = chatModel.color;
-
-    this.loadSecondaryChannels();
     this.loadPageSelection();
     this.updateIndex();
-
-    // guards
-    this.cannotSendMessage = React.createProxyState(
-      [this.settingsViewModel.username, this.composingMessage],
-      () =>
-        this.settingsViewModel.username.value == "" ||
-        this.composingMessage.value == ""
-    );
   }
 }
 

src/ViewModel/Pages/messagePageViewModel.ts

@@ -0,0 +1,78 @@
+import * as React from "bloatless-react";
+
+import { ChatMessage } from "../../Model/Chat/chatModel";
+import ChatMessageViewModel from "../Chat/chatMessageViewModel";
+import ChatViewModel from "../Chat/chatViewModel";
+
+export default class MessagePageViewModel {
+  chatViewModel: ChatViewModel;
+
+  // state
+  chatMessageViewModels: React.MapState<ChatMessageViewModel> =
+    new React.MapState();
+  composingMessage: React.State<string> = new React.State("");
+
+  // guards
+  cannotSendMessage: React.State<boolean>;
+
+  // methods
+  addChatMessage = (chatMessage: ChatMessage): void => {
+    const chatMessageModel = new ChatMessageViewModel(
+      this,
+      chatMessage,
+      chatMessage.sender == this.chatViewModel.settingsViewModel.username.value
+    );
+
+    const existingChatMessageViewModel: ChatMessageViewModel | undefined =
+      this.chatMessageViewModels.value.get(chatMessage.id);
+    if (existingChatMessageViewModel != undefined) {
+      existingChatMessageViewModel.body.value = chatMessage.body;
+      existingChatMessageViewModel.status.value = chatMessage.status;
+    } else {
+      this.chatMessageViewModels.set(chatMessage.id, chatMessageModel);
+    }
+  };
+
+  // messaging
+  sendMessage = (): void => {
+    if (this.cannotSendMessage.value == true) return;
+
+    this.sendMessageFromBody(this.composingMessage.value);
+    this.composingMessage.value = "";
+  };
+
+  sendMessageFromBody = (body: string): void => {
+    this.chatViewModel.chatModel.sendMessage(body);
+  };
+
+  decryptMessage = async (
+    messageViewModel: ChatMessageViewModel
+  ): Promise<void> => {
+    const chatMessage: ChatMessage = messageViewModel.chatMessage;
+    await this.chatViewModel.chatModel.decryptMessage(chatMessage);
+    this.chatViewModel.chatModel.addMessage(chatMessage);
+    messageViewModel.loadData();
+  };
+
+  // load
+  loadData = (): void => {
+    this.cannotSendMessage = React.createProxyState(
+      [this.chatViewModel.settingsViewModel.username, this.composingMessage],
+      () =>
+        this.chatViewModel.settingsViewModel.username.value == "" ||
+        this.composingMessage.value == ""
+    );
+  };
+
+  loadMessages = (): void => {
+    for (const chatMessage of this.chatViewModel.chatModel.messages) {
+      this.addChatMessage(chatMessage);
+    }
+  };
+
+  // init
+  constructor(chatViewModel: ChatViewModel) {
+    this.chatViewModel = chatViewModel;
+    this.loadData();
+  }
+}

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -0,0 +1,124 @@
+import * as React from "bloatless-react";
+
+import ChatViewModel from "../Chat/chatViewModel";
+import { Color } from "../../colors";
+
+export default class SettingsPageViewModel {
+  chatViewModel: ChatViewModel;
+
+  // state
+  primaryChannel: React.State<string> = new React.State("");
+  primaryChannelInput: React.State<string> = new React.State("");
+
+  secondaryChannels: React.ListState<string> = new React.ListState();
+  newSecondaryChannelInput: React.State<string> = new React.State("");
+
+  encryptionKeyInput: React.State<string> = new React.State("");
+  shouldShowEncryptionKey: React.State<boolean> = new React.State(false);
+  encryptionKeyInputType: React.State<"text" | "password"> =
+    React.createProxyState([this.shouldShowEncryptionKey], () =>
+      this.shouldShowEncryptionKey.value == true ? "text" : "password"
+    );
+
+  color: React.State<Color> = new React.State<Color>(Color.Standard);
+
+  // guards
+  cannotSetPrimaryChannel: React.State<boolean> = React.createProxyState(
+    [this.primaryChannel, this.primaryChannelInput],
+    () =>
+      this.primaryChannelInput.value == "" ||
+      this.primaryChannelInput.value == this.primaryChannel.value
+  );
+  cannotAddSecondaryChannel: React.State<boolean> = React.createProxyState(
+    [this.newSecondaryChannelInput],
+    () => this.newSecondaryChannelInput.value == ""
+  );
+  cannotSetEncryptionKey: React.State<boolean>;
+
+  // methods
+  setPrimaryChannel = (): void => {
+    this.chatViewModel.chatModel.setPrimaryChannel(
+      this.primaryChannelInput.value
+    );
+    this.primaryChannel.value =
+      this.chatViewModel.chatModel.info.primaryChannel;
+    this.chatViewModel.chatListViewModel.updateIndices();
+  };
+
+  addSecondaryChannel = (): void => {
+    this.secondaryChannels.add(this.newSecondaryChannelInput.value);
+    this.newSecondaryChannelInput.value = "";
+    this.storeSecondaryChannels();
+    this.loadSecondaryChannels();
+  };
+
+  removeSecondaryChannel = (secondaryChannel: string): void => {
+    this.secondaryChannels.remove(secondaryChannel);
+    this.storeSecondaryChannels();
+  };
+
+  storeSecondaryChannels = (): void => {
+    this.chatViewModel.chatModel.setSecondaryChannels([
+      ...this.secondaryChannels.value.values(),
+    ]);
+  };
+
+  setEncryptionKey = (): void => {
+    this.chatViewModel.chatModel.setEncryptionKey(
+      this.encryptionKeyInput.value
+    );
+
+    // disable button
+    this.encryptionKeyInput.callSubscriptions();
+  };
+
+  setColor = (newColor: Color): void => {
+    this.color.value = newColor;
+    this.chatViewModel.chatModel.setColor(newColor);
+  };
+
+  remove = (): void => {
+    this.chatViewModel.close();
+    this.chatViewModel.chatModel.delete();
+    this.chatViewModel.chatListViewModel.loadChats();
+  };
+
+  // load
+  loadViewRelevantData = (): void => {
+    this.primaryChannel.value =
+      this.chatViewModel.chatModel.info.primaryChannel;
+
+    this.color.value = this.chatViewModel.chatModel.color;
+
+    this.cannotSetEncryptionKey = React.createProxyState(
+      [this.encryptionKeyInput],
+      () =>
+        this.encryptionKeyInput.value ==
+        this.chatViewModel.chatModel.info.encryptionKey
+    );
+  };
+
+  loadData = (): void => {
+    this.primaryChannelInput.value =
+      this.chatViewModel.chatModel.info.primaryChannel;
+
+    this.loadSecondaryChannels();
+
+    this.encryptionKeyInput.value =
+      this.chatViewModel.chatModel.info.encryptionKey;
+  };
+
+  loadSecondaryChannels = (): void => {
+    this.secondaryChannels.clear();
+    for (const secondaryChannel of this.chatViewModel.chatModel
+      .secondaryChannels) {
+      this.secondaryChannels.add(secondaryChannel);
+    }
+  };
+
+  // init
+  constructor(chatViewModel: ChatViewModel) {
+    this.chatViewModel = chatViewModel;
+    this.loadViewRelevantData();
+  }
+}

src/ViewModel/Pages/taskPageViewModel.ts

@@ -2,14 +2,12 @@ import * as React from "bloatless-react";
 
 import TaskModel, {
   BoardInfoFileContent,
-  TaskFileContent,
 } from "../../Model/Files/taskModel";
 
 import StorageModel from "../../Model/Global/storageModel";
 
-export default class TaskViewModel {
+export default class TaskPageViewModel {
   taskModel: TaskModel;
-  storageModel: StorageModel;
 
   // state
   newBoardNameInput: React.State<string> = new React.State("");
@@ -33,6 +31,5 @@ export default class TaskViewModel {
   // init
   constructor(taskModel: TaskModel, storageModel: StorageModel) {
     this.taskModel = taskModel;
-    this.storageModel = storageModel;
   }
 }