remodel translations

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];