using new localStorage api, pageState => settings, notifcation using observer api

13 files changed, 55 insertions, 163 deletions

diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx
index 013c1b8c1..339f054d7 100644
--- a/packages/demobank-ui/src/pages/AccountPage.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage.tsx
@@ -23,10 +23,10 @@ import {
 import { Fragment, VNode, h } from "preact";
 import { Transactions } from "../components/Transactions/index.js";
 import { useBackendContext } from "../context/backend.js";
-import { notifyError } from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import { LoginForm } from "./LoginForm.js";
 import { PaymentOptions } from "./PaymentOptions.js";
+import { notifyError } from "../hooks/notification.js";
 
 interface Props {
   account: string;
diff --git a/packages/demobank-ui/src/pages/AdminPage.tsx b/packages/demobank-ui/src/pages/AdminPage.tsx
index b867d0103..ad4a6d1a4 100644
--- a/packages/demobank-ui/src/pages/AdminPage.tsx
+++ b/packages/demobank-ui/src/pages/AdminPage.tsx
@@ -25,7 +25,6 @@ import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Cashouts } from "../components/Cashouts/index.js";
 import { useBackendContext } from "../context/backend.js";
-import { ErrorMessage, notifyInfo } from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import {
   useAdminAccountAPI,
@@ -45,6 +44,7 @@ import { ShowCashoutDetails } from "./BusinessAccount.js";
 import { handleNotOkResult } from "./HomePage.js";
 import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
+import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
 
 const charset =
   "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index c4b18189f..d8942a8e7 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -21,16 +21,10 @@ 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";
 import { bankUiSettings } from "../settings.js";
+import { useSettings } from "../hooks/settings.js";
+import { ErrorMessage, onNotificationUpdate } from "../hooks/notification.js";
 
 const IS_PUBLIC_ACCOUNT_ENABLED = false;
 
@@ -60,20 +54,7 @@ function MaybeBusinessButton({
   );
 }
 
-export function BankFrame(props: {
-  children: ComponentChildren;
-  goToBusinessAccount?: () => void;
-}): VNode {
-  return (
-    <PageStateProvider>
-      <BankFrame2 goToBusinessAccount={props.goToBusinessAccount}>
-        {props.children}
-      </BankFrame2>
-    </PageStateProvider>
-  );
-}
-
-function BankFrame2({
+export function BankFrame({
   children,
   goToBusinessAccount,
 }: {
@@ -82,8 +63,7 @@ function BankFrame2({
 }): VNode {
   const { i18n } = useTranslationContext();
   const backend = useBackendContext();
-
-  const { pageStateSetter } = usePageContext();
+  const [settings, updateSettings] = useSettings();
 
   const demo_sites = [];
   for (const i in bankUiSettings.demoSites)
@@ -158,9 +138,7 @@ function BankFrame2({
                 class="pure-button logout-button"
                 onClick={() => {
                   backend.logOut();
-                  pageStateSetter({
-                    currentWithdrawalOperationId: undefined,
-                  });
+                  updateSettings("currentWithdrawalOperationId", undefined);
                 }}
               >{i18n.str`Logout`}</a>
             </div>
@@ -255,28 +233,19 @@ function ErrorBanner({
 function StatusBanner(): VNode | null {
   const [info, setInfo] = useState<TranslatedString>();
   const [error, setError] = useState<ErrorMessage>();
-  function listenError(e: ErrorMessage) {
-    setError(e);
-  }
-  function listenInfo(m: TranslatedString) {
-    setInfo(m);
-  }
   useEffect(() => {
-    /**
-     * Refactor this to reuse the pattern observable/listener
-     */
-    errorListeners.push(listenError);
-    infoListeners.push(listenInfo);
-    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);
+    return onNotificationUpdate((newValue) => {
+      if (newValue === undefined) {
+        setInfo(undefined);
+        setError(undefined);
+      } else {
+        if (newValue.type === "error") {
+          setError(newValue.error);
+        } else {
+          setInfo(newValue.info);
+        }
       }
-    };
+    });
   }, []);
   return (
     <div
diff --git a/packages/demobank-ui/src/pages/BusinessAccount.tsx b/packages/demobank-ui/src/pages/BusinessAccount.tsx
index 02e64ac39..8c505b8f5 100644
--- a/packages/demobank-ui/src/pages/BusinessAccount.tsx
+++ b/packages/demobank-ui/src/pages/BusinessAccount.tsx
@@ -29,13 +29,6 @@ import { Fragment, VNode, h } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { Cashouts } from "../components/Cashouts/index.js";
 import { useBackendContext } from "../context/backend.js";
-import {
-  ErrorMessage,
-  ObservedStateType,
-  PageStateType,
-  notifyInfo,
-  usePageContext,
-} from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import {
   useCashoutDetails,
@@ -53,6 +46,7 @@ import { ErrorBannerFloat } from "./BankFrame.js";
 import { LoginForm } from "./LoginForm.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 import { handleNotOkResult } from "./HomePage.js";
+import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
 
 interface Props {
   onClose: () => void;
diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx
index 2cdbc49bc..340181a4f 100644
--- a/packages/demobank-ui/src/pages/HomePage.tsx
+++ b/packages/demobank-ui/src/pages/HomePage.tsx
@@ -27,17 +27,11 @@ import {
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, VNode, h } from "preact";
-import { StateUpdater } from "preact/hooks";
 import { Loading } from "../components/Loading.js";
 import { useBackendContext } from "../context/backend.js";
-import {
-  ObservedStateType,
-  PageStateType,
-  notifyError,
-  notifyInfo,
-  usePageContext,
-} from "../context/pageState.js";
 import { getInitialBackendBaseURL } from "../hooks/backend.js";
+import { notifyError, notifyInfo } from "../hooks/notification.js";
+import { useSettings } from "../hooks/settings.js";
 import { AccountPage } from "./AccountPage.js";
 import { AdminPage } from "./AdminPage.js";
 import { LoginForm } from "./LoginForm.js";
@@ -63,15 +57,15 @@ export function HomePage({
   onRegister: () => void;
 }): VNode {
   const backend = useBackendContext();
-  const { pageState, pageStateSetter } = usePageContext();
+  const [settings] = useSettings();
   const { i18n } = useTranslationContext();
 
   if (backend.state.status === "loggedOut") {
     return <LoginForm onRegister={onRegister} />;
   }
 
-  if (pageState.currentWithdrawalOperationId) {
-    onPendingOperationFound(pageState.currentWithdrawalOperationId);
+  if (settings.currentWithdrawalOperationId) {
+    onPendingOperationFound(settings.currentWithdrawalOperationId);
     return <Loading />;
   }
 
@@ -104,9 +98,10 @@ export function WithdrawalOperationPage({
   });
   const parsedUri = parseWithdrawUri(uri);
   const { i18n } = useTranslationContext();
-  const { pageStateSetter } = usePageContext();
+
+  const [settings, updateSettings] = useSettings();
   function clearCurrentWithdrawal(): void {
-    pageStateSetter({});
+    updateSettings("currentWithdrawalOperationId", undefined);
     onAbort();
   }
 
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index 0ea001fe2..3e8aee259 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -19,11 +19,11 @@ import {
   ErrorType,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
-import { ErrorMessage } from "../context/pageState.js";
 import { useCredentialsChecker } from "../hooks/backend.js";
+import { ErrorMessage } from "../hooks/notification.js";
 import { bankUiSettings } from "../settings.js";
 import { undefinedIfEmpty } from "../utils.js";
 import { ErrorBannerFloat } from "./BankFrame.js";
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index e0ad64e64..78e55928d 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -17,15 +17,11 @@
 import { AmountJson } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
-import { StateUpdater, useState } from "preact/hooks";
-import {
-  notifyError,
-  notifyInfo,
-  PageStateType,
-  usePageContext,
-} from "../context/pageState.js";
+import { useState } from "preact/hooks";
+import { notifyInfo } from "../hooks/notification.js";
 import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { WalletWithdrawForm } from "./WalletWithdrawForm.js";
+import { useSettings } from "../hooks/settings.js";
 
 /**
  * Let the user choose a payment option,
@@ -33,7 +29,7 @@ import { WalletWithdrawForm } from "./WalletWithdrawForm.js";
  */
 export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
   const { i18n } = useTranslationContext();
-  const { pageStateSetter } = usePageContext();
+  const [settings, updateSettings] = useSettings();
 
   const [tab, setTab] = useState<"charge-wallet" | "wire-transfer">(
     "charge-wallet",
@@ -66,10 +62,8 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
             <WalletWithdrawForm
               focus
               limit={limit}
-              onSuccess={(currentWithdrawalOperationId) => {
-                pageStateSetter({
-                  currentWithdrawalOperationId,
-                });
+              onSuccess={(id) => {
+                updateSettings("currentWithdrawalOperationId", id);
               }}
             />
           </div>
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 5f16fbf6b..0bdceddb1 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -29,11 +29,7 @@ import {
 } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import {
-  notifyError,
-  ObservedStateType,
-  PageStateType,
-} from "../context/pageState.js";
+import { notifyError } from "../hooks/notification.js";
 import { useAccessAPI } from "../hooks/access.js";
 import {
   buildRequestErrorMessage,
diff --git a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
index 290fd0a79..256653dc5 100644
--- a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
+++ b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
@@ -15,33 +15,15 @@
  */
 
 import { Logger } from "@gnu-taler/taler-util";
-import {
-  HttpResponsePaginated,
-  useLocalStorage,
-  useTranslationContext,
-} from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
-import { StateUpdater } from "preact/hooks";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { Fragment, VNode, h } from "preact";
+import { useState } from "preact/hooks";
 import { Transactions } from "../components/Transactions/index.js";
 import { usePublicAccounts } from "../hooks/access.js";
-import {
-  PageStateType,
-  notifyError,
-  usePageContext,
-} from "../context/pageState.js";
 import { handleNotOkResult } from "./HomePage.js";
-import { Loading } from "../components/Loading.js";
 
 const logger = new Logger("PublicHistoriesPage");
 
-// export function PublicHistoriesPage2(): VNode {
-//   return (
-//     <BankFrame>
-//       <PublicHistories />
-//     </BankFrame>
-//   );
-// }
-
 interface Props {
   onLoadNotOk: () => void;
 }
@@ -50,10 +32,16 @@ interface Props {
  * Show histories of public accounts.
  */
 export function PublicHistoriesPage({ onLoadNotOk }: Props): VNode {
-  const [showAccount, setShowAccount] = useShowPublicAccount();
   const { i18n } = useTranslationContext();
 
   const result = usePublicAccounts();
+
+  const [showAccount, setShowAccount] = useState(
+    result.ok && result.data.publicAccounts.length > 0
+      ? result.data.publicAccounts[0].accountLabel
+      : undefined,
+  );
+
   if (!result.ok) {
     onLoadNotOk();
     return handleNotOkResult(i18n)(result);
@@ -64,13 +52,6 @@ export function PublicHistoriesPage({ onLoadNotOk }: Props): VNode {
   const txs: Record<string, h.JSX.Element> = {};
   const accountsBar = [];
 
-  /**
-   * Show the account specified in the props, or just one
-   * from the list if that's not given.
-   */
-  if (typeof showAccount === "undefined" && data.publicAccounts.length > 0) {
-    setShowAccount(data.publicAccounts[1].accountLabel);
-  }
   logger.trace(`Public history tab: ${showAccount}`);
 
   // Ask story of all the public accounts.
@@ -119,23 +100,3 @@ export function PublicHistoriesPage({ onLoadNotOk }: Props): VNode {
     </Fragment>
   );
 }
-
-/**
- * Stores in the state a object containing a 'username'
- * and 'password' field, in order to avoid losing the
- * handle of the data entered by the user in <input> fields.
- */
-function useShowPublicAccount(
-  state?: string,
-): [string | undefined, StateUpdater<string | undefined>] {
-  const ret = useLocalStorage("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 =
-      val instanceof Function
-        ? JSON.stringify(val(retObj))
-        : JSON.stringify(val);
-    ret[1](newVal);
-  };
-  return [retObj, retSetter];
-}
diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index 5b9584dde..525fefbf5 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -18,15 +18,11 @@ import {
   RequestError,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
-import {
-  PageStateType,
-  notifyError,
-  usePageContext,
-} from "../context/pageState.js";
 import { useTestingAPI } from "../hooks/access.js";
+import { notifyError } from "../hooks/notification.js";
 import { bankUiSettings } from "../settings.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 7f3e207ac..c57a9b9c2 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -25,14 +25,10 @@ import {
   RequestError,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { h, VNode } from "preact";
+import { VNode, h } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import {
-  ObservedStateType,
-  PageStateType,
-  notifyError,
-} from "../context/pageState.js";
 import { useAccessAPI } from "../hooks/access.js";
+import { notifyError } from "../hooks/notification.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 10a37cd88..772b07b5f 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -23,14 +23,10 @@ import {
   RequestError,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useMemo, useState } from "preact/hooks";
-import {
-  ObservedStateType,
-  PageStateType,
-  notifyError,
-} from "../context/pageState.js";
 import { useAccessAnonAPI } from "../hooks/access.js";
+import { notifyError } from "../hooks/notification.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index a20b2e90d..826578ffc 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -21,20 +21,15 @@ import {
 } from "@gnu-taler/taler-util";
 import {
   ErrorType,
-  HttpResponsePaginated,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { Loading } from "../components/Loading.js";
-import {
-  ObservedStateType,
-  notifyError,
-  notifyInfo,
-} from "../context/pageState.js";
 import { useWithdrawalDetails } from "../hooks/access.js";
+import { notifyInfo } from "../hooks/notification.js";
+import { handleNotOkResult } from "./HomePage.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
-import { handleNotOkResult } from "./HomePage.js";
 
 const logger = new Logger("WithdrawalQRCode");