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

4 files changed, 115 insertions, 30 deletions

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];
+}