support creating new chats, list chats

src/Model/chatListModel.ts

@@ -10,38 +10,34 @@ export default class ChatListModel {
   chatModels = new Map<string, ChatModel>();
 
   // store & add
-  addChatModel(chatModel: ChatModel) {
+  addChatModel = (chatModel: ChatModel) => {
     this.chatModels.set(chatModel.id, chatModel);
-  }
+  };
 
-  createChat = (primaryChannel: string): void => {
+  createChat = (primaryChannel: string): ChatModel => {
     const id: string = v4();
 
     const chatModel = new ChatModel(this.storageModel, id);
     chatModel.setPrimaryChannel(primaryChannel);
 
     this.addChatModel(chatModel);
+    return chatModel;
   };
 
-  deleteChat = (chatId: string): void => {
-    const chat = this.chatModels.get(chatId);
-    if (!chat) return;
-
+  deleteChat = (chat: ChatModel): void => {
     chat.remove();
-    this.untrackChat(chatId);
+    this.untrackChat(chat);
   };
 
-  untrackChat = (chatId: string): void => {
-    const chat = this.chatModels.get(chatId);
-    if (!chat) return;
-
-    this.chatModels.delete(chatId);
+  untrackChat = (chat: ChatModel): void => {
+    this.chatModels.delete(chat.id);
   };
 
   // restore
   loadChats = (): void => {
     const chatDir = storageKeys.chats;
-    for (const chatId of chatDir) {
+    const chatIds = this.storageModel.list(chatDir);
+    for (const chatId of chatIds) {
       const chatModel = new ChatModel(this.storageModel, chatId);
       this.addChatModel(chatModel);
     }
@@ -50,5 +46,6 @@ export default class ChatListModel {
   // init
   constructor(storageModel: StorageModel) {
     this.storageModel = storageModel;
+    this.loadChats();
   }
 }

src/Model/chatModel.ts

@@ -33,58 +33,62 @@ export class ChatModel {
     return storageKeys.chatOutbox(this.id);
   }
 
-  getMessagePath(id: string): string[] {
+  getMessagePath = (id: string): string[] => {
     return [...this.messageDirPath, id];
-  }
+  };
 
-  getObjectPath(id: string): string[] {
+  getObjectPath = (id: string): string[] => {
     return [...this.objectDirPath, id];
-  }
+  };
 
   // set
-  setPrimaryChannel(primaryChannel: string): void {
+  setPrimaryChannel = (primaryChannel: string): void => {
     this.info.primaryChannel = primaryChannel;
     this.storeInfo();
-  }
+  };
 
-  setSecondaryChannels(secondaryChannels: string[]): void {
+  setSecondaryChannels = (secondaryChannels: string[]): void => {
     this.info.secondaryChannels = secondaryChannels;
     this.storeInfo();
-  }
+  };
 
   // store & add
-  storeInfo(): void {
+  storeInfo = (): void => {
     this.storageModel.storeStringifiable(this.infoPath, this.info);
-  }
+  };
 
-  addMessage(message: ChatMessage): void {
+  addMessage = (message: ChatMessage): void => {
     if (!this.messages.has(message)) {
       this.messages.add(message);
     }
     const messagePath: string[] = this.getMessagePath(message.id);
     this.storageModel.storeStringifiable(messagePath, message);
-  }
+  };
 
-  addObject(object: ChatObject): void {
+  addObject = (object: ChatObject): void => {
     this.objects.set(object.id, object);
     const objectPath: string[] = this.getObjectPath(object.id);
     this.storageModel.storeStringifiable(objectPath, object);
-  }
+  };
 
   // remove
   remove = () => {
     this.unloadData();
     const dirPath = [...storageKeys.chats, this.id];
     this.storageModel.removeRecursive(dirPath);
-  }
+  };
 
   // restore
-  restoreInfo(): void {
+  restoreInfo = (): void => {
     const info: any = this.storageModel.restoreStringifiable(this.infoPath);
-    this.info == info ?? generateChatInfo("0");
-  }
+    if (info != null) {
+      this.info = info
+    } else {
+      this.info = generateChatInfo("0")
+    }
+  };
 
-  restoreMessages(): void {
+  restoreMessages = (): void => {
     const messageIds: string[] = this.storageModel.list(this.messageDirPath);
     if (!Array.isArray(messageIds)) return;
 
@@ -95,32 +99,33 @@ export class ChatModel {
 
       this.messages.add(message);
     }
-  }
+  };
 
-  restoreObjects(): void {
+  restoreObjects = (): void => {
     const objectIds: string[] = this.storageModel.list(this.objectDirPath);
     if (!Array.isArray(objectIds)) return;
 
     for (const objectId of objectIds) {
       const objectPathComponents: string[] = this.getObjectPath(objectId);
-      const object: any = this.storageModel.restoreStringifiable(objectPathComponents);
+      const object: any =
+        this.storageModel.restoreStringifiable(objectPathComponents);
       if (checkIsValidObject(object) == false) return;
       if (object.id != objectId) return;
 
       this.objects.set(objectId, object);
     }
-  }
+  };
 
   // memory
-  loadData(): void {
+  loadData = (): void => {
     this.restoreMessages();
     this.restoreObjects();
-  }
+  };
 
-  unloadData(): void {
+  unloadData = (): void => {
     this.messages.clear();
     this.objects.clear();
-  }
+  };
 
   // init
   constructor(storageModel: StorageModel, chatId: string) {

src/Model/storageModel.ts

@@ -82,7 +82,7 @@ export default class StorageModel {
 
   // utility
   initializeTree = (): void => {
-    console.log("initializing tree")
+    console.log("initializing tree");
 
     this.storageEntryTree = {};
     for (const key of Object.keys(localStorage)) {
@@ -102,6 +102,10 @@ export default class StorageModel {
     }
   };
 
+  print = () => {
+    console.log(JSON.stringify(this.storageEntryTree, null, 4));
+  };
+
   static pathComponentsToKey = (...pathComponents: string[]): string => {
     return pathComponents.join(PATH_COMPONENT_SEPARATOR);
   };

src/View/Components/chatEntry.tsx

@@ -0,0 +1,17 @@
+import * as React from "bloatless-react";
+
+import { ChatModel } from "../../Model/chatModel";
+
+export function ChatEntry(chatModel: ChatModel) {
+  return (
+    <div class="tile flex-column justify-end align-start">
+      <h2>{chatModel.info.primaryChannel}</h2>
+    </div>
+  );
+}
+
+export const ChatModelToChatEntry: React.StateItemConverter<ChatModel> = (
+  chatModel: ChatModel
+) => {
+  return ChatEntry(chatModel);
+};

src/View/homePage.tsx

@@ -4,13 +4,16 @@ import * as React from "bloatless-react";
 
 import { Option, StringToOption } from "./Components/option";
 
+import ChatListViewModel from "../ViewModel/chatListViewModel";
+import { ChatModelToChatEntry } from "./Components/chatEntry";
 import ConnectionViewModel from "../ViewModel/connectionViewModel";
 import SettingsViewModel from "../ViewModel/settingsViewModel";
 import { translations } from "./translations";
 
 export function HomePage(
   settingsViewModel: SettingsViewModel,
-  connectionViewModel: ConnectionViewModel
+  connectionViewModel: ConnectionViewModel,
+  chatListViewModel: ChatListViewModel
 ) {
   // sections
   const overviewSection = (
@@ -149,14 +152,23 @@ export function HomePage(
         <input
           placeholder={translations.homePage.addChatPlaceholder}
           aria-label={translations.homePage.addChatAudioLabel}
+          bind:value={chatListViewModel.newChatPrimaryChannel}
+          on:enter={chatListViewModel.createChat}
         ></input>
         <button
           class="primary"
           aria-label={translations.homePage.addChatButton}
+          on:click={chatListViewModel.createChat}
+          toggle:disabled={chatListViewModel.cannotCreateChat}
         >
           <span class="icon">add</span>
         </button>
       </div>
+
+      <div
+        class="grid gap"
+        children:append={[chatListViewModel.chatModels, ChatModelToChatEntry]}
+      ></div>
     </div>
   );
 

src/ViewModel/chatListViewModel.tsx

@@ -0,0 +1,48 @@
+import * as React from "bloatless-react";
+
+import ChatListModel from "../Model/chatListModel";
+import { ChatModel } from "../Model/chatModel";
+import StorageModel from "../Model/storageModel";
+
+export default class ChatListViewModel {
+  chatListModel: ChatListModel;
+
+  // state
+  newChatPrimaryChannel: React.State<string> = new React.State("");
+  chatModels: React.ListState<ChatModel> = new React.ListState();
+
+  // guards
+  cannotCreateChat = React.createProxyState(
+    [this.newChatPrimaryChannel],
+    () => this.newChatPrimaryChannel.value == ""
+  );
+
+  // methods
+  createChat = (): void => {
+    const chatModel: ChatModel = this.chatListModel.createChat(
+      this.newChatPrimaryChannel.value
+    );
+    this.newChatPrimaryChannel.value = "";
+    this.chatModels.add(chatModel);
+  };
+
+  deleteChat = (chat: ChatModel): void => {
+    this.chatListModel.deleteChat(chat);
+    this.chatModels.remove(chat);
+  };
+
+  // restore
+  restoreChats = (): void => {
+    for (const chat of this.chatListModel.chatModels.values()) {
+      this.chatModels.add(chat);
+    }
+  };
+
+  // init
+  constructor(storageModel: StorageModel) {
+    const chatListModel = new ChatListModel(storageModel);
+    this.chatListModel = chatListModel;
+
+    this.restoreChats();
+  }
+}

src/index.tsx

@@ -1,3 +1,5 @@
+import ChatListModel from "./Model/chatListModel";
+import ChatListViewModel from "./ViewModel/chatListViewModel";
 import { ConnectionModal } from "./View/Modals/connectionModal";
 import ConnectionViewModel from "./ViewModel/connectionViewModel";
 import { HomePage } from "./View/homePage";
@@ -6,15 +8,17 @@ import StorageModel from "./Model/storageModel";
 
 // models
 const storageModel = new StorageModel();
+storageModel.print();
 
 // viewModels
 const settingsViewModel = new SettingsViewModel(storageModel);
 const connectionViewModel = new ConnectionViewModel(storageModel);
+const chatListViewModel = new ChatListViewModel(storageModel);
 
 // view
 document
   .querySelector("main")!
   .append(
-    HomePage(settingsViewModel, connectionViewModel),
+    HomePage(settingsViewModel, connectionViewModel, chatListViewModel),
     ConnectionModal(connectionViewModel)
   );