[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 02/03: using new localStorage api, pageState => sett
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 02/03: using new localStorage api, pageState => settings, notifcation using observer api |
|
Date: |
Fri, 14 Apr 2023 19:18:09 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit 5ea22a325c069fe497b2dc8a73d4de69fd8cc27b
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Fri Apr 14 14:07:15 2023 -0300
using new localStorage api, pageState => settings, notifcation using
observer api
---
packages/demobank-ui/.gitignore | 1 +
packages/demobank-ui/src/components/app.tsx | 9 +-
packages/demobank-ui/src/context/pageState.ts | 113 ---------------------
packages/demobank-ui/src/hooks/backend.ts | 2 +-
packages/demobank-ui/src/hooks/index.ts | 40 ++------
packages/demobank-ui/src/hooks/notification.ts | 54 ++++++++++
packages/demobank-ui/src/hooks/settings.ts | 49 +++++++++
packages/demobank-ui/src/pages/AccountPage.tsx | 2 +-
packages/demobank-ui/src/pages/AdminPage.tsx | 2 +-
packages/demobank-ui/src/pages/BankFrame.tsx | 63 +++---------
packages/demobank-ui/src/pages/BusinessAccount.tsx | 8 +-
packages/demobank-ui/src/pages/HomePage.tsx | 21 ++--
packages/demobank-ui/src/pages/LoginForm.tsx | 4 +-
packages/demobank-ui/src/pages/PaymentOptions.tsx | 18 ++--
.../src/pages/PaytoWireTransferForm.tsx | 6 +-
.../demobank-ui/src/pages/PublicHistoriesPage.tsx | 59 ++---------
.../demobank-ui/src/pages/RegistrationPage.tsx | 8 +-
.../demobank-ui/src/pages/WalletWithdrawForm.tsx | 8 +-
.../src/pages/WithdrawalConfirmationQuestion.tsx | 8 +-
.../demobank-ui/src/pages/WithdrawalQRCode.tsx | 11 +-
packages/demobank-ui/src/utils.ts | 2 +-
21 files changed, 176 insertions(+), 312 deletions(-)
diff --git a/packages/demobank-ui/.gitignore b/packages/demobank-ui/.gitignore
index 7e0633d5e..30cb2774c 100644
--- a/packages/demobank-ui/.gitignore
+++ b/packages/demobank-ui/.gitignore
@@ -1,3 +1,4 @@
node_modules
/build
/*.log
+/demobank-ui-settings.js
diff --git a/packages/demobank-ui/src/components/app.tsx
b/packages/demobank-ui/src/components/app.tsx
index ef535bb9f..5783c288a 100644
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -18,13 +18,12 @@ import {
globalLogLevel,
setGlobalLogLevelFromString,
} from "@gnu-taler/taler-util";
-import { h, FunctionalComponent } from "preact";
-import { BackendStateProvider } from "../context/backend.js";
-import { PageStateProvider } from "../context/pageState.js";
-import { Routing } from "../pages/Routing.js";
-import { strings } from "../i18n/strings.js";
import { TranslationProvider } from "@gnu-taler/web-util/lib/index.browser";
+import { FunctionalComponent, h } from "preact";
import { SWRConfig } from "swr";
+import { BackendStateProvider } from "../context/backend.js";
+import { strings } from "../i18n/strings.js";
+import { Routing } from "../pages/Routing.js";
const WITH_LOCAL_STORAGE_CACHE = false;
diff --git a/packages/demobank-ui/src/context/pageState.ts
b/packages/demobank-ui/src/context/pageState.ts
deleted file mode 100644
index 074fbcafc..000000000
--- a/packages/demobank-ui/src/context/pageState.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE. See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
- */
-
-import { TranslatedString } from "@gnu-taler/taler-util";
-import { useNotNullLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
-import { ComponentChildren, createContext, h, VNode } from "preact";
-import { StateUpdater, useContext } from "preact/hooks";
-
-/**
- *
- * @author Sebastian Javier Marchano (sebasjm)
- */
-
-export type Type = {
- pageState: PageStateType;
- pageStateSetter: StateUpdater<PageStateType>;
-};
-const initial: Type = {
- pageState: {},
- pageStateSetter: () => {
- null;
- },
-};
-const Context = createContext<Type>(initial);
-
-export const usePageContext = (): Type => useContext(Context);
-
-export const PageStateProvider = ({
- children,
-}: {
- children: ComponentChildren;
-}): VNode => {
- const [pageState, pageStateSetter] = usePageState();
-
- return h(Context.Provider, {
- value: { pageState, pageStateSetter },
- children,
- });
-};
-
-/**
- * Wrapper providing defaults.
- */
-function usePageState(
- state: PageStateType = {},
-): [PageStateType, StateUpdater<PageStateType>] {
- const ret = useNotNullLocalStorage("page-state", JSON.stringify(state));
- const retObj: PageStateType = JSON.parse(ret[0]);
-
- const retSetter: StateUpdater<PageStateType> = function (val) {
- const newVal =
- val instanceof Function
- ? JSON.stringify(val(retObj))
- : JSON.stringify(val);
-
- ret[1](newVal);
- };
-
- //when moving from one page to another
- //clean up the info and error bar
- function removeLatestInfo(val: any): ReturnType<typeof retSetter> {
- const updater = typeof val === "function" ? val : (c: any) => val;
- return retSetter((current: any) => {
- const cleanedCurrent: PageStateType = {
- ...current,
- info: undefined,
- errors: undefined,
- timestamp: new Date().getTime(),
- };
- return updater(cleanedCurrent);
- });
- }
-
- return [retObj, removeLatestInfo];
-}
-
-export type ErrorMessage = {
- description?: string;
- title: TranslatedString;
- debug?: string;
-};
-/**
- * Track page state.
- */
-export interface PageStateType {
- currentWithdrawalOperationId?: string;
-}
-
-export interface ObservedStateType {
- error: ErrorMessage | undefined;
- info: TranslatedString | undefined;
-}
-export const errorListeners: Array<(error: ErrorMessage) => void> = [];
-export const infoListeners: Array<(info: TranslatedString) => void> = [];
-export function notifyError(error: ErrorMessage) {
- errorListeners.forEach((cb) => cb(error));
-}
-export function notifyInfo(info: TranslatedString) {
- infoListeners.forEach((cb) => cb(info));
-}
diff --git a/packages/demobank-ui/src/hooks/backend.ts
b/packages/demobank-ui/src/hooks/backend.ts
index ca73a4793..9fe0f5b14 100644
--- a/packages/demobank-ui/src/hooks/backend.ts
+++ b/packages/demobank-ui/src/hooks/backend.ts
@@ -82,7 +82,7 @@ export interface BackendStateHandler {
* base URL.
*/
export function useBackendState(): BackendStateHandler {
- const [value, update] = useLocalStorage(
+ const { value, update } = useLocalStorage(
"backend-state",
JSON.stringify(defaultState),
);
diff --git a/packages/demobank-ui/src/hooks/index.ts
b/packages/demobank-ui/src/hooks/index.ts
index 263b53e1d..99da9e679 100644
--- a/packages/demobank-ui/src/hooks/index.ts
+++ b/packages/demobank-ui/src/hooks/index.ts
@@ -20,10 +20,7 @@
*/
import { StateUpdater } from "preact/hooks";
-import {
- useLocalStorage,
- useNotNullLocalStorage,
-} from "@gnu-taler/web-util/lib/index.browser";
+import { useLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
export type ValueOrFunction<T> = T | ((p: T) => T);
const calculateRootPath = () => {
@@ -37,38 +34,23 @@ const calculateRootPath = () => {
export function useBackendURL(
url?: string,
): [string, boolean, StateUpdater<string>, () => void] {
- const [value, setter] = useNotNullLocalStorage(
+ const { value, update: setter } = useLocalStorage(
"backend-url",
url || calculateRootPath(),
);
- const [triedToLog, setTriedToLog] = useLocalStorage("tried-login");
+
+ const {
+ value: triedToLog,
+ update: setTriedToLog,
+ reset: resetBackend,
+ } = useLocalStorage("tried-login");
const checkedSetter = (v: ValueOrFunction<string>) => {
setTriedToLog("yes");
- return setter((p) => (v instanceof Function ? v(p) : v).replace(/\/$/,
""));
+ const computedValue =
+ v instanceof Function ? v(value) : v.replace(/\/$/, "");
+ return setter(computedValue);
};
- const resetBackend = () => {
- setTriedToLog(undefined);
- };
return [value, !!triedToLog, checkedSetter, resetBackend];
}
-
-export function useBackendDefaultToken(): [
- string | undefined,
- StateUpdater<string | undefined>,
-] {
- return useLocalStorage("backend-token");
-}
-
-export function useBackendInstanceToken(
- id: string,
-): [string | undefined, StateUpdater<string | undefined>] {
- const [token, setToken] = useLocalStorage(`backend-token-${id}`);
- const [defaultToken, defaultSetToken] = useBackendDefaultToken();
-
- // instance named 'default' use the default token
- if (id === "default") return [defaultToken, defaultSetToken];
-
- return [token, setToken];
-}
diff --git a/packages/demobank-ui/src/hooks/notification.ts
b/packages/demobank-ui/src/hooks/notification.ts
new file mode 100644
index 000000000..7cdece515
--- /dev/null
+++ b/packages/demobank-ui/src/hooks/notification.ts
@@ -0,0 +1,54 @@
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { memoryMap } from "@gnu-taler/web-util/lib/index.browser";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
+
+export type NotificationMessage = ErrorNotification | InfoNotification;
+
+//FIXME: this should not be exported since every notification
+// goes throw notify function
+export interface ErrorMessage {
+ description?: string;
+ title: TranslatedString;
+ debug?: string;
+}
+
+interface ErrorNotification {
+ type: "error";
+ error: ErrorMessage;
+}
+interface InfoNotification {
+ type: "info";
+ info: TranslatedString;
+}
+
+const storage = memoryMap<NotificationMessage>();
+const NOTIFICATION_KEY = "notification";
+
+export function onNotificationUpdate(
+ handler: (newValue: NotificationMessage | undefined) => void,
+) {
+ return storage.onUpdate(NOTIFICATION_KEY, () => {
+ const newValue = storage.get(NOTIFICATION_KEY);
+ handler(newValue);
+ });
+}
+
+export function notifyError(error: ErrorMessage) {
+ storage.set(NOTIFICATION_KEY, { type: "error", error });
+}
+export function notifyInfo(info: TranslatedString) {
+ storage.set(NOTIFICATION_KEY, { type: "info", info });
+}
+
+export function useNotifications(): [
+ NotificationMessage | undefined,
+ StateUpdater<NotificationMessage | undefined>,
+] {
+ const [value, setter] = useState<NotificationMessage | undefined>();
+ useEffect(() => {
+ return storage.onUpdate(NOTIFICATION_KEY, () => {
+ setter(storage.get(NOTIFICATION_KEY));
+ });
+ });
+ return [value, setter];
+}
diff --git a/packages/demobank-ui/src/hooks/settings.ts
b/packages/demobank-ui/src/hooks/settings.ts
new file mode 100644
index 000000000..5115f9959
--- /dev/null
+++ b/packages/demobank-ui/src/hooks/settings.ts
@@ -0,0 +1,49 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { useLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
+
+interface Settings {
+ currentWithdrawalOperationId: string | undefined;
+}
+
+const defaultSettings: Settings = {
+ currentWithdrawalOperationId: undefined,
+};
+
+function parse_json_or_undefined<T>(str: string | undefined): T | undefined {
+ if (str === undefined) return undefined;
+ try {
+ return JSON.parse(str);
+ } catch {
+ return undefined;
+ }
+}
+
+export function useSettings(): [
+ Readonly<Settings>,
+ <T extends keyof Settings>(key: T, value: Settings[T]) => void,
+] {
+ const { value, update } = useLocalStorage("demobank-settings");
+
+ const parsed: Settings = parse_json_or_undefined(value) ?? defaultSettings;
+ function updateField<T extends keyof Settings>(k: T, v: Settings[T]) {
+ const newValue = { ...parsed, [k]: v };
+ const json = JSON.stringify(newValue);
+ update(json);
+ }
+ return [parsed, updateField];
+}
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");
diff --git a/packages/demobank-ui/src/utils.ts
b/packages/demobank-ui/src/utils.ts
index af0329555..e0aac8ecb 100644
--- a/packages/demobank-ui/src/utils.ts
+++ b/packages/demobank-ui/src/utils.ts
@@ -20,7 +20,7 @@ import {
HttpError,
useTranslationContext,
} from "@gnu-taler/web-util/lib/index.browser";
-import { ErrorMessage } from "./context/pageState.js";
+import { ErrorMessage } from "./hooks/notification.js";
/**
* Validate (the number part of) an amount. If needed,
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.