eventemitter3

src/components/PolicyUpdateOverlay/usePolicyUpdateState.ts

@@ -22,7 +22,7 @@ export function usePolicyUpdateState({
 }) {
   const nux = useNux(ACTIVE_UPDATE_ID)
   const {mutate: save, variables} = useSaveNux()
-  const deviceStorage = useStorage(device, [ACTIVE_UPDATE_ID])
+  const deviceStorage = useStorage(device, [ACTIVE_UPDATE_ID], 'usePolicyUpdateState')
   const debugOverride =
     !!useStorage(device, ['policyUpdateDebugOverride'])[0] && IS_DEV
 

src/storage/index.ts

@@ -1,7 +1,9 @@
-import {useCallback, useEffect, useState} from 'react'
+import {useCallback, useEffect, useState, useRef, useId} from 'react'
 import {MMKV} from 'react-native-mmkv'
+import EventEmitter from 'eventemitter3'
 
 import {type Account, type Device} from '#/storage/schema'
+import {logger} from '#/components/PolicyUpdateOverlay/logger'
 
 export * from '#/storage/schema'
 
@@ -13,6 +15,8 @@ export class Storage<Scopes extends unknown[], Schema> {
   protected sep = ':'
   protected store: MMKV
 
+  protected events = new EventEmitter()
+
   constructor({id}: {id: string}) {
     this.store = new MMKV({id})
   }
@@ -29,6 +33,7 @@ export class Storage<Scopes extends unknown[], Schema> {
   ): void {
     // stored as `{ data: <value> }` structure to ease stringification
     this.store.set(scopes.join(this.sep), JSON.stringify({data}))
+    this.events.emit('change', scopes.join(this.sep))
   }
 
   /**
@@ -54,6 +59,7 @@ export class Storage<Scopes extends unknown[], Schema> {
    */
   remove<Key extends keyof Schema>(scopes: [...Scopes, Key]) {
     this.store.delete(scopes.join(this.sep))
+    this.events.emit('change', scopes.join(this.sep))
   }
 
   /**
@@ -82,11 +88,20 @@ export class Storage<Scopes extends unknown[], Schema> {
     scopes: [...Scopes, Key],
     callback: () => void,
   ) {
-    return this.store.addOnValueChangedListener(key => {
+    const handler = (key: string) => {
       if (key === scopes.join(this.sep)) {
         callback()
       }
-    })
+    }
+    this.events.on('change', handler)
+    return () => {
+      this.events.off('change', handler)
+    }
+    // return this.store.addOnValueChangedListener(key => {
+    //   if (key === scopes.join(this.sep)) {
+    //     callback()
+    //   }
+    // })
   }
 }
 
@@ -105,20 +120,52 @@ export function useStorage<
 >(
   storage: Store,
   scopes: [...StorageScopes<Store>, Key],
+  debug?: string
 ): [
   StorageSchema<Store>[Key] | undefined,
   (data: StorageSchema<Store>[Key]) => void,
 ] {
   type Schema = StorageSchema<Store>
-  const [value, setValue] = useState<Schema[Key] | undefined>(() =>
-    storage.get(scopes),
-  )
+  const id = useId()
+
+  if (debug) {
+    debug = `${debug} - ${id}`
+  }
+
+  const initialized = useRef(false)
+  const [value, setValue] = useState<Schema[Key] | undefined>(() => {
+    if (debug) logger.debug(`${debug} - init`, {
+      value: storage.get(scopes) ?? 'unset'
+    })
+    return storage.get(scopes)
+  })
+
+  // useEffect(() => {
+  //   if (!initialized.current) {
+  //     const raw = storage.get(scopes)
+  //     if (value !== raw) {
+  //       logger.debug(`${debug} - syncing initial`, {
+  //         value: value ?? 'unset',
+  //         raw: raw ?? 'unset',
+  //       })
+  //       setValue(raw)
+  //     }
+  //     initialized.current = true
+  //   }
+  // }, [value, scopes])
 
   useEffect(() => {
+    if (debug) logger.debug(`${debug} - subscribe`)
     const sub = storage.addOnValueChangedListener(scopes, () => {
+      if (debug) logger.debug(`${debug} - storage change`, {
+        value: storage.get(scopes) ?? 'unset',
+      })
       setValue(storage.get(scopes))
     })
-    return () => sub.remove()
+    return () => {
+      if (debug) logger.debug(`${debug} - unsubscribe`)
+      sub()
+    }
   }, [storage, scopes])
 
   const setter = useCallback(
@@ -129,6 +176,11 @@ export function useStorage<
     [storage, scopes],
   )
 
+  if (debug) logger.debug(`${debug}`, {
+    value: value ?? 'unset',
+    raw: storage.get(scopes) ?? 'unset',
+  })
+
   return [value, setter] as const
 }