From 1c6369677ab272196da314d95825273c6fff8d5f Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 7 Dec 2022 15:44:43 -0300
Subject: 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(-)

(limited to 'packages/web-util')

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);
-- 
cgit v1.2.3