@planningcenter/chat-react-native 3.21.2-rc.3 → 3.21.2-rc.5

package/src/hooks/use_storage.ts

@@ -0,0 +1,69 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { noop } from 'lodash'
+import { useCallback } from 'react'
+import { StorageAdapter } from '../utils/native_adapters'
+
+const cacheKeyGenerator = (key: string) => [`StorageResource:${key}`]
+
+type SetValue<TCacheData> = (_itemValue?: TCacheData | null) => Promise<any>
+
+/**
+ * Hook for using a storage adapter with React Query caching.
+ * Similar to useAsyncStorage but accepts a StorageAdapter instead of using AsyncStorage directly.
+ */
+export function useStorage<TCacheData>(
+  storage: StorageAdapter,
+  key: string,
+  initialValue: TCacheData,
+  throwOnError: boolean = false
+): [TCacheData, SetValue<TCacheData>] {
+  const cacheKey = cacheKeyGenerator(key)
+
+  const { data: value, refetch } = useSuspenseQuery<TCacheData>({
+    queryKey: cacheKey,
+    queryFn: () =>
+      storage
+        .getItem(key)
+        .then(storedValue => {
+          if (!storedValue) return initialValue
+
+          try {
+            return JSON.parse(storedValue)
+          } catch {
+            return storedValue
+          }
+        })
+        .catch(e => {
+          if (!throwOnError) return initialValue
+
+          return Promise.reject(e)
+        }),
+  })
+
+  const setValue: SetValue<TCacheData> = useCallback(
+    itemValue => {
+      if (itemValue === null || itemValue === undefined) {
+        return storage
+          .removeItem(key)
+          .then(() => {
+            refetch()
+          })
+          .catch(noop)
+      }
+
+      return storage
+        .setItem(key, JSON.stringify(itemValue))
+        .then(() => {
+          refetch()
+        })
+        .catch(e => {
+          if (!throwOnError) return
+
+          return Promise.reject(e)
+        })
+    },
+    [throwOnError, key, refetch, storage]
+  )
+
+  return [value || initialValue, setValue]
+}

package/src/utils/native_adapters/configuration.ts

@@ -6,6 +6,8 @@ import { VideoAdapter } from './video'
 import { Linking as RNLinking } from 'react-native'
 import { LinkingAdapter } from './linking'
 import { HapticAdapter } from './haptic'
+import { StorageAdapter } from './storage_adapter'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 type ChatConfigurations = {
   clipboard: ClipboardAdapter
@@ -74,3 +76,9 @@ export let Log: LogAdapter = new LogAdapter()
 export let Linking: LinkingAdapter = new LinkingAdapter(RNLinking)
 
 export let Haptic: HapticAdapter = new HapticAdapter()
+
+export let Storage = new StorageAdapter({
+  getItem: AsyncStorage.getItem,
+  setItem: AsyncStorage.setItem,
+  removeItem: AsyncStorage.removeItem,
+})

package/src/utils/native_adapters/index.ts

@@ -6,3 +6,4 @@ export * from './linking'
 export * from './log'
 export * from './video'
 export * from './haptic'
+export * from './storage_adapter'

package/src/utils/native_adapters/storage_adapter.ts

@@ -0,0 +1,23 @@
+/**
+ * Storage adapter interface for abstracting storage implementations.
+ * Allows apps to use different storage backends (AsyncStorage, expo-secure-store, etc.)
+ * without requiring those dependencies in the shared package.
+ */
+
+export type StorageAdapterMethods = {
+  getItem: (key: string) => Promise<string | null>
+  setItem: (key: string, value: string) => Promise<void>
+  removeItem: (key: string) => Promise<void>
+}
+
+export class StorageAdapter {
+  getItem: (key: string) => Promise<string | null>
+  setItem: (key: string, value: string) => Promise<void>
+  removeItem: (key: string) => Promise<void>
+
+  constructor(methods: StorageAdapterMethods) {
+    this.getItem = methods.getItem
+    this.setItem = methods.setItem
+    this.removeItem = methods.removeItem
+  }
+}