add mailboxes

static/src/mainScreen.tsx

@@ -3,8 +3,10 @@ import * as React from "bloatless-react";
 import {
   isMessageEmpty,
   lastReceivedMessage,
+  mailboxId,
   newMessageBody,
   newMessageChannel,
+  requestMailbox,
   sendMessage,
   subscribe,
   subscriptionChannel,
@@ -28,6 +30,22 @@ export function MainScreen() {
 
         <hr></hr>
 
+        <div class="tile width-input">
+          <div>
+            <b>{getText("mailbox")}</b>
+            <p class="secondary" subscribe:innerText={mailboxId}></p>
+          </div>
+        </div>
+
+        <div class="flex-row width-input justify-end">
+          <button class="primary width-100" on:click={requestMailbox}>
+            {getText("requestMailbox")}
+            <span class="icon">inbox</span>
+          </button>
+        </div>
+
+        <hr></hr>
+
         <label class="tile">
           <div>
             <span>{getText("subscribeToChannel")}</span>

static/src/model.tsx

@@ -4,7 +4,7 @@ import UDNFrontend from "udn-frontend";
 import { getText } from "./translations";
 
 export class Message implements React.Identifiable {
-  uuid = new React.UUID();
+  id = React.UUID();
 
   constructor(public channel: string, public body: string) {}
 }
@@ -15,6 +15,9 @@ const UDN = new UDNFrontend();
 UDN.onconnect = () => {
   isDisconnected.value = false;
   updateStats();
+  if (mailboxId.value != "") {
+    UDN.accessMailbox(mailboxId.value);
+  }
 };
 
 UDN.onmessage = (data) => {
@@ -27,6 +30,10 @@ UDN.onmessage = (data) => {
   }
 };
 
+UDN.onmailbox = (id) => {
+  mailboxId.value = id;
+};
+
 UDN.ondisconnect = () => {
   isDisconnected.value = true;
   setTimeout(connect, 2000);
@@ -40,6 +47,7 @@ connect();
 // STATE
 // connection
 export const isDisconnected = new React.State(true);
+export const mailboxId = React.restoreState("mailbox-id", "");
 
 // messages
 export const messages = new React.ListState<Message>();
@@ -93,3 +101,7 @@ export function sendMessage() {
   UDN.sendMessage(newMessageChannel.value, newMessageBody.value);
   newMessageBody.value = "";
 }
+
+export function requestMailbox() {
+  UDN.requestMailbox();
+}

static/src/translations.tsx

@@ -1,5 +1,7 @@
 // STATIC
 export const staticTextEnglish = {
+  mailbox: "Mailbox",
+  requestMailbox: "Request Mailbox",
   channel: "Channel",
   channel_placeholder: "my-channel",
   disconnected: "Server disconnected",
@@ -23,6 +25,8 @@ export const staticTextEnglish = {
 export const translations: { [key: string]: typeof staticTextEnglish } = {
   en: staticTextEnglish,
   es: {
+    mailbox: "Buzón",
+    requestMailbox: "Solicitar buzón",
     channel: "Canal",
     channel_placeholder: "mi-canal",
     disconnected: "Sin coneción",
@@ -43,6 +47,8 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
     unsubscribe: "Cancelar",
   },
   de: {
+    mailbox: "Briefkasten",
+    requestMailbox: "Briefkasten beantragen",
     channel: "Kanal",
     channel_placeholder: "mein-kanal",
     disconnected: "Verbindung getrennt",