prepare UI

src/Model/chatModel.ts

@@ -1,10 +1,9 @@
 import * as React from "bloatless-react";
 
-import { UDN, isConnected } from "./model";
+import { UDN, isConnected, senderName } from "./model";
 import { decryptString, encryptString } from "../cryptUtility";
 
 import { Message } from "udn-frontend";
-import { senderName } from "./viewModel";
 import { storageKeys } from "../utility";
 
 // TYPES

src/Model/model.ts

@@ -1,15 +1,17 @@
 import * as React from "bloatless-react";
 
+import { Chat, chats } from "./chatModel";
+
 import UDNFrontend from "udn-frontend";
-import { chats } from "./chatModel";
-import { serverAddress } from "./viewModel";
 
 export const UDN = new UDNFrontend();
 
 // CONNECTION
 // state
-export const isConnected = new React.State(false);
 export const currentAddress = new React.State("");
+export const isConnected = new React.State(false);
+
+export const serverAddressInput = React.restoreState("socket-address", "");
 
 export const cannotDisonnect = React.createProxyState(
   [isConnected],
@@ -17,18 +19,19 @@ export const cannotDisonnect = React.createProxyState(
 );
 
 export const cannotConnect = React.createProxyState(
-  [serverAddress, currentAddress, isConnected],
+  [serverAddressInput, currentAddress, isConnected],
   () =>
-    serverAddress.value == "" ||
-    (currentAddress.value == serverAddress.value && isConnected.value == true)
+    serverAddressInput.value == "" ||
+    (currentAddress.value == serverAddressInput.value &&
+      isConnected.value == true)
 );
 
 // methods
 export function connect(): void {
   if (cannotConnect.value == true) return;
-  currentAddress.value = serverAddress.value;
+  currentAddress.value = serverAddressInput.value;
   isConnected.value = false;
-  UDN.connect(serverAddress.value);
+  UDN.connect(serverAddressInput.value);
 }
 
 export function disconnect(): void {
@@ -36,23 +39,69 @@ export function disconnect(): void {
   UDN.disconnect();
 }
 
-// LISTENERS
+export function resetAddressInput(): void {
+  this.serverAddressInput.value = this.serverAddress.value;
+}
+
+// listeners
 UDN.onconnect = () => {
   isConnected.value = true;
 };
 
-
 UDN.onmessage = (data) => {
   chats.value.forEach((chat) => {
     chat.onmessage(data);
-  })
+  });
 };
 
 UDN.ondisconnect = () => {
   isConnected.value = false;
 };
 
+// MAILBOX
+export const mailboxId = React.restoreState("mailbox-id", "");
+export const isMailboxActive = new React.State(false);
+
+export const cannotDeleteMailbox = React.createProxyState(
+  [mailboxId, isMailboxActive],
+  () => mailboxId.value == "" || isMailboxActive.value == false
+);
+export const cannotRequestMailbox = React.createProxyState(
+  [isConnected, isMailboxActive],
+  () => isConnected.value == false || isMailboxActive.value == true
+);
+
+export function requestMailbox(): void {
+  if (cannotRequestMailbox.value == true) return;
+  UDN.requestMailbox();
+}
+
+export function deleteMailbox(): void {
+  if (cannotDeleteMailbox.value == true) return;
+  UDN.deleteMailbox(mailboxId.value);
+}
+
+UDN.onmailboxcreate = (id) => {
+  mailboxId.value = id;
+  UDN.connectMailbox(id);
+}
+
+UDN.onmailboxconnect = () => {
+  isMailboxActive.value = true;
+}
+
+UDN.onmailboxdelete = () => {
+  isMailboxActive.value = false;
+  mailboxId.value = "";
+}
+
+// MISC
+export const isEncryptionUnavailable = window.crypto.subtle == undefined;
+export const senderName = React.restoreState("sender-name", "");
+
+export const selectedChat = new React.State<Chat | undefined>(undefined);
+
 // INIT
-if (serverAddress.value != "") {
+if (serverAddressInput.value != "") {
   connect();
 }

src/Model/viewModel.ts

@@ -1,20 +0,0 @@
-import * as React from "bloatless-react";
-
-import { Chat } from "./chatModel";
-import { translation } from "../translations";
-
-// connection
-export const currentAddress = new React.State("");
-
-export const serverAddress = React.restoreState("socket-address", "");
-export const isConnected = new React.State(false);
-export const connectionMessage = React.createProxyState([serverAddress], () =>
-  translation.connectedTo(serverAddress.value)
-);
-
-// misc
-export const isEncryptionUnavailable = window.crypto.subtle == undefined;
-export const senderName = React.restoreState("sender-name", "");
-
-// chat
-export const selectedChat = new React.State<Chat | undefined>(undefined);