[taler-wallet-core] 18/19: feature: useLocalStorage also update when the localStorage has been updated from other window

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository wallet-core.

commit 1c6369677ab272196da314d95825273c6fff8d5f
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Dec 7 15:44:43 2022 -0300

    feature: useLocalStorage also update when the localStorage has been updated 
from other window
---
 packages/web-util/src/hooks/useLocalStorage.ts | 30 +++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/web-util/src/hooks/useLocalStorage.ts 
b/packages/web-util/src/hooks/useLocalStorage.ts
index ed5b491f2..25df9dfcd 100644
--- a/packages/web-util/src/hooks/useLocalStorage.ts
+++ b/packages/web-util/src/hooks/useLocalStorage.ts
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { StateUpdater, useState } from "preact/hooks";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
 
 export function useLocalStorage(
   key: string,
@@ -33,6 +33,16 @@ export function useLocalStorage(
     },
   );
 
+  useEffect(() => {
+    const listener = buildListenerForKey(key, (newValue) => {
+      setStoredValue(newValue ?? initialValue)
+    })
+    window.addEventListener('storage', listener)
+    return () => {
+      window.removeEventListener('storage', listener)
+    }
+  }, [])
+
   const setValue = (
     value?: string | ((val?: string) => string | undefined),
   ): void => {
@@ -52,6 +62,13 @@ export function useLocalStorage(
   return [storedValue, setValue];
 }
 
+function buildListenerForKey(key: string, onUpdate: (newValue: string | 
undefined) => void): () => void {
+  return function listenKeyChange() {
+    const value = window.localStorage.getItem(key)
+    onUpdate(value ?? undefined)
+  }
+}
+
 //TODO: merge with the above function
 export function useNotNullLocalStorage(
   key: string,
@@ -63,6 +80,17 @@ export function useNotNullLocalStorage(
       : initialValue;
   });
 
+
+  useEffect(() => {
+    const listener = buildListenerForKey(key, (newValue) => {
+      setStoredValue(newValue ?? initialValue)
+    })
+    window.localStorage.addEventListener('storage', listener)
+    return () => {
+      window.localStorage.removeEventListener('storage', listener)
+    }
+  })
+
   const setValue = (value: string | ((val: string) => string)): void => {
     const valueToStore = value instanceof Function ? value(storedValue) : 
value;
     setStoredValue(valueToStore);

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.