improve mailboxes

static/src/mainScreen.tsx

@@ -1,9 +1,11 @@
 import * as React from "bloatless-react";
 
 import {
+  deleteMailbox,
+  isDisconnected,
+  isMailboxDisonnected,
   isMessageEmpty,
   lastReceivedMessage,
-  mailboxId,
   newMessageBody,
   newMessageChannel,
   requestMailbox,
@@ -33,12 +35,25 @@ export function MainScreen() {
         <div class="tile width-input">
           <div>
             <b>{getText("mailbox")}</b>
-            <p class="secondary" subscribe:innerText={mailboxId}></p>
+            <p class="secondary" toggle:hidden={isMailboxDisonnected}>
+              {getText("mailboxConnected")}
+            </p>
           </div>
         </div>
 
         <div class="flex-row width-input justify-end">
-          <button class="primary width-100" on:click={requestMailbox}>
+          <button
+            class="danger width-50"
+            on:click={deleteMailbox}
+            toggle:disabled={isMailboxDisonnected}
+          >
+            {getText("deleteMailbox")}
+          </button>
+          <button
+            class="primary width-50"
+            on:click={requestMailbox}
+            toggle:disabled={isDisconnected}
+          >
             {getText("requestMailbox")}
             <span class="icon">inbox</span>
           </button>

static/src/model.tsx

@@ -9,45 +9,11 @@ export class Message implements React.Identifiable {
   constructor(public channel: string, public body: string) {}
 }
 
-// UDN Frontend
-const UDN = new UDNFrontend();
-
-UDN.onconnect = () => {
-  isDisconnected.value = false;
-  updateStats();
-  if (mailboxId.value != "") {
-    UDN.accessMailbox(mailboxId.value);
-  }
-};
-
-UDN.onmessage = (data) => {
-  lastReceivedMessage.value = JSON.stringify(data, null, 4);
-
-  const { messageChannel, messageBody } = data;
-  if (messageChannel && messageBody) {
-    const messageObject = new Message(messageChannel, messageBody);
-    if (messageBody) messages.add(messageObject);
-  }
-};
-
-UDN.onmailbox = (id) => {
-  mailboxId.value = id;
-};
-
-UDN.ondisconnect = () => {
-  isDisconnected.value = true;
-  setTimeout(connect, 2000);
-};
-
-function connect() {
-  UDN.connect(`wss://${window.location.host}`);
-}
-connect();
-
 // STATE
 // connection
 export const isDisconnected = new React.State(true);
-export const mailboxId = React.restoreState("mailbox-id", "");
+export const storedMailboxId = React.restoreState("mailbox-id", "");
+export const isMailboxDisonnected = new React.State(true);
 
 // messages
 export const messages = new React.ListState<Message>();
@@ -87,6 +53,52 @@ export const isMessageEmpty = React.createProxyState(
   () => newMessageChannel.value == "" || newMessageBody.value == ""
 );
 
+// UDN Frontend
+const UDN = new UDNFrontend();
+
+UDN.onconnect = () => {
+  isDisconnected.value = false;
+  updateStats();
+
+  if (storedMailboxId.value != "") {
+    UDN.connectMailbox(storedMailboxId.value);
+  }
+};
+
+UDN.onmessage = (data) => {
+  lastReceivedMessage.value = JSON.stringify(data, null, 4);
+
+  const { messageChannel, messageBody } = data;
+  if (messageChannel && messageBody) {
+    const messageObject = new Message(messageChannel, messageBody);
+    if (messageBody) messages.add(messageObject);
+  }
+};
+
+UDN.onmailbox = (id) => {
+  console.log(id);
+  storedMailboxId.value = id;
+  UDN.connectMailbox(id);
+};
+
+UDN.onmailboxconnect = (id) => {
+  console.log(id);
+  isMailboxDisonnected.value = false;
+};
+
+UDN.ondisconnect = () => {
+  isDisconnected.value = true;
+  isMailboxDisonnected.value = true;
+  setTimeout(connect, 1000);
+};
+
+function connect() {
+  UDN.connect(
+    `${window.location.protocol.replace("http", "ws")}//${window.location.host}`
+  );
+}
+connect();
+
 // METHODS
 export function subscribe() {
   UDN.subscribe(subscriptionChannel.value);
@@ -103,5 +115,11 @@ export function sendMessage() {
 }
 
 export function requestMailbox() {
+  deleteMailbox();
   UDN.requestMailbox();
 }
+
+export function deleteMailbox() {
+  console.log("test");
+  UDN.deleteMailbox(storedMailboxId.value);
+}

static/src/translations.tsx

@@ -1,7 +1,9 @@
 // STATIC
 export const staticTextEnglish = {
   mailbox: "Mailbox",
-  requestMailbox: "Request Mailbox",
+  requestMailbox: "Request",
+  deleteMailbox: "Delete",
+  mailboxConnected: "Mailbox connected",
   channel: "Channel",
   channel_placeholder: "my-channel",
   disconnected: "Server disconnected",
@@ -26,7 +28,9 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
   en: staticTextEnglish,
   es: {
     mailbox: "Buzón",
-    requestMailbox: "Solicitar buzón",
+    requestMailbox: "Solicitar",
+    deleteMailbox: "Eliminar",
+    mailboxConnected: "Buzón conectado",
     channel: "Canal",
     channel_placeholder: "mi-canal",
     disconnected: "Sin coneción",
@@ -48,7 +52,9 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
   },
   de: {
     mailbox: "Briefkasten",
-    requestMailbox: "Briefkasten beantragen",
+    requestMailbox: "Beantragen",
+    deleteMailbox: "Löschen",
+    mailboxConnected: "Briefkasten verbunden",
     channel: "Kanal",
     channel_placeholder: "mein-kanal",
     disconnected: "Verbindung getrennt",