From 64e3705669e7c12b8013704654f17cf8eaf659d4 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 25 May 2023 18:08:20 -0300 Subject: cases, account details and new-form screen --- packages/web-util/src/hooks/useLang.ts | 4 +- packages/web-util/src/hooks/useLocalStorage.ts | 64 +++++++++++++++++++------- 2 files changed, 49 insertions(+), 19 deletions(-) (limited to 'packages/web-util') diff --git a/packages/web-util/src/hooks/useLang.ts b/packages/web-util/src/hooks/useLang.ts index 9888cc51a..d64cf6e1a 100644 --- a/packages/web-util/src/hooks/useLang.ts +++ b/packages/web-util/src/hooks/useLang.ts @@ -24,6 +24,6 @@ function getBrowserLang(): string | undefined { } export function useLang(initial?: string): Required { - const defaultLang = (getBrowserLang() || initial || "en").substring(0, 2); - return useLocalStorage("lang-preference", defaultLang); + const defaultValue = (getBrowserLang() || initial || "en").substring(0, 2); + return useLocalStorage("lang-preference", { defaultValue: defaultValue }); } diff --git a/packages/web-util/src/hooks/useLocalStorage.ts b/packages/web-util/src/hooks/useLocalStorage.ts index 131825736..55efd01cb 100644 --- a/packages/web-util/src/hooks/useLocalStorage.ts +++ b/packages/web-util/src/hooks/useLocalStorage.ts @@ -19,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { Codec } from "@gnu-taler/taler-util"; import { useEffect, useState } from "preact/hooks"; import { ObservableMap, @@ -27,9 +28,9 @@ import { memoryMap, } from "../utils/observable.js"; -export interface LocalStorageState { - value?: string; - update: (s: string) => void; +export interface LocalStorageState { + value?: Type; + update: (s: Type) => void; reset: () => void; } @@ -47,33 +48,62 @@ const storage: ObservableMap = (function buildStorage() { } })(); -export function useLocalStorage( +//with initial value +export function useLocalStorage( key: string, - initialValue: string, -): Required; -export function useLocalStorage(key: string): LocalStorageState; -export function useLocalStorage( + options?: { + defaultValue: Type; + codec?: Codec; + }, +): Required>; +//without initial value +export function useLocalStorage( key: string, - initialValue?: string, -): LocalStorageState { - const [storedValue, setStoredValue] = useState( - (): string | undefined => { - return storage.get(key) ?? initialValue; + options?: { + codec?: Codec; + }, +): LocalStorageState; +// impl +export function useLocalStorage( + key: string, + options?: { + defaultValue?: Type; + codec?: Codec; + }, +): LocalStorageState { + function convert(updated: string | undefined): Type | undefined { + if (updated === undefined) return options?.defaultValue; //optional + try { + return !options?.codec + ? (updated as Type) + : options.codec.decode(JSON.parse(updated)); + } catch (e) { + //decode error + return options?.defaultValue; + } + } + const [storedValue, setStoredValue] = useState( + (): Type | undefined => { + const prev = storage.get(key); + return convert(prev); }, ); useEffect(() => { return storage.onUpdate(key, () => { const newValue = storage.get(key); - setStoredValue(newValue ?? initialValue); + setStoredValue(convert(newValue)); }); }, []); - const setValue = (value?: string): void => { + const setValue = (value?: Type): void => { if (value === undefined) { storage.delete(key); } else { - storage.set(key, value); + storage.set( + key, + options?.codec ? JSON.stringify(value) : (value as string), + ); } }; @@ -81,7 +111,7 @@ export function useLocalStorage( value: storedValue, update: setValue, reset: () => { - setValue(initialValue); + setValue(options?.defaultValue); }, }; } -- cgit v1.2.3