add chat list section

src/Model/chatModel.ts

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { UDN, isConnected, senderName } from "./model";
+import { UDN, isConnected, senderName } from "../Model/model";
 import { decryptString, encryptString } from "../cryptUtility";
 
 import { Message } from "udn-frontend";
@@ -37,6 +37,9 @@ export class Chat {
 
   // init
   constructor(id: string = React.UUID()) {
+    this.id = id;
+
+    // channels
     this.primaryChannelInput = React.restoreState(
       storageKeys.primaryChannel(id),
       ""
@@ -45,6 +48,7 @@ export class Chat {
       storageKeys.secondaryChannels(id)
     );
 
+    // messaging
     this.encryptionKey = React.restoreState(storageKeys.encyptionKey(id), "");
     this.messages = React.restoreListState(storageKeys.messages(id));
 
@@ -54,15 +58,16 @@ export class Chat {
     );
     this.newSecondaryChannelName = new React.State("");
 
+    // guards
     this.cannotSendMessage = React.createProxyState(
       [
-        this.primaryChannelInput,
+        this.currentChannel,
         this.composingMessage,
         this.isSubscribed,
         isConnected,
       ],
       () =>
-        this.primaryChannelInput.value == "" ||
+        this.currentChannel.value == "" ||
         this.composingMessage.value == "" ||
         this.isSubscribed.value == false ||
         isConnected.value == false
@@ -108,7 +113,7 @@ export class Chat {
       ...this.secondaryChannels.value.values(),
     ].map((channel) => channel);
     const allChannelNames: string[] = [
-      this.primaryChannelInput.value,
+      this.currentChannel.value,
       ...secondaryChannelNames,
     ];
 
@@ -171,14 +176,16 @@ export class Chat {
 
 // INIT
 const chatIds = React.restoreListState<string>("chat-ids");
-const chatArray = [...chatIds.value.values()].map((id) => new Chat(id));
-export const chats = new React.ListState<Chat>(chatArray);
+export const chats = new React.ListState<Chat>();
+
+chatIds.value.forEach((id) => chats.add(new Chat(id)));
 
 // METHODS
 export function createChatWithName(name: string): void {
   const newChat = new Chat();
-  newChat.primaryChannelInput.value = name;
+  newChat.currentChannel.value = name;
   chatIds.add(newChat.id);
+  chats.add(newChat);
 }
 
 export function removeChat(chat: Chat): void {

src/Model/model.ts

@@ -1,13 +1,12 @@
 import * as React from "bloatless-react";
 
-import { Chat, chats } from "./chatModel";
+import { Chat, chats, createChatWithName } from "./chatModel";
 
 import UDNFrontend from "udn-frontend";
 
 export const UDN = new UDNFrontend();
 
 // CONNECTION
-// state
 export const isConnected = new React.State(false);
 
 export const serverAddressInput = React.restoreState("socket-address", "");
@@ -38,7 +37,7 @@ export const cannotResetAddress = React.createProxyState(
 // methods
 export function connect(): void {
   if (cannotConnect.value == true) return;
-  
+
   currentAddress.value = serverAddressInput.value;
 
   isConnected.value = false;
@@ -95,6 +94,11 @@ export function deleteMailbox(): void {
   UDN.deleteMailbox(mailboxId.value);
 }
 
+export function updateMailbox(): void {
+  deleteMailbox();
+  updateMailbox();
+}
+
 UDN.onmailboxcreate = (id) => {
   mailboxId.value = id;
   UDN.connectMailbox(id);
@@ -114,8 +118,21 @@ export const isEncryptionUnavailable = window.crypto.subtle == undefined;
 export const senderName = React.restoreState("sender-name", "");
 
 export const selectedChat = new React.State<Chat | undefined>(undefined);
+export const newChatName = new React.State("");
 
-export function closeChat() {
+export const cannotCreateChat = React.createProxyState(
+  [newChatName],
+  () => newChatName.value == ""
+);
+
+export function createChat() {
+  if (cannotCreateChat.value == true) return;
+  
+  createChatWithName(newChatName.value);
+  newChatName.value = "";
+}
+
+export function closeChatView() {
   selectedChat.value = undefined;
   document.getElementById("settings-tab")?.scrollIntoView();
 }