improve mailboxes

static/dist/index.js

@@ -231,16 +231,18 @@
   // node_modules/udn-frontend/index.ts
   var UDNFrontend = class {
     ws;
-    // handlers
+    // HANDLERS
     connectionHandler = () => {
     };
     disconnectionHandler = () => {
     };
     messageHandler = (data) => {
     };
-    mailboxHandler = (mailboxId2) => {
+    mailboxHandler = (mailboxId) => {
     };
-    // init
+    mailboxConnectionHandler = (mailboxId) => {
+    };
+    // INIT
     set onconnect(handler) {
       this.connectionHandler = handler;
     }
@@ -253,14 +255,18 @@
     set onmailbox(handler) {
       this.mailboxHandler = handler;
     }
-    // utility methods
+    set onmailboxconnect(handler) {
+      this.mailboxConnectionHandler = handler;
+    }
+    // UTILITY METHODS
     send(messageObject) {
       if (this.ws == void 0) return false;
       const messageString = JSON.stringify(messageObject);
       this.ws.send(messageString);
       return true;
     }
-    // public methods
+    // PUBLIC METHODS
+    // connection
     connect(address) {
       this.disconnect();
       this.ws = new WebSocket(address);
@@ -271,6 +277,8 @@
         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);
         }
@@ -279,6 +287,7 @@
     disconnect() {
       this.ws?.close();
     }
+    // message
     sendMessage(channel, body) {
       const messageObject = {
         messageChannel: channel,
@@ -286,6 +295,7 @@
       };
       return this.send(messageObject);
     }
+    // subscription
     subscribe(channel) {
       const messageObject = {
         subscribeChannel: channel
@@ -298,15 +308,22 @@
       };
       return this.send(messageObject);
     }
+    // mailbox
     requestMailbox() {
       const messageObject = {
         requestingMailboxSetup: true
       };
       return this.send(messageObject);
     }
-    accessMailbox(mailboxId2) {
+    connectMailbox(mailboxId) {
       const messageObject = {
-        requestedMailbox: mailboxId2
+        requestedMailbox: mailboxId
+      };
+      return this.send(messageObject);
+    }
+    deleteMailbox(mailboxId) {
+      const messageObject = {
+        deletingMailbox: mailboxId
       };
       return this.send(messageObject);
     }
@@ -315,7 +332,9 @@
   // src/translations.tsx
   var staticTextEnglish = {
     mailbox: "Mailbox",
-    requestMailbox: "Request Mailbox",
+    requestMailbox: "Request",
+    deleteMailbox: "Delete",
+    mailboxConnected: "Mailbox connected",
     channel: "Channel",
     channel_placeholder: "my-channel",
     disconnected: "Server disconnected",
@@ -339,7 +358,9 @@
     en: staticTextEnglish,
     es: {
       mailbox: "Buz\xF3n",
-      requestMailbox: "Solicitar buz\xF3n",
+      requestMailbox: "Solicitar",
+      deleteMailbox: "Eliminar",
+      mailboxConnected: "Buz\xF3n conectado",
       channel: "Canal",
       channel_placeholder: "mi-canal",
       disconnected: "Sin coneci\xF3n",
@@ -361,7 +382,9 @@
     },
     de: {
       mailbox: "Briefkasten",
-      requestMailbox: "Briefkasten beantragen",
+      requestMailbox: "Beantragen",
+      deleteMailbox: "L\xF6schen",
+      mailboxConnected: "Briefkasten verbunden",
       channel: "Kanal",
       channel_placeholder: "mein-kanal",
       disconnected: "Verbindung getrennt",
@@ -398,35 +421,9 @@
     }
     id = UUID();
   };
-  var 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, 2e3);
-  };
-  function connect() {
-    UDN.connect(`wss://${window.location.host}`);
-  }
-  connect();
   var isDisconnected = new State(true);
-  var mailboxId = restoreState("mailbox-id", "");
+  var storedMailboxId = restoreState("mailbox-id", "");
+  var isMailboxDisonnected = new State(true);
   var messages = new ListState();
   var lastReceivedMessage = new State(
     getText("noMessagesReceived")
@@ -451,6 +448,42 @@
     [newMessageChannel, newMessageBody],
     () => newMessageChannel.value == "" || newMessageBody.value == ""
   );
+  var 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, 1e3);
+  };
+  function connect() {
+    UDN.connect(
+      `${window.location.protocol.replace("http", "ws")}//${window.location.host}`
+    );
+  }
+  connect();
   function subscribe() {
     UDN.subscribe(subscriptionChannel.value);
   }
@@ -463,8 +496,13 @@
     newMessageBody.value = "";
   }
   function requestMailbox() {
+    deleteMailbox();
     UDN.requestMailbox();
   }
+  function deleteMailbox() {
+    console.log("test");
+    UDN.deleteMailbox(storedMailboxId.value);
+  }
 
   // src/infoScreen.tsx
   function InfoScreen() {
@@ -473,7 +511,24 @@
 
   // 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", "subscribe:innerText": mailboxId }))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "primary width-100", "on:click": requestMailbox }, getText("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(
+    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(
+      "button",
+      {
+        class: "danger width-50",
+        "on:click": deleteMailbox,
+        "toggle:disabled": isMailboxDisonnected
+      },
+      getText("deleteMailbox")
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary width-50",
+        "on:click": requestMailbox,
+        "toggle:disabled": isDisconnected
+      },
+      getText("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(
       "input",
       {
         placeholder: getText("channel_placeholder"),

static/node_modules/udn-frontend/README.md

@@ -13,82 +13,36 @@ import UDNFrontend from "udn-frontend";
 
 // setup
 const UDN = new UDNFrontend();
+
+// connect
 UDN.onconnect = () => {
   console.log("connected!");
 };
 UDN.ondisconnect = () => {
   console.log("disconnected!");
 };
+
+UDN.connect("ws://192.168.0.69:1234");
+UDN.disconnect();
+
+// messages
 UDN.onmessage = (data: Message) => {
   console.log(data);
 };
 
-// do stuff
-UDN.connect("ws://192.168.0.69:1234");
-
-UDN.subscribe("my-channel");
 UDN.sendMessage("my-channel", "Hello, world!");
+
+// subscribe
+UDN.subscribe("my-channel");
 UDN.unsubscribe("my-channel");
-```
 
-# Type Reference
-
-```TypeScript
-export interface Message {
-  // connecting to server
-  requestingServerConnection?: boolean;
-
-  // mailbox
-  requestingMailboxSetup?: boolean;
-  assignedMailboxId?: string; // sent by server
-  requestedMailbox?: string;
-
-  // subscribing to channel
-  subscribeChannel?: string;
-  unsubscribeChannel?: string;
-  subscribed?: boolean; // sent by server to confirm subscription
-
-  //sending message
-  messageChannel?: string;
-  messageBody?: string;
+// mailbox
+UDN.onmailbox = (mailboxId: string) => {
+  UDN.connectMailbox(mailboxId);
+}
+UDN.onmailboxconnect = (mailboxId: string) => {
+  UDN.deleteMailbox(mailboxId);
 }
 
-export default class UDNFrontend {
-  ws: WebSocket | undefined;
-
-  // handlers
-  private connectionHandler = () => {};
-  private disconnectionHandler = () => {};
-  private messageHandler = (data: Message) => {};
-
-  // init
-  set onconnect(handler: () => void);
-  set ondisconnect(handler: () => void);
-  set onmessage(handler: (data: Message) => void);
-
-  // methods
-  connect(address: string): void;
-  disconnect(address: string): void;
-  sendMessage(channel: string, body: string): boolean; // true if message is sent
-  subscribe(channel: string): boolean; // true if request is sent, NOT inherently when subscribed
-  unsubscribe(channel: string): boolean; // true if request is sent, NOT inherently when unsubscribed
-}
+UDN.requestMailbox();
 ```
-
-# Changelog
-
-## 1.0.1
-
-- minor fixes
-
-## 1.0.2
-
-- minor fixes
-
-## 1.0.3
-
-- add `disconnect()` method
-
-## 1.0.4
-
-- make ws public

static/node_modules/udn-frontend/index.ts

@@ -4,8 +4,10 @@ export interface Message {
 
   // mailbox
   requestingMailboxSetup?: boolean;
-  assignedMailboxId?: string; // sent by server
   requestedMailbox?: string;
+  deletingMailbox?: string;
+  assignedMailboxId?: string; // sent by server
+  connectedMailboxId?: string; // sent by server
 
   // subscribing to channel
   subscribeChannel?: string;
@@ -20,13 +22,14 @@ export interface Message {
 export default class UDNFrontend {
   ws: WebSocket | undefined;
 
-  // handlers
+  // HANDLERS
   private connectionHandler = () => {};
   private disconnectionHandler = () => {};
   private messageHandler = (data: Message) => {};
   private mailboxHandler = (mailboxId: string) => {};
+  private mailboxConnectionHandler = (mailboxId: string) => {};
 
-  // init
+  // INIT
   set onconnect(handler: () => void) {
     this.connectionHandler = handler;
   }
@@ -39,8 +42,11 @@ export default class UDNFrontend {
   set onmailbox(handler: (mailboxId: string) => void) {
     this.mailboxHandler = handler;
   }
+  set onmailboxconnect(handler: (mailboxId: string) => void) {
+    this.mailboxConnectionHandler = handler;
+  }
 
-  // utility methods
+  // UTILITY METHODS
   private send(messageObject: Message): boolean {
     if (this.ws == undefined) return false;
 
@@ -49,7 +55,8 @@ export default class UDNFrontend {
     return true;
   }
 
-  // public methods
+  // PUBLIC METHODS
+  // connection
   connect(address: string): void {
     this.disconnect();
 
@@ -62,6 +69,8 @@ export default class UDNFrontend {
 
       if (data.assignedMailboxId) {
         return this.mailboxHandler(data.assignedMailboxId);
+      } else if (data.connectedMailboxId) {
+        return this.mailboxConnectionHandler(data.assignedMailboxId);
       } else {
         this.messageHandler(data);
       }
@@ -72,6 +81,7 @@ export default class UDNFrontend {
     this.ws?.close();
   }
 
+  // message
   sendMessage(channel: string, body: string): boolean {
     const messageObject = {
       messageChannel: channel,
@@ -80,6 +90,7 @@ export default class UDNFrontend {
     return this.send(messageObject);
   }
 
+  // subscription
   subscribe(channel: string): boolean {
     const messageObject = {
       subscribeChannel: channel,
@@ -94,6 +105,7 @@ export default class UDNFrontend {
     return this.send(messageObject);
   }
 
+  // mailbox
   requestMailbox(): boolean {
     const messageObject = {
       requestingMailboxSetup: true,
@@ -101,10 +113,17 @@ export default class UDNFrontend {
     return this.send(messageObject);
   }
 
-  accessMailbox(mailboxId: string): boolean {
+  connectMailbox(mailboxId: string): boolean {
     const messageObject = {
       requestedMailbox: mailboxId,
     };
     return this.send(messageObject);
   }
+
+  deleteMailbox(mailboxId: string): boolean {
+    const messageObject = {
+      deletingMailbox: mailboxId,
+    };
+    return this.send(messageObject);
+  }
 }

static/node_modules/udn-frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "udn-frontend",
-  "version": "1.0.4-beta2",
+  "version": "1.0.4-beta4",
   "description": "TypeScript library for UDN apps",
   "main": "index.ts",
   "scripts": {

static/package.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "bloatless-react": "1.2.5-beta1",
     "esbuild": "latest",
-    "udn-frontend": "1.0.4-beta2"
+    "udn-frontend": "1.0.4-beta4"
   },
   "scripts": {
     "build": "esbuild src/index.tsx --bundle --outdir=dist"

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",