use translation from commons

packages/demobank-ui/src/components/app.tsx

@@ -21,8 +21,9 @@ import {
 import { h, FunctionalComponent } from "preact";
 import { BackendStateProvider } from "../context/backend.js";
 import { PageStateProvider } from "../context/pageState.js";
-import { TranslationProvider } from "../context/translation.js";
 import { Routing } from "../pages/Routing.js";
+import { strings } from "../i18n/strings.js";
+import { TranslationProvider } from "@gnu-taler/web-util/lib/index.browser";
 
 /**
  * FIXME:
@@ -43,7 +44,7 @@ import { Routing } from "../pages/Routing.js";
 
 const App: FunctionalComponent = () => {
   return (
-    <TranslationProvider>
+    <TranslationProvider source={strings}>
       <PageStateProvider>
         <BackendStateProvider>
           <Routing />

packages/demobank-ui/src/components/menu/LangSelector.tsx

@@ -21,7 +21,7 @@
 
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { strings as messages } from "../../i18n/strings.js";
 
 type LangsNames = {

packages/demobank-ui/src/components/menu/SideBar.tsx

@@ -20,7 +20,7 @@
  */
 
 import { h, VNode } from "preact";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 interface Props {
   mobile?: boolean;

packages/demobank-ui/src/components/picker/DurationPicker.tsx

@@ -21,7 +21,7 @@
 
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import "../../scss/DurationPicker.scss";
 
 export interface Props {

packages/demobank-ui/src/context/pageState.ts

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { hooks } from "@gnu-taler/web-util/lib/index.browser";
+import { useNotNullLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, createContext, h, VNode } from "preact";
 import { StateUpdater, useContext } from "preact/hooks";
 
@@ -62,7 +62,7 @@ function usePageState(
     withdrawalInProgress: false,
   },
 ): [PageStateType, StateUpdater<PageStateType>] {
-  const ret = hooks.useNotNullLocalStorage("page-state", JSON.stringify(state));
+  const ret = useNotNullLocalStorage("page-state", JSON.stringify(state));
   const retObj: PageStateType = JSON.parse(ret[0]);
 
   const retSetter: StateUpdater<PageStateType> = function (val) {

packages/demobank-ui/src/context/translation.ts

@@ -1,88 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-import { i18n, setupI18n } from "@gnu-taler/taler-util";
-import { ComponentChildren, createContext, h, VNode } from "preact";
-import { useContext, useEffect } from "preact/hooks";
-import { hooks } from "@gnu-taler/web-util/lib/index.browser";
-import { strings } from "../i18n/strings.js";
-
-
-export type InternationalizationAPI = typeof i18n
-
-interface Type {
-  lang: string;
-  supportedLang: { [id in keyof typeof supportedLang]: string };
-  changeLanguage: (l: string) => void;
-  i18n: InternationalizationAPI;
-  isSaved: boolean;
-}
-
-const supportedLang = {
-  es: "Espanol [es]",
-  en: "English [en]",
-  fr: "Francais [fr]",
-  de: "Deutsch [de]",
-  sv: "Svenska [sv]",
-  it: "Italiane [it]",
-  navigator: "Defined by navigator",
-};
-
-const initial = {
-  lang: "en",
-  supportedLang,
-  changeLanguage: () => {
-    // do not change anything
-  },
-  i18n,
-  isSaved: false,
-};
-const Context = createContext<Type>(initial);
-
-interface Props {
-  initial?: string;
-  children: ComponentChildren;
-  forceLang?: string;
-}
-
-// Outmost UI wrapper.
-export const TranslationProvider = ({
-  initial,
-  children,
-  forceLang,
-}: Props): VNode => {
-  const [lang, changeLanguage, isSaved] = hooks.useLang(initial);
-  useEffect(() => {
-    if (forceLang) {
-      changeLanguage(forceLang);
-    }
-  });
-  useEffect(() => {
-    setupI18n(lang, strings);
-  }, [lang]);
-  if (forceLang) {
-    setupI18n(forceLang, strings);
-  } else {
-    setupI18n(lang, strings);
-  }
-
-  return h(Context.Provider, {
-    value: { lang, changeLanguage, supportedLang, i18n, isSaved },
-    children,
-  });
-};
-
-export const useTranslationContext = (): Type => useContext(Context);

packages/demobank-ui/src/hooks/backend.ts

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { hooks } from "@gnu-taler/web-util/lib/index.browser";
+import { useLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
 
 /**
  * Has the information to reach and
@@ -48,7 +48,7 @@ export interface BackendStateHandler {
  * base URL.
  */
 export function useBackendState(): BackendStateHandler {
-  const [value, update] = hooks.useLocalStorage(
+  const [value, update] = useLocalStorage(
     "backend-state",
     JSON.stringify(defaultState),
   );

packages/demobank-ui/src/hooks/index.ts

@@ -20,7 +20,7 @@
  */
 
 import { StateUpdater } from "preact/hooks";
-import { hooks } from "@gnu-taler/web-util/lib/index.browser";
+import { useLocalStorage, useNotNullLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
 export type ValueOrFunction<T> = T | ((p: T) => T);
 
 const calculateRootPath = () => {
@@ -34,11 +34,11 @@ const calculateRootPath = () => {
 export function useBackendURL(
   url?: string,
 ): [string, boolean, StateUpdater<string>, () => void] {
-  const [value, setter] = hooks.useNotNullLocalStorage(
+  const [value, setter] = useNotNullLocalStorage(
     "backend-url",
     url || calculateRootPath(),
   );
-  const [triedToLog, setTriedToLog] = hooks.useLocalStorage("tried-login");
+  const [triedToLog, setTriedToLog] = useLocalStorage("tried-login");
 
   const checkedSetter = (v: ValueOrFunction<string>) => {
     setTriedToLog("yes");
@@ -55,13 +55,13 @@ export function useBackendDefaultToken(): [
   string | undefined,
   StateUpdater<string | undefined>,
 ] {
-  return hooks.useLocalStorage("backend-token");
+  return useLocalStorage("backend-token");
 }
 
 export function useBackendInstanceToken(
   id: string,
 ): [string | undefined, StateUpdater<string | undefined>] {
-  const [token, setToken] = hooks.useLocalStorage(`backend-token-${id}`);
+  const [token, setToken] = useLocalStorage(`backend-token-${id}`);
   const [defaultToken, defaultSetToken] = useBackendDefaultToken();
 
   // instance named 'default' use the default token

packages/demobank-ui/src/pages/home/AccountPage.tsx

@@ -15,12 +15,12 @@
  */
 
 import { Amounts, HttpStatusCode, Logger } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import useSWR, { SWRConfig, useSWRConfig } from "swr";
 import { useBackendContext } from "../../context/backend.js";
 import { PageStateType, usePageContext } from "../../context/pageState.js";
-import { useTranslationContext } from "../../context/translation.js";
 import { BackendInfo } from "../../hooks/backend.js";
 import { bankUiSettings } from "../../settings.js";
 import { getIbanFromPayto, prepareHeaders } from "../../utils.js";
@@ -253,7 +253,7 @@ function Account({ accountLabel }: { accountLabel: string }): VNode {
 }
 
 // function useTransactionPageNumber(): [number, StateUpdater<number>] {
-//   const ret = hooks.useNotNullLocalStorage("transaction-page", "0");
+//   const ret = useNotNullLocalStorage("transaction-page", "0");
 //   const retObj = JSON.parse(ret[0]);
 //   const retSetter: StateUpdater<number> = function (val) {
 //     const newVal =

packages/demobank-ui/src/pages/home/BankFrame.tsx

@@ -20,7 +20,7 @@ import talerLogo from "../../assets/logo-white.svg";
 import { LangSelectorLikePy as LangSelector } from "../../components/menu/LangSelector.js";
 import { useBackendContext } from "../../context/backend.js";
 import { PageStateType, usePageContext } from "../../context/pageState.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { bankUiSettings } from "../../settings.js";
 
 const logger = new Logger("BankFrame");

packages/demobank-ui/src/pages/home/LoginForm.tsx

@@ -18,7 +18,7 @@ import { h, VNode } from "preact";
 import { route } from "preact-router";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { BackendStateHandler } from "../../hooks/backend.js";
 import { bankUiSettings } from "../../settings.js";
 import { getBankBackendBaseUrl, undefinedIfEmpty } from "../../utils.js";

packages/demobank-ui/src/pages/home/PaymentOptions.tsx

@@ -16,7 +16,7 @@
 
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { WalletWithdrawForm } from "./WalletWithdrawForm.js";
 

packages/demobank-ui/src/pages/home/PaytoWireTransferForm.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Amounts, Logger, parsePaytoUri } from "@gnu-taler/taler-util";
-import { hooks } from "@gnu-taler/web-util/lib/index.browser";
+import { useLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { StateUpdater, useEffect, useRef, useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
@@ -23,7 +23,7 @@ import { PageStateType, usePageContext } from "../../context/pageState.js";
 import {
   InternationalizationAPI,
   useTranslationContext,
-} from "../../context/translation.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders, undefinedIfEmpty } from "../../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
@@ -330,7 +330,7 @@ type WireTransferRequestTypeOpt = WireTransferRequestType | undefined;
 function useWireTransferRequestType(
   state?: WireTransferRequestType,
 ): [WireTransferRequestTypeOpt, StateUpdater<WireTransferRequestTypeOpt>] {
-  const ret = hooks.useLocalStorage(
+  const ret = useLocalStorage(
     "wire-transfer-request-state",
     JSON.stringify(state),
   );

packages/demobank-ui/src/pages/home/PublicHistoriesPage.tsx

@@ -15,13 +15,13 @@
  */
 
 import { Logger } from "@gnu-taler/taler-util";
-import { hooks } from "@gnu-taler/web-util/lib/index.browser";
+import { useLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { route } from "preact-router";
 import { StateUpdater } from "preact/hooks";
 import useSWR, { SWRConfig } from "swr";
 import { PageStateType, usePageContext } from "../../context/pageState.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { getBankBackendBaseUrl } from "../../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { Transactions } from "./Transactions.js";
@@ -169,10 +169,7 @@ function PublicHistories(): VNode {
 function useShowPublicAccount(
   state?: string,
 ): [string | undefined, StateUpdater<string | undefined>] {
-  const ret = hooks.useLocalStorage(
+  const ret = useLocalStorage("show-public-account", JSON.stringify(state));
-    "show-public-account",
-    JSON.stringify(state),
-  );
   const retObj: string | undefined = ret[0] ? JSON.parse(ret[0]) : ret[0];
   const retSetter: StateUpdater<string | undefined> = function (val) {
     const newVal =

packages/demobank-ui/src/pages/home/QrCodeSection.tsx

@@ -17,7 +17,7 @@
 import { h, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import { QR } from "../../components/QR.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 export function QrCodeSection({
   talerWithdrawUri,

packages/demobank-ui/src/pages/home/RegistrationPage.tsx

@@ -22,7 +22,7 @@ import { PageStateType, usePageContext } from "../../context/pageState.js";
 import {
   InternationalizationAPI,
   useTranslationContext,
-} from "../../context/translation.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { BackendStateHandler } from "../../hooks/backend.js";
 import { bankUiSettings } from "../../settings.js";
 import { getBankBackendBaseUrl, undefinedIfEmpty } from "../../utils.js";

packages/demobank-ui/src/pages/home/Transactions.tsx

@@ -18,7 +18,7 @@ import { Logger } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import useSWR from "swr";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 const logger = new Logger("Transactions");
 /**

packages/demobank-ui/src/pages/home/WalletWithdrawForm.tsx

@@ -22,7 +22,7 @@ import { PageStateType, usePageContext } from "../../context/pageState.js";
 import {
   InternationalizationAPI,
   useTranslationContext,
-} from "../../context/translation.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders, validateAmount } from "../../utils.js";
 

packages/demobank-ui/src/pages/home/WithdrawalConfirmationQuestion.tsx

@@ -22,7 +22,7 @@ import { PageStateType, usePageContext } from "../../context/pageState.js";
 import {
   InternationalizationAPI,
   useTranslationContext,
-} from "../../context/translation.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { BackendState } from "../../hooks/backend.js";
 import { prepareHeaders } from "../../utils.js";
 

packages/demobank-ui/src/pages/home/WithdrawalQRCode.tsx

@@ -18,7 +18,7 @@ import { Logger } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import useSWR from "swr";
 import { PageStateType, usePageContext } from "../../context/pageState.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";