@umituz/react-native-design-system 2.8.7 → 2.8.8

package/src/storage/presentation/hooks/__tests__/useStorageState.test.ts

@@ -0,0 +1,293 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * useStorageState Hook Tests
+ *
+ * Unit tests for useStorageState hook
+ */
+
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useStorageState } from '../useStorageState';
+import { AsyncStorage } from '../../__tests__/mocks/asyncStorage.mock';
+
+describe('useStorageState Hook', () => {
+  beforeEach(() => {
+    (AsyncStorage as any).__clear();
+    jest.clearAllMocks();
+  });
+
+  describe('Initial Load', () => {
+    it('should load initial value from storage', async () => {
+      const key = 'test-key';
+      const defaultValue = 'default';
+      const storedValue = 'stored-value';
+
+      await AsyncStorage.setItem(key, JSON.stringify(storedValue));
+
+      const { result, waitForNextUpdate } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      // Initial state
+      expect(result.current[0]).toBe(defaultValue);
+      expect(result.current[2]).toBe(true); // isLoading
+
+      // Wait for load
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      expect(result.current[0]).toBe(storedValue);
+      expect(result.current[2]).toBe(false); // isLoading
+    });
+
+    it('should use default value for missing key', async () => {
+      const key = 'missing-key';
+      const defaultValue = 'default';
+
+      const { result, waitForNextUpdate } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      expect(result.current[0]).toBe(defaultValue);
+      expect(result.current[2]).toBe(false);
+    });
+
+    it('should handle StorageKey enum', async () => {
+      const key = '@ui_preferences';
+      const defaultValue = 'default';
+      const storedValue = 'stored-value';
+
+      await AsyncStorage.setItem(key, JSON.stringify(storedValue));
+
+      const { result, waitForNextUpdate } = renderHook(() => 
+        useStorageState(key as any, defaultValue)
+      );
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      expect(result.current[0]).toBe(storedValue);
+    });
+  });
+
+  describe('Update State', () => {
+    it('should update state and persist to storage', async () => {
+      const key = 'test-key';
+      const defaultValue = 'default';
+      const newValue = 'new-value';
+
+      const { result, waitForNextUpdate } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      // Update state
+      await act(async () => {
+        await result.current[1](newValue);
+      });
+
+      expect(result.current[0]).toBe(newValue);
+
+      // Verify storage
+      const stored = await AsyncStorage.getItem(key);
+      expect(JSON.parse(stored!)).toBe(newValue);
+    });
+
+    it('should handle update during loading', async () => {
+      const key = 'test-key';
+      const defaultValue = 'default';
+      const newValue = 'new-value';
+
+      // Mock slow storage
+      let resolveStorage: (value: string) => void;
+      (AsyncStorage.getItem as jest.Mock).mockImplementation(() => 
+        new Promise(resolve => {
+          resolveStorage = resolve;
+        })
+      );
+
+      const { result } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      // Update while loading
+      await act(async () => {
+        await result.current[1](newValue);
+      });
+
+      expect(result.current[0]).toBe(newValue);
+    });
+  });
+
+  describe('Memory Leak Prevention', () => {
+    it('should cleanup on unmount', async () => {
+      const key = 'test-key';
+      const defaultValue = 'default';
+
+      // Mock slow storage
+      let resolveStorage: (value: string) => void;
+      (AsyncStorage.getItem as jest.Mock).mockImplementation(() => 
+        new Promise(resolve => {
+          resolveStorage = resolve;
+        })
+      );
+
+      const { result, unmount } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      // Unmount before load completes
+      unmount();
+
+      // Resolve storage after unmount
+      await act(async () => {
+        resolveStorage!('stored-value');
+      });
+
+      // State should not be updated after unmount
+      expect(result.current[0]).toBe(defaultValue);
+    });
+
+    it('should handle unmount during update', async () => {
+      const key = 'test-key';
+      const defaultValue = 'default';
+      const newValue = 'new-value';
+
+      // Mock slow storage
+      let resolveStorage: () => void;
+      (AsyncStorage.setItem as jest.Mock).mockImplementation(() => 
+        new Promise(resolve => {
+          resolveStorage = resolve;
+        })
+      );
+
+      const { result, unmount } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      // Start update
+      const updatePromise = act(async () => {
+        await result.current[1](newValue);
+      });
+
+      // Unmount before update completes
+      unmount();
+
+      // Complete update
+      await act(async () => {
+        resolveStorage!();
+      });
+
+      await updatePromise;
+    });
+  });
+
+  describe('Performance', () => {
+    it('should not re-run effect when defaultValue changes', async () => {
+      const key = 'test-key';
+      const defaultValue1 = 'default1';
+      const defaultValue2 = 'default2';
+
+      await AsyncStorage.setItem(key, JSON.stringify('stored-value'));
+
+      const { result, rerender, waitForNextUpdate } = renderHook(
+        ({ defaultValue }) => useStorageState(key, defaultValue),
+        { initialProps: { defaultValue: defaultValue1 } }
+      );
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      const getItemCalls = (AsyncStorage.getItem as jest.Mock).mock.calls.length;
+
+      // Rerender with different default value
+      rerender({ defaultValue: defaultValue2 });
+
+      // Should not trigger another storage read
+      expect((AsyncStorage.getItem as jest.Mock).mock.calls.length).toBe(getItemCalls);
+    });
+
+    it('should re-run effect when key changes', async () => {
+      const key1 = 'key1';
+      const key2 = 'key2';
+      const defaultValue = 'default';
+
+      await AsyncStorage.setItem(key1, JSON.stringify('value1'));
+      await AsyncStorage.setItem(key2, JSON.stringify('value2'));
+
+      const { result, rerender, waitForNextUpdate } = renderHook(
+        ({ key }) => useStorageState(key, defaultValue),
+        { initialProps: { key: key1 } }
+      );
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      expect(result.current[0]).toBe('value1');
+
+      // Change key
+      rerender({ key: key2 });
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      expect(result.current[0]).toBe('value2');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle storage read error', async () => {
+      const key = 'test-key';
+      const defaultValue = 'default';
+
+      // Mock storage error
+      (AsyncStorage.getItem as jest.Mock).mockRejectedValue(new Error('Storage error'));
+
+      const { result, waitForNextUpdate } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      expect(result.current[0]).toBe(defaultValue);
+      expect(result.current[2]).toBe(false); // isLoading should be false
+    });
+
+    it('should handle storage write error', async () => {
+      const key = 'test-key';
+      const defaultValue = 'default';
+      const newValue = 'new-value';
+
+      // Mock storage error
+      (AsyncStorage.setItem as jest.Mock).mockRejectedValue(new Error('Storage error'));
+
+      const { result, waitForNextUpdate } = renderHook(() => 
+        useStorageState(key, defaultValue)
+      );
+
+      await act(async () => {
+        await waitForNextUpdate();
+      });
+
+      // State should still update even if storage fails
+      await act(async () => {
+        await result.current[1](newValue);
+      });
+
+      expect(result.current[0]).toBe(newValue);
+    });
+  });
+});

package/src/storage/presentation/hooks/useCacheState.ts

@@ -0,0 +1,53 @@
+/**
+ * Cache State Manager
+ *
+ * Manages cache state following Single Responsibility Principle
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+
+export interface CacheState<T> {
+  data: T | null;
+  isLoading: boolean;
+  isExpired: boolean;
+}
+
+export interface CacheActions<T> {
+  setData: (value: T) => void;
+  clearData: () => void;
+  setLoading: (loading: boolean) => void;
+  setExpired: (expired: boolean) => void;
+}
+
+/**
+ * Hook for managing cache state
+ */
+export function useCacheState<T>(): [CacheState<T>, CacheActions<T>] {
+  const [data, setDataState] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isExpired, setIsExpired] = useState(false);
+
+  const setData = useCallback((value: T) => {
+    setDataState(value);
+    setIsExpired(false);
+  }, []);
+
+  const clearData = useCallback(() => {
+    setDataState(null);
+    setIsExpired(true);
+  }, []);
+
+  const setLoading = useCallback((loading: boolean) => {
+    setIsLoading(loading);
+  }, []);
+
+  const setExpired = useCallback((expired: boolean) => {
+    setIsExpired(expired);
+  }, []);
+
+  // Memoize state and actions objects for performance
+  const state: CacheState<T> = useMemo(() => ({ data, isLoading, isExpired }), [data, isLoading, isExpired]);
+  const actions: CacheActions<T> = useMemo(() => ({ setData, clearData, setLoading, setExpired }), [setData, clearData, setLoading, setExpired]);
+
+  return [state, actions];
+}

package/src/storage/presentation/hooks/usePersistentCache.ts

@@ -0,0 +1,154 @@
+/**
+ * usePersistentCache Hook
+ * Presentation layer - Hook for persistent caching with TTL
+ *
+ * General-purpose cache hook for any app
+ */
+
+import { useEffect, useCallback, useMemo } from 'react';
+import { useCacheState } from './useCacheState';
+import { CacheStorageOperations } from './CacheStorageOperations';
+import { isCacheExpired } from '../../domain/entities/CachedValue';
+import { DEFAULT_TTL } from '../../domain/constants/CacheDefaults';
+
+/**
+ * Options for persistent cache
+ */
+export interface PersistentCacheOptions {
+  /**
+   * Time-to-live in milliseconds
+   * @default DEFAULT_TTL.MEDIUM (30 minutes)
+   */
+  ttl?: number;
+
+  /**
+   * Cache version for invalidation
+   * Increment to invalidate existing caches
+   */
+  version?: number;
+
+  /**
+   * Whether cache is enabled
+   * @default true
+   */
+  enabled?: boolean;
+}
+
+/**
+ * Result from usePersistentCache hook
+ */
+export interface PersistentCacheResult<T> {
+  /**
+   * Cached data (null if not loaded or expired)
+   */
+  data: T | null;
+
+  /**
+   * Whether data is being loaded from storage
+   */
+  isLoading: boolean;
+
+  /**
+   * Whether cached data is expired
+   */
+  isExpired: boolean;
+
+  /**
+   * Set data to cache
+   */
+  setData: (value: T) => Promise<void>;
+
+  /**
+   * Clear cached data
+   */
+  clearData: () => Promise<void>;
+
+  /**
+   * Refresh cache (reload from storage)
+   */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Hook for persistent caching with TTL support
+ *
+ * @example
+ * ```typescript
+ * const { data, setData, isExpired } = usePersistentCache<Post[]>('posts-page-1', {
+ *   ttl: TIME_MS.HOUR,
+ *   version: 1,
+ * });
+ *
+ * // Check if need to fetch
+ * if (!data || isExpired) {
+ *   const freshData = await fetchPosts();
+ *   await setData(freshData);
+ * }
+ * ```
+ */
+export function usePersistentCache<T>(
+  key: string,
+  options: PersistentCacheOptions = {},
+): PersistentCacheResult<T> {
+  const { ttl = DEFAULT_TTL.MEDIUM, version, enabled = true } = options;
+  const [state, actions] = useCacheState<T>();
+  
+  // Use singleton pattern to prevent memory leaks
+  const cacheOps = useMemo(() => CacheStorageOperations.getInstance(), []);
+
+  const loadFromStorage = useCallback(async () => {
+    if (!enabled) {
+      actions.setLoading(false);
+      return;
+    }
+
+    actions.setLoading(true);
+
+    try {
+      const cached = await cacheOps.loadFromStorage<T>(key);
+
+      if (cached) {
+        const expired = isCacheExpired(cached, version);
+        actions.setData(cached.value);
+        actions.setExpired(expired);
+      } else {
+        actions.clearData();
+      }
+    } catch {
+      actions.clearData();
+    } finally {
+      actions.setLoading(false);
+    }
+  }, [key, version, enabled, actions, cacheOps]);
+
+  const setData = useCallback(
+    async (value: T) => {
+      await cacheOps.saveToStorage(key, value, { ttl, version, enabled });
+      actions.setData(value);
+    },
+    [key, ttl, version, enabled, actions, cacheOps],
+  );
+
+  const clearData = useCallback(async () => {
+    await cacheOps.clearFromStorage(key, enabled);
+    actions.clearData();
+  }, [key, enabled, actions, cacheOps]);
+
+  const refresh = useCallback(async () => {
+    await loadFromStorage();
+  }, [loadFromStorage]);
+
+  // Prevent infinite loops by only running when key or enabled changes
+  useEffect(() => {
+    loadFromStorage();
+  }, [key, enabled]);
+
+  return {
+    data: state.data,
+    isLoading: state.isLoading,
+    isExpired: state.isExpired,
+    setData,
+    clearData,
+    refresh,
+  };
+}

package/src/storage/presentation/hooks/useStorage.ts

@@ -0,0 +1,102 @@
+/**
+ * useStorage Hook
+ *
+ * Domain-Driven Design: Presentation layer hook for storage operations
+ * Provides clean API for components to interact with storage domain
+ */
+
+import { useCallback, useMemo } from 'react';
+import { storageRepository } from '../../infrastructure/repositories/AsyncStorageRepository';
+import type { StorageResult } from '../../domain/entities/StorageResult';
+import { unwrap } from '../../domain/entities/StorageResult';
+import type { StorageKey } from '../../domain/value-objects/StorageKey';
+
+/**
+ * Storage Hook
+ * Provides type-safe storage operations
+ */
+export const useStorage = () => {
+  /**
+   * Get item from storage
+   */
+  const getItem = useCallback(async <T>(key: string | StorageKey, defaultValue: T): Promise<T> => {
+    const keyString = typeof key === 'string' ? key : String(key);
+    const result = await storageRepository.getItem(keyString, defaultValue);
+    return unwrap(result, defaultValue);
+  }, []);
+
+  /**
+   * Set item in storage
+   */
+  const setItem = useCallback(async <T>(key: string | StorageKey, value: T): Promise<boolean> => {
+    const keyString = typeof key === 'string' ? key : String(key);
+    const result = await storageRepository.setItem(keyString, value);
+    return result.success;
+  }, []);
+
+  /**
+   * Get string from storage
+   */
+  const getString = useCallback(async (key: string | StorageKey, defaultValue: string): Promise<string> => {
+    const keyString = typeof key === 'string' ? key : String(key);
+    const result = await storageRepository.getString(keyString, defaultValue);
+    return unwrap(result, defaultValue);
+  }, []);
+
+  /**
+   * Set string in storage
+   */
+  const setString = useCallback(async (key: string | StorageKey, value: string): Promise<boolean> => {
+    const keyString = typeof key === 'string' ? key : String(key);
+    const result = await storageRepository.setString(keyString, value);
+    return result.success;
+  }, []);
+
+  /**
+   * Remove item from storage
+   */
+  const removeItem = useCallback(async (key: string | StorageKey): Promise<boolean> => {
+    const keyString = typeof key === 'string' ? key : String(key);
+    const result = await storageRepository.removeItem(keyString);
+    return result.success;
+  }, []);
+
+  /**
+   * Check if item exists
+   */
+  const hasItem = useCallback(async (key: string | StorageKey): Promise<boolean> => {
+    const keyString = typeof key === 'string' ? key : String(key);
+    return storageRepository.hasItem(keyString);
+  }, []);
+
+  /**
+   * Clear all storage
+   */
+  const clearAll = useCallback(async (): Promise<boolean> => {
+    const result = await storageRepository.clearAll();
+    return result.success;
+  }, []);
+
+  /**
+   * Get item with full result (success/error)
+   */
+  const getItemWithResult = useCallback(async <T>(
+    key: string | StorageKey,
+    defaultValue: T
+  ): Promise<StorageResult<T>> => {
+    const keyString = typeof key === 'string' ? key : String(key);
+    return storageRepository.getItem(keyString, defaultValue);
+  }, []);
+
+  // Memoize return object to prevent unnecessary re-renders
+  return useMemo(() => ({
+    getItem,
+    setItem,
+    getString,
+    setString,
+    removeItem,
+    hasItem,
+    clearAll,
+    getItemWithResult,
+  }), [getItem, setItem, getString, setString, removeItem, hasItem, clearAll, getItemWithResult]);
+};

package/src/storage/presentation/hooks/useStorageState.ts

@@ -0,0 +1,71 @@
+/**
+ * useStorageState Hook
+ *
+ * Domain-Driven Design: Presentation layer hook for state + storage sync
+ * Combines React state with automatic storage persistence
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { storageRepository } from '../../infrastructure/repositories/AsyncStorageRepository';
+import { unwrap } from '../../domain/entities/StorageResult';
+import type { StorageKey } from '../../domain/value-objects/StorageKey';
+
+/**
+ * Storage State Hook
+ * Syncs React state with AsyncStorage automatically
+ *
+ * @example
+ * ```typescript
+ * const [settings, setSettings] = useStorageState('user_settings', { theme: 'light' });
+ * // State is automatically persisted to storage
+ * ```
+ */
+export const useStorageState = <T>(
+  key: string | StorageKey,
+  defaultValue: T
+): [T, (value: T) => Promise<void>, boolean] => {
+  const keyString = typeof key === 'string' ? key : String(key);
+  const [state, setState] = useState<T>(defaultValue);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load initial value from storage
+  useEffect(() => {
+    let isMounted = true;
+    
+    const loadFromStorage = async () => {
+      try {
+        const result = await storageRepository.getItem(keyString, defaultValue);
+        const value = unwrap(result, defaultValue);
+        
+        // Memory leak önlemek için component mount kontrolü
+        if (isMounted) {
+          setState(value);
+          setIsLoading(false);
+        }
+      } catch {
+        // Hata durumunda bile cleanup yap
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadFromStorage();
+
+    // Cleanup function
+    return () => {
+      isMounted = false;
+    };
+  }, [keyString]); // defaultValue'ı dependency array'den çıkar
+
+  // Update state and persist to storage
+  const updateState = useCallback(
+    async (value: T) => {
+      setState(value);
+      await storageRepository.setItem(keyString, value);
+    },
+    [keyString]
+  );
+
+  return [state, updateState, isLoading];
+};

package/src/storage/presentation/hooks/useStore.ts

@@ -0,0 +1,15 @@
+/**
+ * useStore Hook
+ * Helper for creating stores in components
+ */
+
+import { useMemo } from 'react';
+import { createStore } from '../../domain/factories/StoreFactory';
+import type { StoreConfig } from '../../domain/types/Store';
+
+export function useStore<T extends object>(config: StoreConfig<T>) {
+  // Config objesini stabilize et ki sonsuz re-render olmasın
+  const stableConfig = useMemo(() => config, [config.name, JSON.stringify(config)]);
+  const store = useMemo(() => createStore(stableConfig), [stableConfig]);
+  return store;
+}