diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/BankFrame.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/BankFrame.tsx | 80 |
1 files changed, 57 insertions, 23 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index e75a5c1d0..d1f7250b9 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -14,15 +14,19 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Logger } from "@gnu-taler/taler-util"; +import { Logger, TranslatedString } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { ComponentChildren, Fragment, h, VNode } from "preact"; +import { StateUpdater, useEffect, useState } from "preact/hooks"; import talerLogo from "../assets/logo-white.svg"; import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js"; import { useBackendContext } from "../context/backend.js"; import { ErrorMessage, + PageStateProvider, PageStateType, + errorListeners, + infoListeners, usePageContext, } from "../context/pageState.js"; import { useBusinessAccountDetails } from "../hooks/circuit.js"; @@ -56,7 +60,20 @@ function MaybeBusinessButton({ ); } -export function BankFrame({ +export function BankFrame(props: { + children: ComponentChildren; + goToBusinessAccount?: () => void; +}): VNode { + return ( + <PageStateProvider> + <BankFrame2 goToBusinessAccount={props.goToBusinessAccount}> + {props.children} + </BankFrame2> + </PageStateProvider> + ); +} + +function BankFrame2({ children, goToBusinessAccount, }: { @@ -65,8 +82,8 @@ export function BankFrame({ }): VNode { const { i18n } = useTranslationContext(); const backend = useBackendContext(); - const { pageState, pageStateSetter } = usePageContext(); - logger.trace("state", pageState); + + const { pageStateSetter } = usePageContext(); const demo_sites = []; for (const i in bankUiSettings.demoSites) @@ -140,17 +157,9 @@ export function BankFrame({ href="#" class="pure-button logout-button" onClick={() => { - pageStateSetter((prevState: PageStateType) => { - const { talerWithdrawUri, withdrawalId, ...rest } = - prevState; - backend.logOut(); - return { - ...rest, - withdrawalInProgress: false, - error: undefined, - info: undefined, - isRawPayto: false, - }; + backend.logOut(); + pageStateSetter({ + currentWithdrawalOperationId: undefined, }); }} >{i18n.str`Logout`}</a> @@ -244,8 +253,33 @@ function ErrorBanner({ } function StatusBanner(): VNode | null { - const { pageState, pageStateSetter } = usePageContext(); - + const [info, setInfo] = useState<TranslatedString>(); + const [error, setError] = useState<ErrorMessage>(); + console.log("render", info, error); + function listenError(e: ErrorMessage) { + setError(e); + } + function listenInfo(m: TranslatedString) { + console.log("update info", m, info); + setInfo(m); + } + useEffect(() => { + console.log("sadasdsad", infoListeners.length); + errorListeners.push(listenError); + infoListeners.push(listenInfo); + console.log("sadasdsad", infoListeners.length); + return function unsuscribe() { + const idx = infoListeners.findIndex((d) => d === listenInfo); + if (idx !== -1) { + infoListeners.splice(idx, 1); + } + const idx2 = errorListeners.findIndex((d) => d === listenError); + if (idx2 !== -1) { + errorListeners.splice(idx2, 1); + } + console.log("unload", idx); + }; + }, []); return ( <div style={{ @@ -255,14 +289,14 @@ function StatusBanner(): VNode | null { width: "90%", }} > - {!pageState.info ? undefined : ( + {!info ? undefined : ( <div class="informational informational-ok" style={{ marginTop: 8, paddingLeft: 16, paddingRight: 16 }} > <div style={{ display: "flex", justifyContent: "space-between" }}> <p> - <b>{pageState.info}</b> + <b>{info}</b> </p> <div> <input @@ -270,18 +304,18 @@ function StatusBanner(): VNode | null { class="pure-button" value="Clear" onClick={async () => { - pageStateSetter((prev) => ({ ...prev, info: undefined })); + setInfo(undefined); }} /> </div> </div> </div> )} - {!pageState.error ? undefined : ( + {!error ? undefined : ( <ErrorBanner - error={pageState.error} + error={error} onClear={() => { - pageStateSetter((prev) => ({ ...prev, error: undefined })); + setError(undefined); }} /> )} |