From 1d7c8f7083f2aa98295f1ad28399c8e19a9e7754 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 14 Mar 2022 12:15:41 -0300 Subject: WIP fixing translation context --- packages/taler-wallet-webextension/src/NavigationBar.tsx | 4 +++- .../src/components/BankDetailsByPaytoType.tsx | 5 ++++- .../taler-wallet-webextension/src/context/translation.ts | 14 +++++--------- packages/taler-wallet-webextension/src/hooks/useLang.ts | 12 +++++++----- packages/taler-wallet-webextension/src/popupEntryPoint.tsx | 8 ++++++-- .../taler-wallet-webextension/src/walletEntryPoint.tsx | 9 +++++++-- 6 files changed, 32 insertions(+), 20 deletions(-) (limited to 'packages/taler-wallet-webextension/src') diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 14619473b..bebe9436e 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/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 ( @@ -78,6 +79,7 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode { } export function WalletNavBar({ path = "" }: { path?: string }): VNode { + const { i18n } = useTranslationContext(); return ( diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index e9a32ebf7..48360f7c7 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -14,9 +14,10 @@ GNU Taler; see the file COPYING. If not, see */ -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 ? ( Account} diff --git a/packages/taler-wallet-webextension/src/context/translation.ts b/packages/taler-wallet-webextension/src/context/translation.ts index abbda548b..2ded07078 100644 --- a/packages/taler-wallet-webextension/src/context/translation.ts +++ b/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(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); diff --git a/packages/taler-wallet-webextension/src/hooks/useLang.ts b/packages/taler-wallet-webextension/src/hooks/useLang.ts index cc4ff3fc8..7215f2256 100644 --- a/packages/taler-wallet-webextension/src/hooks/useLang.ts +++ b/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); } diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index c076f6670..6a58648b1 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -20,7 +20,7 @@ * @author sebasjm */ -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 ( diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index e37bf149b..9f96a03e0 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -20,7 +20,7 @@ * @author sebasjm */ -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 ( -- cgit v1.2.3