WIP fixing translation context

packages/taler-wallet-webextension/src/NavigationBar.tsx

@@ -24,10 +24,10 @@
 /**
  * Imports.
  */
-import { i18n, Translate } from "@gnu-taler/taler-util";
 import { VNode, h } from "preact";
 import { JustInDevMode } from "./components/JustInDevMode";
 import { NavigationHeader, NavigationHeaderHolder } from "./components/styled";
+import { useTranslationContext } from "./context/translation.js";
 
 /**
  * List of pages used by the wallet
@@ -61,6 +61,7 @@ export enum Pages {
 }
 
 export function PopupNavBar({ path = "" }: { path?: string }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <NavigationHeader>
       <a href="/balance" class={path.startsWith("/balance") ? "active" : ""}>
@@ -78,6 +79,7 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode {
 }
 
 export function WalletNavBar({ path = "" }: { path?: string }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <NavigationHeaderHolder>
       <NavigationHeader>

packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx

@@ -14,9 +14,10 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { PaytoUri, i18n } from "@gnu-taler/taler-util";
+import { PaytoUri } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { useTranslationContext } from "../context/translation.js";
 import { CopiedIcon, CopyIcon } from "../svg";
 import { ButtonBox, TooltipRight } from "./styled";
 
@@ -33,6 +34,8 @@ export function BankDetailsByPaytoType({
   exchangeBaseUrl,
   amount,
 }: BankDetailsProps): VNode {
+  const { i18n } = useTranslationContext();
+
   const firstPart = !payto ? undefined : !payto.isKnown ? (
     <Row
       name={<i18n.Translate>Account</i18n.Translate>}

packages/taler-wallet-webextension/src/context/translation.ts

@@ -25,12 +25,13 @@ import { useLang } from "../hooks/useLang";
 //@ts-ignore: type declaration
 import * as jedLib from "jed";
 import { strings } from "../i18n/strings";
-import { setupI18n } from "@gnu-taler/taler-util";
+import { setupI18n, i18n } from "@gnu-taler/taler-util";
 
 interface Type {
   lang: string;
   supportedLang: { [id in keyof typeof supportedLang]: string }
   changeLanguage: (l: string) => void;
+  i18n: typeof i18n
 }
 
 const supportedLang = {
@@ -53,6 +54,7 @@ const initial = {
   changeLanguage: () => {
     // do not change anything
   },
+  i18n
 };
 const Context = createContext<Type>(initial);
 
@@ -62,18 +64,12 @@ interface Props {
   forceLang?: string;
 }
 
-//we use forceLang when we don't want to use the saved state, but sone forced
-//runtime lang predefined lang
 export const TranslationProvider = ({
   initial,
   children,
   forceLang,
 }: Props): VNode => {
-  const [lang, changeLanguage2] = useLang(initial);
-  function changeLanguage(s: string) {
-    console.log("trying to change lang to ", s, "current lang", lang)
-    changeLanguage2(s)
-  }
+  const [lang, changeLanguage] = useLang(initial);
   useEffect(() => {
     if (forceLang) {
       changeLanguage(forceLang);
@@ -87,7 +83,7 @@ export const TranslationProvider = ({
   } else {
     setupI18n(lang, strings);
   }
-  return h(Context.Provider, { value: { lang, changeLanguage, supportedLang }, children });
+  return h(Context.Provider, { value: { lang, changeLanguage, supportedLang, i18n }, children });
 };
 
 export const useTranslationContext = (): Type => useContext(Context);

packages/taler-wallet-webextension/src/hooks/useLang.ts

@@ -16,11 +16,13 @@
 
 import { useNotNullLocalStorage } from "./useLocalStorage";
 
+function getBrowserLang(): string | undefined {
+  if (window.navigator.languages) return window.navigator.languages[0]
+  if (window.navigator.language) return window.navigator.language
+  return undefined;
+}
+
 export function useLang(initial?: string): [string, (s: string) => void] {
-  const browserLang: string | undefined =
-    typeof window !== "undefined"
-      ? navigator.language || (navigator as any).userLanguage
-      : undefined;
-  const defaultLang = (browserLang || initial || "en").substring(0, 2);
+  const defaultLang = (getBrowserLang() || initial || "en").substring(0, 2);
   return useNotNullLocalStorage("lang-preference", defaultLang);
 }

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -20,7 +20,7 @@
  * @author sebasjm <dold@taler.net>
  */
 
-import { setupI18n, i18n } from "@gnu-taler/taler-util";
+import { setupI18n } from "@gnu-taler/taler-util";
 import { createHashHistory } from "history";
 import { Fragment, h, render, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
@@ -30,7 +30,10 @@ import PendingTransactions from "./components/PendingTransactions";
 import { PopupBox } from "./components/styled";
 import { DevContextProvider } from "./context/devContext";
 import { IoCProviderForRuntime } from "./context/iocContext";
-import { TranslationProvider } from "./context/translation";
+import {
+  TranslationProvider,
+  useTranslationContext,
+} from "./context/translation";
 import { useTalerActionURL } from "./hooks/useTalerActionURL";
 import { strings } from "./i18n/strings";
 import { Pages, PopupNavBar } from "./NavigationBar";
@@ -193,6 +196,7 @@ function RedirectToWalletPage(): VNode {
       },
     );
   });
+  const { i18n } = useTranslationContext();
   return (
     <span>
       <i18n.Translate>

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -20,7 +20,7 @@
  * @author sebasjm <dold@taler.net>
  */
 
-import { i18n, setupI18n } from "@gnu-taler/taler-util";
+import { setupI18n } from "@gnu-taler/taler-util";
 import { createHashHistory } from "history";
 import { Fragment, h, render, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
@@ -36,7 +36,10 @@ import {
 } from "./components/styled";
 import { DevContextProvider } from "./context/devContext";
 import { IoCProviderForRuntime } from "./context/iocContext";
-import { TranslationProvider } from "./context/translation";
+import {
+  TranslationProvider,
+  useTranslationContext,
+} from "./context/translation";
 import { PayPage } from "./cta/Pay";
 import { RefundPage } from "./cta/Refund";
 import { TipPage } from "./cta/Tip";
@@ -94,6 +97,8 @@ function Application(): VNode {
       setGlobalNotification(undefined);
     }
   }
+  const { i18n } = useTranslationContext();
+
   return (
     <TranslationProvider>
       <DevContextProvider>