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);
           }}
         />
       )}