From 5ea22a325c069fe497b2dc8a73d4de69fd8cc27b Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 14 Apr 2023 14:07:15 -0300 Subject: using new localStorage api, pageState => settings, notifcation using observer api --- 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 +++++++++++++++++++++++ 4 files changed, 115 insertions(+), 30 deletions(-) create mode 100644 packages/demobank-ui/src/hooks/notification.ts create mode 100644 packages/demobank-ui/src/hooks/settings.ts (limited to 'packages/demobank-ui/src/hooks') 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 | ((p: T) => T); const calculateRootPath = () => { @@ -37,38 +34,23 @@ const calculateRootPath = () => { export function useBackendURL( url?: string, ): [string, boolean, StateUpdater, () => 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) => { 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, -] { - return useLocalStorage("backend-token"); -} - -export function useBackendInstanceToken( - id: string, -): [string | undefined, StateUpdater] { - 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(); +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, +] { + const [value, setter] = useState(); + 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 + */ + +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(str: string | undefined): T | undefined { + if (str === undefined) return undefined; + try { + return JSON.parse(str); + } catch { + return undefined; + } +} + +export function useSettings(): [ + Readonly, + (key: T, value: Settings[T]) => void, +] { + const { value, update } = useLocalStorage("demobank-settings"); + + const parsed: Settings = parse_json_or_undefined(value) ?? defaultSettings; + function updateField(k: T, v: Settings[T]) { + const newValue = { ...parsed, [k]: v }; + const json = JSON.stringify(newValue); + update(json); + } + return [parsed, updateField]; +} -- cgit v1.2.3