remodel translations

static/dist/index.js

@@ -242,6 +242,8 @@
     };
     mailboxConnectionHandler = (mailboxId) => {
     };
+    mailboxDeleteHandler = (mailboxId) => {
+    };
     // INIT
     set onconnect(handler) {
       this.connectionHandler = handler;
@@ -252,12 +254,15 @@
     set onmessage(handler) {
       this.messageHandler = handler;
     }
-    set onmailbox(handler) {
+    set onmailboxcreate(handler) {
       this.mailboxHandler = handler;
     }
     set onmailboxconnect(handler) {
       this.mailboxConnectionHandler = handler;
     }
+    set onmailboxdelete(handler) {
+      this.mailboxDeleteHandler = handler;
+    }
     // UTILITY METHODS
     send(messageObject) {
       if (this.ws == void 0) return false;
@@ -268,21 +273,27 @@
     // PUBLIC METHODS
     // connection
     connect(address) {
-      this.disconnect();
-      this.ws = new WebSocket(address);
-      this.ws.addEventListener("open", this.connectionHandler);
-      this.ws.addEventListener("close", this.disconnectionHandler);
-      this.ws.addEventListener("message", (message) => {
-        const dataString = message.data.toString();
-        const data = JSON.parse(dataString);
-        if (data.assignedMailboxId) {
-          return this.mailboxHandler(data.assignedMailboxId);
-        } else if (data.connectedMailboxId) {
-          return this.mailboxConnectionHandler(data.assignedMailboxId);
-        } else {
-          this.messageHandler(data);
-        }
-      });
+      try {
+        this.disconnect();
+        this.ws = new WebSocket(address);
+        this.ws.addEventListener("open", this.connectionHandler);
+        this.ws.addEventListener("close", this.disconnectionHandler);
+        this.ws.addEventListener("message", (message) => {
+          const dataString = message.data.toString();
+          const data = JSON.parse(dataString);
+          if (data.assignedMailboxId) {
+            return this.mailboxHandler(data.assignedMailboxId);
+          } else if (data.connectedMailboxId) {
+            return this.mailboxConnectionHandler(data.connectedMailboxId);
+          } else if (data.deletedMailbox) {
+            return this.mailboxDeleteHandler(data.deletedMailbox);
+          } else {
+            this.messageHandler(data);
+          }
+        });
+      } catch (error) {
+        console.error(error);
+      }
     }
     disconnect() {
       this.ws?.close();
@@ -354,7 +365,7 @@
     subscribe: "Subscribe",
     unsubscribe: "Unubscribe"
   };
-  var translations = {
+  var allTranslations = {
     en: staticTextEnglish,
     es: {
       mailbox: "Buz\xF3n",
@@ -405,13 +416,8 @@
       unsubscribe: "Verlassen"
     }
   };
-  function getText(key) {
-    const language = navigator.language.substring(0, 2);
-    if (translations[language]) {
-      return translations[language][key];
-    }
-    return translations.en[key];
-  }
+  var language = navigator.language.substring(0, 2);
+  var translations = allTranslations[language];
 
   // src/model.tsx
   var Message = class {
@@ -426,7 +432,7 @@
   var isMailboxDisonnected = new State(true);
   var messages = new ListState();
   var lastReceivedMessage = new State(
-    getText("noMessagesReceived")
+    translations.noMessagesReceived
   );
   var statHTMLString = new State("");
   async function updateStats() {
@@ -496,7 +502,6 @@
     newMessageBody.value = "";
   }
   function requestMailbox() {
-    deleteMailbox();
     UDN.requestMailbox();
   }
   function deleteMailbox() {
@@ -506,19 +511,19 @@
 
   // src/infoScreen.tsx
   function InfoScreen() {
-    return /* @__PURE__ */ createElement("article", { id: "info-screen" }, /* @__PURE__ */ createElement("header", null, getText("serverInfo"), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("button", { "on:click": updateStats }, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh")))), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "flex-column gap", "subscribe:innerHTML": statHTMLString })));
+    return /* @__PURE__ */ createElement("article", { id: "info-screen" }, /* @__PURE__ */ createElement("header", null, translations.serverInfo, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("button", { "on:click": updateStats }, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh")))), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "flex-column gap", "subscribe:innerHTML": statHTMLString })));
   }
 
   // src/mainScreen.tsx
   function MainScreen() {
-    return /* @__PURE__ */ createElement("article", { id: "main-screen" }, /* @__PURE__ */ createElement("header", null, getText("settings")), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, getText("messageLastReceived")), /* @__PURE__ */ createElement("p", { class: "secondary", "subscribe:innerText": lastReceivedMessage }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, getText("mailbox")), /* @__PURE__ */ createElement("p", { class: "secondary", "toggle:hidden": isMailboxDisonnected }, getText("mailboxConnected")))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("article", { id: "main-screen" }, /* @__PURE__ */ createElement("header", null, translations.settings), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.messageLastReceived), /* @__PURE__ */ createElement("p", { class: "secondary", "subscribe:innerText": lastReceivedMessage }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.mailbox), /* @__PURE__ */ createElement("p", { class: "secondary", "toggle:hidden": isMailboxDisonnected }, translations.mailboxConnected))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
       "button",
       {
         class: "danger width-50",
         "on:click": deleteMailbox,
         "toggle:disabled": isMailboxDisonnected
       },
-      getText("deleteMailbox")
+      translations.deleteMailbox
     ), /* @__PURE__ */ createElement(
       "button",
       {
@@ -526,26 +531,26 @@
         "on:click": requestMailbox,
         "toggle:disabled": isDisconnected
       },
-      getText("requestMailbox"),
+      translations.requestMailbox,
       /* @__PURE__ */ createElement("span", { class: "icon" }, "inbox")
-    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, getText("subscribeToChannel")), /* @__PURE__ */ createElement(
+    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.subscribeToChannel), /* @__PURE__ */ createElement(
       "input",
       {
-        placeholder: getText("channel_placeholder"),
+        placeholder: translations.channel_placeholder,
         "bind:value": subscriptionChannel,
         "on:enter": subscribe
       }
-    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "danger width-50", "on:click": unsubscribe }, getText("unsubscribe")), /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": subscribe }, getText("subscribe"), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, getText("channel")), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "danger width-50", "on:click": unsubscribe }, translations.unsubscribe), /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": subscribe }, translations.subscribe, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.channel), /* @__PURE__ */ createElement(
       "input",
       {
-        placeholder: getText("channel_placeholder"),
+        placeholder: translations.channel_placeholder,
         "bind:value": newMessageChannel,
         "on:enter": sendMessage
       }
-    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, getText("message")), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.message), /* @__PURE__ */ createElement(
       "input",
       {
-        placeholder: getText("message_placeholder"),
+        placeholder: translations.message_placeholder,
         "bind:value": newMessageBody,
         "on:enter": sendMessage
       }
@@ -556,7 +561,7 @@
         "on:click": sendMessage,
         "toggle:disabled": isMessageEmpty
       },
-      getText("send"),
+      translations.send,
       /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
     ))));
   }
@@ -566,7 +571,7 @@
     return /* @__PURE__ */ createElement("div", { class: "tile", style: "flex: 0" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, message.channel), /* @__PURE__ */ createElement("b", null, message.body)));
   };
   function MessageScreen() {
-    return /* @__PURE__ */ createElement("article", { id: "message-screen" }, /* @__PURE__ */ createElement("header", null, getText("messagesReceived")), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("article", { id: "message-screen" }, /* @__PURE__ */ createElement("header", null, translations.messagesReceived), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement(
       "div",
       {
         class: "flex-column gap",
@@ -576,7 +581,7 @@
       "input",
       {
         style: "max-width: unset",
-        placeholder: getText("message_placeholder_generic"),
+        placeholder: translations.message_placeholder_generic,
         "bind:value": newMessageBody,
         "on:enter": sendMessage
       }
@@ -593,10 +598,10 @@
 
   // src/index.tsx
   document.body.prepend(
-    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#info-screen", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "info"), getText("info")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#main-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "chat"), getText("messages")))
+    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#info-screen", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "info"), translations.info), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#main-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), translations.settings), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "chat"), translations.messages))
   );
   document.querySelector("main").append(InfoScreen(), MainScreen(), MessageScreen());
   document.body.append(
-    /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isDisconnected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("div", { class: "flex-column align-center justify-center width-100 height-100", style: "gap: 1rem" }, /* @__PURE__ */ createElement("span", { class: "icon error", style: "font-size: 3rem" }, "signal_disconnected"), /* @__PURE__ */ createElement("h1", { class: "error" }, getText("disconnected")), /* @__PURE__ */ createElement("p", { class: "secondary" }, getText("reconnecting"))))))
+    /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isDisconnected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("div", { class: "flex-column align-center justify-center width-100 height-100", style: "gap: 1rem" }, /* @__PURE__ */ createElement("span", { class: "icon error", style: "font-size: 3rem" }, "signal_disconnected"), /* @__PURE__ */ createElement("h1", { class: "error" }, translations.disconnected), /* @__PURE__ */ createElement("p", { class: "secondary" }, translations.reconnecting)))))
   );
 })();

static/src/index.tsx

@@ -3,23 +3,23 @@ import * as React from "bloatless-react";
 import { InfoScreen } from "./infoScreen";
 import { MainScreen } from "./mainScreen";
 import { MessageScreen } from "./messageScreen";
-import { getText } from "./translations";
 import { isDisconnected } from "./model";
+import { translations } from "./translations";
 
 // WS
 document.body.prepend(
   <menu>
     <a class="tab-link" href="#info-screen" active>
       <span class="icon">info</span>
-      {getText("info")}
+      {translations.info}
     </a>
     <a class="tab-link" href="#main-screen">
       <span class="icon">settings</span>
-      {getText("settings")}
+      {translations.settings}
     </a>
     <a class="tab-link" href="#message-screen">
       <span class="icon">chat</span>
-      {getText("messages")}
+      {translations.messages}
     </a>
   </menu>
 );
@@ -34,8 +34,8 @@ document.body.append(
           <span class="icon error" style="font-size: 3rem">
             signal_disconnected
           </span>
-          <h1 class="error">{getText("disconnected")}</h1>
-          <p class="secondary">{getText("reconnecting")}</p>
+          <h1 class="error">{translations.disconnected}</h1>
+          <p class="secondary">{translations.reconnecting}</p>
         </div>
       </main>
     </div>

static/src/infoScreen.tsx

@@ -2,13 +2,13 @@ import * as React from "bloatless-react";
 
 import { statHTMLString, updateStats } from "./model";
 
-import { getText } from "./translations";
+import { translations } from "./translations";
 
 export function InfoScreen() {
   return (
     <article id="info-screen">
       <header>
-        {getText("serverInfo")}
+        {translations.serverInfo}
         <span>
           <button on:click={updateStats}>
             <span class="icon">refresh</span>

static/src/mainScreen.tsx

@@ -15,17 +15,17 @@ import {
   unsubscribe,
 } from "./model";
 
-import { getText } from "./translations";
+import { translations } from "./translations";
 
 export function MainScreen() {
   // UI
   return (
     <article id="main-screen">
-      <header>{getText("settings")}</header>
+      <header>{translations.settings}</header>
       <div>
         <div class="tile width-input">
           <div>
-            <b>{getText("messageLastReceived")}</b>
+            <b>{translations.messageLastReceived}</b>
             <p class="secondary" subscribe:innerText={lastReceivedMessage}></p>
           </div>
         </div>
@@ -34,9 +34,9 @@ export function MainScreen() {
 
         <div class="tile width-input">
           <div>
-            <b>{getText("mailbox")}</b>
+            <b>{translations.mailbox}</b>
             <p class="secondary" toggle:hidden={isMailboxDisonnected}>
-              {getText("mailboxConnected")}
+              {translations.mailboxConnected}
             </p>
           </div>
         </div>
@@ -47,14 +47,14 @@ export function MainScreen() {
             on:click={deleteMailbox}
             toggle:disabled={isMailboxDisonnected}
           >
-            {getText("deleteMailbox")}
+            {translations.deleteMailbox}
           </button>
           <button
             class="primary width-50"
             on:click={requestMailbox}
             toggle:disabled={isDisconnected}
           >
-            {getText("requestMailbox")}
+            {translations.requestMailbox}
             <span class="icon">inbox</span>
           </button>
         </div>
@@ -63,9 +63,9 @@ export function MainScreen() {
 
         <label class="tile">
           <div>
-            <span>{getText("subscribeToChannel")}</span>
+            <span>{translations.subscribeToChannel}</span>
             <input
-              placeholder={getText("channel_placeholder")}
+              placeholder={translations.channel_placeholder}
               bind:value={subscriptionChannel}
               on:enter={subscribe}
             ></input>
@@ -74,10 +74,10 @@ export function MainScreen() {
 
         <div class="flex-row width-input justify-end">
           <button class="danger width-50" on:click={unsubscribe}>
-            {getText("unsubscribe")}
+            {translations.unsubscribe}
           </button>
           <button class="primary width-50" on:click={subscribe}>
-            {getText("subscribe")}
+            {translations.subscribe}
             <span class="icon">arrow_forward</span>
           </button>
         </div>
@@ -86,9 +86,9 @@ export function MainScreen() {
 
         <label class="tile">
           <div>
-            <span>{getText("channel")}</span>
+            <span>{translations.channel}</span>
             <input
-              placeholder={getText("channel_placeholder")}
+              placeholder={translations.channel_placeholder}
               bind:value={newMessageChannel}
               on:enter={sendMessage}
             ></input>
@@ -97,9 +97,9 @@ export function MainScreen() {
 
         <label class="tile">
           <div>
-            <span>{getText("message")}</span>
+            <span>{translations.message}</span>
             <input
-              placeholder={getText("message_placeholder")}
+              placeholder={translations.message_placeholder}
               bind:value={newMessageBody}
               on:enter={sendMessage}
             ></input>
@@ -112,7 +112,7 @@ export function MainScreen() {
             on:click={sendMessage}
             toggle:disabled={isMessageEmpty}
           >
-            {getText("send")}
+            {translations.send}
             <span class="icon">send</span>
           </button>
         </div>

static/src/messageScreen.tsx

@@ -8,7 +8,7 @@ import {
   sendMessage,
 } from "./model";
 
-import { getText } from "./translations";
+import { translations } from "./translations";
 
 const convertMessageToElement: React.ListItemConverter<Message> = (message) => {
   return (
@@ -24,7 +24,7 @@ const convertMessageToElement: React.ListItemConverter<Message> = (message) => {
 export function MessageScreen() {
   return (
     <article id="message-screen">
-      <header>{getText("messagesReceived")}</header>
+      <header>{translations.messagesReceived}</header>
       <div>
         <div
           class="flex-column gap"
@@ -34,7 +34,7 @@ export function MessageScreen() {
       <footer>
         <input
           style="max-width: unset"
-          placeholder={getText("message_placeholder_generic")}
+          placeholder={translations.message_placeholder_generic}
           bind:value={newMessageBody}
           on:enter={sendMessage}
         ></input>

static/src/model.tsx

@@ -1,7 +1,7 @@
 import * as React from "bloatless-react";
 
 import UDNFrontend from "udn-frontend";
-import { getText } from "./translations";
+import { translations } from "./translations";
 
 export class Message implements React.Identifiable {
   id = React.UUID();
@@ -18,7 +18,7 @@ export const isMailboxDisonnected = new React.State(true);
 // messages
 export const messages = new React.ListState<Message>();
 export const lastReceivedMessage = new React.State(
-  getText("noMessagesReceived")
+  translations.noMessagesReceived
 );
 
 // stats

static/src/translations.tsx

@@ -1,5 +1,5 @@
 // STATIC
-export const staticTextEnglish = {
+const staticTextEnglish = {
   mailbox: "Mailbox",
   requestMailbox: "Request",
   deleteMailbox: "Delete",
@@ -24,7 +24,7 @@ export const staticTextEnglish = {
   unsubscribe: "Unubscribe",
 };
 
-export const translations: { [key: string]: typeof staticTextEnglish } = {
+const allTranslations: { [key: string]: typeof staticTextEnglish } = {
   en: staticTextEnglish,
   es: {
     mailbox: "Buzón",
@@ -76,10 +76,5 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
   },
 };
 
-export function getText(key: keyof typeof staticTextEnglish): string {
-  const language = navigator.language.substring(0, 2);
-  if (translations[language]) {
-    return translations[language][key];
-  }
-  return translations.en[key];
-}
+const language = navigator.language.substring(0, 2);
+export const translations = allTranslations[language];