add navigation for chat page

src/ViewModel/chatListViewModel.tsx

@@ -2,14 +2,20 @@ import * as React from "bloatless-react";
 
 import ChatListModel from "../Model/chatListModel";
 import { ChatModel } from "../Model/chatModel";
+import ChatViewModel from "./chatViewModel";
 import StorageModel from "../Model/storageModel";
 
 export default class ChatListViewModel {
+  storageModel: StorageModel;
   chatListModel: ChatListModel;
 
   // state
   newChatPrimaryChannel: React.State<string> = new React.State("");
-  chatModels: React.ListState<ChatModel> = new React.ListState();
+  chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
+
+  selectedChat: React.State<ChatViewModel | undefined> = new React.State<
+  ChatViewModel | undefined
+  >(undefined);
 
   // guards
   cannotCreateChat = React.createProxyState(
@@ -23,23 +29,36 @@ export default class ChatListViewModel {
       this.newChatPrimaryChannel.value
     );
     this.newChatPrimaryChannel.value = "";
-    this.chatModels.add(chatModel);
+
+    const chatViewModel: ChatViewModel = new ChatViewModel(this, chatModel);
+    this.chatViewModels.add(chatViewModel);
   };
 
-  deleteChat = (chat: ChatModel): void => {
-    this.chatListModel.deleteChat(chat);
-    this.chatModels.remove(chat);
+  untrackChat = (chatViewModel: ChatViewModel): void => {
+    this.chatListModel.untrackChat(chatViewModel.chatModel);
+    this.chatViewModels.remove(chatViewModel);
+  };
+
+  openChat = (chatViewModel: ChatViewModel): void => {
+    this.selectedChat.value = chatViewModel;
+  };
+
+  closeChat = (): void => {
+    this.selectedChat.value = undefined;
   };
 
   // restore
   restoreChats = (): void => {
-    for (const chat of this.chatListModel.chatModels.values()) {
-      this.chatModels.add(chat);
+    for (const chatModel of this.chatListModel.chatModels.values()) {
+      const chatViewModel = new ChatViewModel(this, chatModel);
+      this.chatViewModels.add(chatViewModel);
     }
   };
 
   // init
   constructor(storageModel: StorageModel) {
+    this.storageModel = storageModel;
+
     const chatListModel = new ChatListModel(storageModel);
     this.chatListModel = chatListModel;
 

src/ViewModel/chatViewModel.tsx

@@ -1,13 +1,36 @@
 import * as React from "bloatless-react";
 
+import ChatListViewModel from "./chatListViewModel";
 import { ChatModel } from "../Model/chatModel";
 import StorageModel from "../Model/storageModel";
 
 export default class ChatViewModel {
-    chatModel: ChatModel;
+  chatModel: ChatModel;
+  chatListViewModel: ChatListViewModel;
 
-    // init
-    constructor(storageModel: StorageModel) {
-        
-    }
-}
+  // state
+  primaryChannel: React.State<string> = new React.State("");
+  primaryChannelInput: 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
+  );
+
+  // methods
+  open = () => {
+    this.chatListViewModel.openChat(this);
+  }
+
+  // init
+  constructor(chatListViewModel: ChatListViewModel, chatModel: ChatModel) {
+    this.chatModel = chatModel;
+    this.chatListViewModel = chatListViewModel;
+
+    this.primaryChannel.value = chatModel.info.primaryChannel;
+    this.primaryChannelInput.value = chatModel.info.primaryChannel;
+  }
+}