@oxyhq/services 5.16.1 → 5.16.2

package/src/ui/hooks/queries/useServicesQueries.ts

@@ -0,0 +1,121 @@
+import { useQuery } from '@tanstack/react-query';
+import type { ClientSession } from '../../../models/session';
+import { queryKeys } from './queryKeys';
+import { useOxy } from '../../context/OxyContext';
+import { fetchSessionsWithFallback, mapSessionsToClient } from '../../context/utils/sessionHelpers';
+
+/**
+ * Get all active sessions for the current user
+ */
+export const useSessions = (userId?: string, options?: { enabled?: boolean }) => {
+  const { oxyServices, activeSessionId } = useOxy();
+
+  return useQuery({
+    queryKey: queryKeys.sessions.list(userId),
+    queryFn: async () => {
+      if (!activeSessionId) {
+        throw new Error('No active session');
+      }
+      
+      const sessions = await fetchSessionsWithFallback(oxyServices, activeSessionId, {
+        fallbackDeviceId: undefined,
+        fallbackUserId: userId,
+      });
+      
+      return mapSessionsToClient(sessions, activeSessionId);
+    },
+    enabled: (options?.enabled !== false) && !!activeSessionId,
+    staleTime: 2 * 60 * 1000, // 2 minutes (sessions change frequently)
+    gcTime: 10 * 60 * 1000, // 10 minutes
+  });
+};
+
+/**
+ * Get specific session by ID
+ */
+export const useSession = (sessionId: string | null, options?: { enabled?: boolean }) => {
+  const { oxyServices } = useOxy();
+
+  return useQuery({
+    queryKey: queryKeys.sessions.detail(sessionId || ''),
+    queryFn: async () => {
+      if (!sessionId) {
+        throw new Error('Session ID is required');
+      }
+      
+      const validation = await oxyServices.validateSession(sessionId, { useHeaderValidation: true });
+      if (!validation?.valid || !validation.user) {
+        throw new Error('Session not found or invalid');
+      }
+
+      const now = new Date();
+      return {
+        sessionId,
+        deviceId: '', // Device ID not available from validation response
+        expiresAt: validation.expiresAt || new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000).toISOString(),
+        lastActive: validation.lastActivity || now.toISOString(),
+        userId: validation.user.id?.toString() ?? '',
+        isCurrent: false,
+      } as ClientSession;
+    },
+    enabled: (options?.enabled !== false) && !!sessionId,
+    staleTime: 2 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+/**
+ * Get device sessions for the current active session
+ */
+export const useDeviceSessions = (options?: { enabled?: boolean }) => {
+  const { oxyServices, activeSessionId } = useOxy();
+
+  return useQuery({
+    queryKey: queryKeys.sessions.active(),
+    queryFn: async () => {
+      if (!activeSessionId) {
+        throw new Error('No active session');
+      }
+      
+      return await oxyServices.getDeviceSessions(activeSessionId);
+    },
+    enabled: (options?.enabled !== false) && !!activeSessionId,
+    staleTime: 2 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+/**
+ * Get user devices
+ */
+export const useUserDevices = (options?: { enabled?: boolean }) => {
+  const { oxyServices, isAuthenticated } = useOxy();
+
+  return useQuery({
+    queryKey: queryKeys.devices.list(),
+    queryFn: async () => {
+      return await oxyServices.getUserDevices();
+    },
+    enabled: (options?.enabled !== false) && isAuthenticated,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 30 * 60 * 1000,
+  });
+};
+
+/**
+ * Get security information
+ */
+export const useSecurityInfo = (options?: { enabled?: boolean }) => {
+  const { oxyServices, isAuthenticated } = useOxy();
+
+  return useQuery({
+    queryKey: [...queryKeys.devices.all, 'security'],
+    queryFn: async () => {
+      return await oxyServices.getSecurityInfo();
+    },
+    enabled: (options?.enabled !== false) && isAuthenticated,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 30 * 60 * 1000,
+  });
+};
+

package/src/ui/hooks/queryClient.ts

@@ -0,0 +1,112 @@
+import { QueryClient } from '@tanstack/react-query';
+import type { StorageInterface } from '../utils/storageHelpers';
+
+const QUERY_CACHE_KEY = 'oxy_query_cache';
+const QUERY_CACHE_VERSION = '1';
+
+/**
+ * Custom persistence adapter for TanStack Query using our StorageInterface
+ */
+export const createPersistenceAdapter = (storage: StorageInterface) => {
+  return {
+    persistClient: async (client: any) => {
+      try {
+        const serialized = JSON.stringify({
+          clientState: client,
+          timestamp: Date.now(),
+          version: QUERY_CACHE_VERSION,
+        });
+        await storage.setItem(QUERY_CACHE_KEY, serialized);
+      } catch (error) {
+        if (__DEV__) {
+          console.warn('[QueryClient] Failed to persist cache:', error);
+        }
+      }
+    },
+    restoreClient: async () => {
+      try {
+        const cached = await storage.getItem(QUERY_CACHE_KEY);
+        if (!cached) return undefined;
+
+        const parsed = JSON.parse(cached);
+        
+        // Check version compatibility
+        if (parsed.version !== QUERY_CACHE_VERSION) {
+          // Clear old cache on version mismatch
+          await storage.removeItem(QUERY_CACHE_KEY);
+          return undefined;
+        }
+
+        // Check if cache is too old (30 days)
+        const maxAge = 30 * 24 * 60 * 60 * 1000;
+        if (parsed.timestamp && Date.now() - parsed.timestamp > maxAge) {
+          await storage.removeItem(QUERY_CACHE_KEY);
+          return undefined;
+        }
+
+        return parsed.clientState;
+      } catch (error) {
+        if (__DEV__) {
+          console.warn('[QueryClient] Failed to restore cache:', error);
+        }
+        return undefined;
+      }
+    },
+    removeClient: async () => {
+      try {
+        await storage.removeItem(QUERY_CACHE_KEY);
+      } catch (error) {
+        if (__DEV__) {
+          console.warn('[QueryClient] Failed to remove cache:', error);
+        }
+      }
+    },
+  };
+};
+
+/**
+ * Create a QueryClient with offline-first configuration
+ */
+export const createQueryClient = (storage?: StorageInterface | null): QueryClient => {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        // Data is fresh for 5 minutes
+        staleTime: 5 * 60 * 1000,
+        // Keep unused data in cache for 30 minutes
+        gcTime: 30 * 60 * 1000,
+        // Retry 3 times with exponential backoff
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+        // Refetch on reconnect
+        refetchOnReconnect: true,
+        // Don't refetch on window focus (better for mobile)
+        refetchOnWindowFocus: false,
+        // Offline-first: use cache when offline
+        networkMode: 'offlineFirst',
+      },
+      mutations: {
+        // Retry once for mutations
+        retry: 1,
+        // Offline-first: queue mutations when offline
+        networkMode: 'offlineFirst',
+      },
+    },
+  });
+
+  // Note: Persistence is handled by TanStack Query's built-in persistence
+  // For now, we rely on the query client's default behavior with networkMode: 'offlineFirst'
+  // The cache will be available in memory and queries will use cached data when offline
+  // Full persistence to AsyncStorage can be added later with @tanstack/react-query-persist-client if needed
+
+  return client;
+};
+
+/**
+ * Clear persisted query cache
+ */
+export const clearQueryCache = async (storage: StorageInterface): Promise<void> => {
+  const adapter = createPersistenceAdapter(storage);
+  await adapter.removeClient();
+};
+

package/src/ui/hooks/useIdentityMutations.ts

@@ -0,0 +1,115 @@
+/**
+ * TanStack Query mutations for identity operations
+ * Provides offline-first mutations for identity creation, import, and sync
+ * Never deletes identity on errors - preserves user data
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type { User } from '../../models/interfaces';
+
+export interface CreateIdentityResult {
+  recoveryPhrase: string[];
+  synced: boolean;
+}
+
+export interface ImportIdentityResult {
+  synced: boolean;
+}
+
+/**
+ * Hook for creating a new identity with offline support
+ * Never deletes identity on error - preserves user data
+ */
+export function useCreateIdentity(
+  createIdentityFn: () => Promise<CreateIdentityResult>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createIdentityFn,
+    onSuccess: (data) => {
+      // Invalidate user queries to refetch after identity creation
+      queryClient.invalidateQueries({ queryKey: ['user'] });
+      queryClient.invalidateQueries({ queryKey: ['identity'] });
+    },
+    onError: (error) => {
+      // Never delete identity on error - just log it
+      // User can recover using recovery phrase
+      if (__DEV__) {
+        console.warn('[useCreateIdentity] Identity creation error (identity may still exist):', error);
+      }
+    },
+    retry: false, // Don't retry identity creation
+    networkMode: 'offlineFirst',
+  });
+}
+
+/**
+ * Hook for importing an identity from recovery phrase
+ * Never deletes identity on error - preserves user data
+ */
+export function useImportIdentity(
+  importIdentityFn: (phrase: string) => Promise<ImportIdentityResult>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: importIdentityFn,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['user'] });
+      queryClient.invalidateQueries({ queryKey: ['identity'] });
+    },
+    onError: (error) => {
+      // Never delete identity on error - just log it
+      if (__DEV__) {
+        console.warn('[useImportIdentity] Identity import error (identity may still exist):', error);
+      }
+    },
+    retry: false,
+    networkMode: 'offlineFirst',
+  });
+}
+
+/**
+ * Hook for syncing identity with server
+ * Never deletes identity on error - only logs and allows retry
+ */
+export function useSyncIdentity(
+  syncIdentityFn: () => Promise<User>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: syncIdentityFn,
+    onSuccess: (user) => {
+      // Update user cache
+      queryClient.setQueryData(['user', 'current'], user);
+      queryClient.invalidateQueries({ queryKey: ['user'] });
+      queryClient.invalidateQueries({ queryKey: ['identity'] });
+    },
+    onError: (error) => {
+      // Never delete identity on error - just log it
+      // User can retry sync later or use recovery phrase
+      if (__DEV__) {
+        console.warn('[useSyncIdentity] Sync failed, but identity is preserved:', error);
+      }
+    },
+    retry: (failureCount, error: any) => {
+      // Retry up to 2 times for sync operations
+      // Don't retry if it's a network error - user can retry when online
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      const isNetworkError = 
+        errorMessage.includes('Network') ||
+        errorMessage.includes('Failed to fetch') ||
+        error?.code === 'NETWORK_ERROR';
+      
+      if (isNetworkError) {
+        return false; // Don't retry network errors - user will retry when online
+      }
+      
+      return failureCount < 2;
+    },
+    networkMode: 'offlineFirst',
+  });
+}
+

package/src/ui/hooks/useProfileEditing.ts

@@ -1,8 +1,7 @@
-import { useState, useCallback } from 'react';
-import { useOxy } from '../context/OxyContext';
-import { useAuthStore } from '../stores/authStore';
-import { toast } from '../../lib/sonner';
+import { useCallback } from 'react';
 import { useI18n } from './useI18n';
+import { useUpdateProfile } from './mutations/useAccountMutations';
+import { useAuthStore } from '../stores/authStore';
 
 export interface ProfileUpdateData {
     displayName?: string;
@@ -33,74 +32,61 @@ export interface ProfileUpdateData {
  * Provides functions to update profile fields and handle saving
  */
 export const useProfileEditing = () => {
-    const { oxyServices, activeSessionId } = useOxy();
-    const updateUser = useAuthStore((state) => state.updateUser);
     const { t } = useI18n();
-    const [isSaving, setIsSaving] = useState(false);
+    const updateProfileMutation = useUpdateProfile();
 
     /**
-     * Save profile updates to the server
+     * Save profile updates to the server using TanStack Query
      */
     const saveProfile = useCallback(async (updates: ProfileUpdateData) => {
-        if (!oxyServices) {
-            toast.error(t('editProfile.toasts.serviceUnavailable') || 'Service not available');
-            return false;
-        }
-
-        try {
-            setIsSaving(true);
+        // Prepare update object
+        const updateData: Record<string, any> = {};
 
-            // Prepare update object
-            const updateData: Record<string, any> = {};
-
-            if (updates.username !== undefined) {
-                updateData.username = updates.username;
-            }
-            if (updates.email !== undefined) {
-                updateData.email = updates.email;
-            }
-            if (updates.bio !== undefined) {
-                updateData.bio = updates.bio;
-            }
-            if (updates.location !== undefined || updates.locations !== undefined) {
-                updateData.location = updates.locations && updates.locations.length > 0 
-                    ? updates.locations[0].name 
-                    : updates.location || '';
-                if (updates.locations) {
-                    updateData.locations = updates.locations;
-                }
-            }
-            if (updates.links !== undefined) {
-                updateData.links = updates.links;
-            }
-            if (updates.linksMetadata !== undefined) {
-                updateData.linksMetadata = updates.linksMetadata;
-            }
-            if (updates.avatar !== undefined) {
-                updateData.avatar = updates.avatar;
+        if (updates.username !== undefined) {
+            updateData.username = updates.username;
+        }
+        if (updates.email !== undefined) {
+            updateData.email = updates.email;
+        }
+        if (updates.bio !== undefined) {
+            updateData.bio = updates.bio;
+        }
+        if (updates.location !== undefined || updates.locations !== undefined) {
+            updateData.location = updates.locations && updates.locations.length > 0 
+                ? updates.locations[0].name 
+                : updates.location || '';
+            if (updates.locations) {
+                updateData.locations = updates.locations;
             }
+        }
+        if (updates.links !== undefined) {
+            updateData.links = updates.links;
+        }
+        if (updates.linksMetadata !== undefined) {
+            updateData.linksMetadata = updates.linksMetadata;
+        }
+        if (updates.avatar !== undefined) {
+            updateData.avatar = updates.avatar;
+        }
 
-            // Handle name field
-            if (updates.displayName !== undefined || updates.lastName !== undefined) {
-                const currentUser = useAuthStore.getState().user;
-                const currentName = currentUser?.name;
-                updateData.name = {
-                    first: updates.displayName ?? (typeof currentName === 'object' ? currentName?.first : '') ?? '',
-                    last: updates.lastName ?? (typeof currentName === 'object' ? currentName?.last : '') ?? '',
-                };
-            }
+        // Handle name field
+        if (updates.displayName !== undefined || updates.lastName !== undefined) {
+            const currentUser = useAuthStore.getState().user;
+            const currentName = currentUser?.name;
+            updateData.name = {
+                first: updates.displayName ?? (typeof currentName === 'object' ? currentName?.first : '') ?? '',
+                last: updates.lastName ?? (typeof currentName === 'object' ? currentName?.last : '') ?? '',
+            };
+        }
 
-            await updateUser(updateData, oxyServices);
-            toast.success(t('editProfile.toasts.profileUpdated') || 'Profile updated successfully');
+        try {
+            await updateProfileMutation.mutateAsync(updateData);
             return true;
         } catch (error: any) {
-            console.error('Failed to update profile:', error);
-            toast.error(error?.message || t('editProfile.toasts.updateFailed') || 'Failed to update profile');
+            // Error toast is handled by the mutation
             return false;
-        } finally {
-            setIsSaving(false);
         }
-    }, [oxyServices, updateUser, t]);
+    }, [updateProfileMutation, t]);
 
     /**
      * Update a single profile field
@@ -138,7 +124,7 @@ export const useProfileEditing = () => {
     return {
         saveProfile,
         updateField,
-        isSaving,
+        isSaving: updateProfileMutation.isPending,
     };
 };
 

package/src/ui/hooks/useQueryClient.ts

@@ -0,0 +1,17 @@
+import { useQueryClient as useTanStackQueryClient } from '@tanstack/react-query';
+import type { QueryClient } from '@tanstack/react-query';
+
+/**
+ * Custom hook to access the QueryClient
+ * Provides type safety and ensures client is available
+ */
+export const useQueryClient = (): QueryClient => {
+  const queryClient = useTanStackQueryClient();
+  
+  if (!queryClient) {
+    throw new Error('QueryClient is not available. Make sure OxyProvider is wrapping your app.');
+  }
+  
+  return queryClient;
+};
+

package/src/ui/hooks/useSessionManagement.ts

@@ -6,6 +6,8 @@ import { fetchSessionsWithFallback, mapSessionsToClient, validateSessionBatch }
 import { getStorageKeys, type StorageInterface } from '../utils/storageHelpers';
 import { handleAuthError, isInvalidSessionError } from '../utils/errorHandlers';
 import type { OxyServices } from '../../core';
+import type { QueryClient } from '@tanstack/react-query';
+import { clearQueryCache } from './queryClient.js';
 
 export interface UseSessionManagementOptions {
   oxyServices: OxyServices;
@@ -19,6 +21,7 @@ export interface UseSessionManagementOptions {
   setAuthError?: (message: string | null) => void;
   logger?: (message: string, error?: unknown) => void;
   setTokenReady?: (ready: boolean) => void;
+  queryClient?: QueryClient | null;
 }
 
 export interface UseSessionManagementResult {
@@ -55,6 +58,7 @@ export const useSessionManagement = ({
   setAuthError,
   logger,
   setTokenReady,
+  queryClient,
 }: UseSessionManagementOptions): UseSessionManagementResult => {
   const [sessions, setSessions] = useState<ClientSession[]>([]);
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
@@ -140,6 +144,8 @@ export const useSessionManagement = ({
     try {
       await storage.removeItem(storageKeys.activeSessionId);
       await storage.removeItem(storageKeys.sessionIds);
+      // Clear identity sync state
+      await storage.removeItem('oxy_identity_synced').catch(() => {});
     } catch (error) {
       handleAuthError(error, {
         defaultMessage: CLEAR_STORAGE_ERROR,
@@ -155,9 +161,26 @@ export const useSessionManagement = ({
     setSessions([]);
     setActiveSessionId(null);
     logoutStore();
+    
+    // Clear TanStack Query cache (in-memory)
+    if (queryClient) {
+      queryClient.clear();
+    }
+    
+    // Clear persisted query cache
+    if (storage) {
+      try {
+        await clearQueryCache(storage);
+      } catch (error) {
+        if (logger) {
+          logger('Failed to clear persisted query cache', error);
+        }
+      }
+    }
+    
     await clearSessionStorage();
     onAuthStateChange?.(null);
-  }, [clearSessionStorage, logoutStore, onAuthStateChange]);
+  }, [clearSessionStorage, logoutStore, onAuthStateChange, queryClient, storage, logger]);
 
   const activateSession = useCallback(
     async (sessionId: string, user: User): Promise<void> => {

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -27,6 +27,7 @@ import { getDisplayName, getShortDisplayName } from '../utils/user-utils';
 import { useColorScheme } from '../hooks/use-color-scheme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
+import { useUsersBySessions } from '../hooks/queries/useAccountQueries';
 import {
     SCREEN_PADDING_HORIZONTAL,
     SECTION_GAP,
@@ -133,53 +134,44 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         ), [sessions, activeSessionId, user?.id]
     );
 
-    // Load user profiles for additional accounts
-    React.useEffect(() => {
-        const loadAdditionalAccountsData = async () => {
-            if (!oxyServices || additionalAccounts.length === 0) {
-                setAdditionalAccountsData([]);
-                return;
-            }
-
-            setLoadingAdditionalAccounts(true);
-            try {
-                const accountsData = await Promise.all(
-                    additionalAccounts.map(async (session) => {
-                        try {
-                            const userProfile = await oxyServices.getUserBySession(session.sessionId);
-                            return {
-                                id: session.sessionId,
-                                sessionId: session.sessionId,
-                                username: userProfile.username,
-                                email: userProfile.email,
-                                name: userProfile.name,
-                                avatar: userProfile.avatar,
-                                userProfile
-                            };
-                        } catch (error) {
-                            console.error(`Failed to load profile for session ${session.sessionId}:`, error);
-                            return {
-                                id: session.sessionId,
-                                sessionId: session.sessionId,
-                                username: 'Unknown User',
-                                email: 'No email available',
-                                avatar: null,
-                                userProfile: null
-                            };
-                        }
-                    })
-                );
-                setAdditionalAccountsData(accountsData);
-            } catch (error) {
-                console.error('Failed to load additional accounts:', error);
-                setAdditionalAccountsData([]);
-            } finally {
-                setLoadingAdditionalAccounts(false);
-            }
-        };
+    // Load user profiles for additional accounts using TanStack Query
+    const sessionIds = additionalAccounts.map(s => s.sessionId);
+    const { data: usersData, isLoading: isLoadingUsers } = useUsersBySessions(sessionIds, { 
+        enabled: additionalAccounts.length > 0 
+    });
 
-        loadAdditionalAccountsData();
-    }, [sessions, activeSessionId, user?.id, oxyServices]);
+    React.useEffect(() => {
+        if (usersData && usersData.length > 0) {
+            const accountsData = usersData.map(({ sessionId, user: userProfile }) => {
+                if (!userProfile) {
+                    return {
+                        id: sessionId,
+                        sessionId,
+                        username: 'Unknown User',
+                        email: 'No email available',
+                        avatar: null,
+                        userProfile: null
+                    };
+                }
+                return {
+                    id: sessionId,
+                    sessionId,
+                    username: userProfile.username,
+                    email: userProfile.email,
+                    name: userProfile.name,
+                    avatar: userProfile.avatar,
+                    userProfile
+                };
+            });
+            setAdditionalAccountsData(accountsData);
+            setLoadingAdditionalAccounts(false);
+        } else if (additionalAccounts.length === 0) {
+            setAdditionalAccountsData([]);
+            setLoadingAdditionalAccounts(false);
+        } else if (!isLoadingUsers) {
+            setLoadingAdditionalAccounts(false);
+        }
+    }, [usersData, additionalAccounts.length, isLoadingUsers]);
 
     // Feature settings (with mock values)
     const features = {