Fix localStorage Provider

Author: MrFlashAccount

app/gui/src/dashboard/providers/LocalStorageProvider.tsx

@@ -7,6 +7,7 @@ import * as React from 'react'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 
 import LocalStorage, { type LocalStorageData, type LocalStorageKey } from '#/utilities/LocalStorage'
+import { use } from 'react'
 
 /** State contained in a `LocalStorageContext`. */
 export interface LocalStorageContextType {
@@ -18,12 +19,21 @@ const LocalStorageContext = React.createContext<LocalStorageContextType>({
 })
 
 /** Props for a {@link LocalStorageProvider}. */
-export type LocalStorageProviderProps = Readonly<React.PropsWithChildren>
+export type LocalStorageProviderProps = Readonly<React.PropsWithChildren> & {
+  readonly localStorage?: LocalStorage | undefined
+}
 
 /** A React Provider that lets components get the shortcut registry. */
 export default function LocalStorageProvider(props: LocalStorageProviderProps) {
-  const { children } = props
-  return <>{children}</>
+  const { children, localStorage } = props
+
+  const finalLocalStorage = localStorage ?? use(LocalStorageContext).localStorage
+
+  return (
+    <LocalStorageContext.Provider value={{ localStorage: finalLocalStorage }}>
+      {children}
+    </LocalStorageContext.Provider>
+  )
 }
 
 /** Exposes a property to get the shortcut registry. */
@@ -68,10 +78,9 @@ export function useLocalStorageState<K extends LocalStorageKey>(
   const { localStorage } = useLocalStorage()
   const { sanitize } = options
 
-  const id = React.useId()
-
   const [value, privateSetValue] = React.useState<LocalStorageData[K] | undefined>(() => {
     let savedValue: LocalStorageData[K] | undefined = localStorage.get(key)
+
     if (savedValue !== undefined && sanitize) {
       savedValue = sanitize(savedValue)
     }
@@ -85,32 +94,43 @@ export function useLocalStorageState<K extends LocalStorageKey>(
 
   const setValue = useEventCallback(
     (newValue: React.SetStateAction<LocalStorageData[K] | undefined>) => {
-      console.trace('setValue', key, newValue)
+      let nextValue: LocalStorageData[K] | undefined = value
+
+      privateSetValue((currentValue) => {
+        nextValue = typeof newValue === 'function' ? newValue(currentValue) : newValue
+        return nextValue
+      })
+
+      // We strictly must update the localStorage value here, because the
+      // subscription will trigger (because it triggers since the subscription
+      // is created in the `useEffect` below) an update with the old value in
+      // state. And this potentially could cause the unintended side effect.
+      if (nextValue === undefined) {
+        localStorage.delete(key)
+      } else {
+        localStorage.set(key, nextValue)
+      }
+    },
+  )
+
+  const updateValueOnLocalStorageChange = useEventCallback(
+    (newValue: LocalStorageData[K] | undefined) => {
+      const nextValue = newValue ?? defaultValue
+
       privateSetValue((currentValue) => {
-        console.log('privateSetValue', {
-          currentValue,
-          newValue,
-        })
-        const nextValue = typeof newValue === 'function' ? newValue(currentValue) : newValue
-
-        if (nextValue === undefined) {
-          localStorage.delete(key)
-        } else {
-          localStorage.set(key, nextValue)
+        if (currentValue === nextValue) {
+          return currentValue
         }
 
         return nextValue
       })
     },
   )
 
-  React.useEffect(() => {
-    localStorage.lock(key, id)
-
-    return () => {
-      localStorage.unlock(key, id)
-    }
-  }, [key, localStorage, id])
+  React.useEffect(
+    () => localStorage.subscribe(key, updateValueOnLocalStorageChange),
+    [key, localStorage, updateValueOnLocalStorageChange],
+  )
 
   return [value, setValue]
 }