@oxyhq/services 5.17.17 → 5.18.0

package/src/ui/context/OxyContext.tsx

@@ -1,45 +1,91 @@
 import type React from 'react';
 import {
+  createContext,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type ReactNode,
 } from 'react';
-import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
-import { toast } from '../../lib/sonner';
 import { OxyServices } from '../../core';
-import type { User } from '../../models/interfaces';
+import type { User, ApiError } from '../../models/interfaces';
 import type { ClientSession } from '../../models/session';
-import { logger as appLogger } from '../../utils/loggerUtils';
-import { useAuthOperations } from './hooks/useAuthOperations';
-import { useAvatarPicker } from '../hooks/useAvatarPicker';
+import { toast } from '../../lib/sonner';
+import { useAuthStore, type AuthState } from '../stores/authStore';
+import { useShallow } from 'zustand/react/shallow';
 import { useSessionSocket } from '../hooks/useSessionSocket';
 import type { UseFollowHook } from '../hooks/useFollow.types';
-import { useDeviceManagement } from '../hooks/useDeviceManagement';
 import { useLanguageManagement } from '../hooks/useLanguageManagement';
 import { useSessionManagement } from '../hooks/useSessionManagement';
-import { useStorage } from '../hooks/useStorage';
-import { useAccountStore } from '../stores/accountStore';
-import { useAuthStore, type AuthState } from '../stores/authStore';
-import { queryKeys } from '../hooks/queries/queryKeys';
-import { clearQueryCache } from '../hooks/queryClient';
+import { useAuthOperations } from './hooks/useAuthOperations';
+import { useDeviceManagement } from '../hooks/useDeviceManagement';
+import { getStorageKeys, createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
+import { isInvalidSessionError, isTimeoutOrNetworkError } from '../utils/errorHandlers';
 import type { RouteName } from '../navigation/routes';
 import { showBottomSheet as globalShowBottomSheet } from '../navigation/bottomSheetManager';
-import { getStorageKeys } from '../utils/storageHelpers';
-import { isInvalidSessionError, isTimeoutOrNetworkError } from '../utils/errorHandlers';
-import { refreshAccountInStore } from '../utils/avatarUtils';
-import { useShallow } from 'zustand/react/shallow';
-
-import {
-  OxyContext,
-  useOxy,
-  type OxyContextState,
-  type OxyContextProviderProps,
-} from './OxyContextBase';
-
-export { OxyContext, useOxy };
-export type { OxyContextState, OxyContextProviderProps };
+import { useQueryClient } from '@tanstack/react-query';
+import { clearQueryCache } from '../hooks/queryClient';
+import { translate } from '../../i18n';
+import { updateAvatarVisibility, updateProfileWithAvatar } from '../utils/avatarUtils';
+import { useAccountStore } from '../stores/accountStore';
+import { logger as loggerUtil } from '../../utils/loggerUtils';
+
+export interface OxyContextState {
+  user: User | null;
+  sessions: ClientSession[];
+  activeSessionId: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  isTokenReady: boolean;
+  error: string | null;
+  currentLanguage: string;
+  currentLanguageMetadata: ReturnType<typeof useLanguageManagement>['metadata'];
+  currentLanguageName: string;
+  currentNativeLanguageName: string;
+
+  // Authentication
+  signIn: (publicKey: string, deviceName?: string) => Promise<User>;
+
+  // Session management
+  logout: (targetSessionId?: string) => Promise<void>;
+  logoutAll: () => Promise<void>;
+  switchSession: (sessionId: string) => Promise<void>;
+  removeSession: (sessionId: string) => Promise<void>;
+  refreshSessions: () => Promise<void>;
+  setLanguage: (languageId: string) => Promise<void>;
+  getDeviceSessions: () => Promise<
+    Array<{
+      sessionId: string;
+      deviceId: string;
+      deviceName?: string;
+      lastActive?: string;
+      expiresAt?: string;
+    }>
+  >;
+  logoutAllDeviceSessions: () => Promise<void>;
+  updateDeviceName: (deviceName: string) => Promise<void>;
+  clearSessionState: () => Promise<void>;
+  clearAllAccountData: () => Promise<void>;
+  oxyServices: OxyServices;
+  useFollow?: UseFollowHook;
+  showBottomSheet?: (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => void;
+  openAvatarPicker: () => void;
+}
+
+const OxyContext = createContext<OxyContextState | null>(null);
+
+export interface OxyContextProviderProps {
+  children: ReactNode;
+  oxyServices?: OxyServices;
+  baseURL?: string;
+  authWebUrl?: string;
+  authRedirectUri?: string;
+  storageKeyPrefix?: string;
+  onAuthStateChange?: (user: User | null) => void;
+  onError?: (error: ApiError) => void;
+}
 
 let cachedUseFollowHook: UseFollowHook | null = null;
 
@@ -55,7 +101,7 @@ const loadUseFollowHook = (): UseFollowHook => {
     return cachedUseFollowHook;
   } catch (error) {
     if (__DEV__) {
-      appLogger.warn(
+      loggerUtil.warn(
         'useFollow hook is not available. Please import useFollow from @oxyhq/services directly.',
         { component: 'OxyContext', method: 'loadUseFollowHook' },
         error
@@ -75,6 +121,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   children,
   oxyServices: providedOxyServices,
   baseURL,
+  authWebUrl,
+  authRedirectUri,
   storageKeyPrefix = 'oxy_session',
   onAuthStateChange,
   onError,
@@ -85,7 +133,11 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     if (providedOxyServices) {
       oxyServicesRef.current = providedOxyServices;
     } else if (baseURL) {
-      oxyServicesRef.current = new OxyServices({ baseURL });
+      oxyServicesRef.current = new OxyServices({
+        baseURL,
+        authWebUrl,
+        authRedirectUri,
+      });
     } else {
       throw new Error('Either oxyServices or baseURL must be provided to OxyContextProvider');
     }
@@ -94,21 +146,19 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const oxyServices = oxyServicesRef.current;
 
   const {
+    user,
     isAuthenticated,
-    isOnline,
     isLoading,
     error,
-    setOnline,
     loginSuccess,
     loginFailure,
     logoutStore,
   } = useAuthStore(
     useShallow((state: AuthState) => ({
+      user: state.user,
       isAuthenticated: state.isAuthenticated,
-      isOnline: state.isOnline,
       isLoading: state.isLoading,
       error: state.error,
-      setOnline: state.setOnline,
       loginSuccess: state.loginSuccess,
       loginFailure: state.loginFailure,
       logoutStore: state.logout,
@@ -121,17 +171,44 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
   const logger = useCallback((message: string, err?: unknown) => {
     if (__DEV__) {
-      if (err !== undefined) {
-        console.warn(`[OxyContext] ${message}`, err);
-      } else {
-        console.warn(`[OxyContext] ${message}`);
-      }
+      console.warn(`[OxyContext] ${message}`, err);
     }
   }, []);
 
   const storageKeys = useMemo(() => getStorageKeys(storageKeyPrefix), [storageKeyPrefix]);
 
-  const { storage, isReady: isStorageReady } = useStorage({ onError, logger });
+  // Simple storage initialization - no complex hook needed
+  const storageRef = useRef<StorageInterface | null>(null);
+  const [storage, setStorage] = useState<StorageInterface | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    createPlatformStorage()
+      .then((storageInstance) => {
+        if (mounted) {
+          storageRef.current = storageInstance;
+          setStorage(storageInstance);
+        }
+      })
+      .catch((err) => {
+        if (mounted) {
+          logger('Failed to initialize storage', err);
+          onError?.({
+            message: 'Failed to initialize storage',
+            code: 'STORAGE_INIT_ERROR',
+            status: 500,
+          });
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [logger, onError]);
+
+
+  // Offline queuing is now handled by TanStack Query mutations
+  // No need for custom offline queue
 
   const {
     currentLanguage,
@@ -174,86 +251,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     queryClient,
   });
 
-  const { data: userData } = useQuery({
-    queryKey: queryKeys.accounts.current(),
-    queryFn: async () => {
-      appLogger.debug('Fetching current user', {
-        component: 'OxyContext',
-        sessionId: activeSessionId ?? undefined
-      });
-      if (!activeSessionId) {
-        throw new Error('No active session');
-      }
-      const data = await oxyServices.getUserBySession(activeSessionId);
-      appLogger.debug('Current user fetched', {
-        component: 'OxyContext',
-        username: data.username
-      });
-      return data;
-    },
-    enabled: isAuthenticated && !!activeSessionId && tokenReady,
-    staleTime: 30000, // 30 seconds - reduces unnecessary refetches
-    gcTime: 5 * 60 * 1000, // 5 minutes - keeps data in cache longer
-    retry: false,
-    refetchOnMount: 'always',
-    refetchOnWindowFocus: false,
-  });
-  const user = userData ?? null;
-
-  // Profile update mutation - defined inline to avoid circular dependency with useOxy()
-  const updateProfileMutation = useMutation({
-    mutationFn: async (updates: Partial<User>) => {
-      appLogger.debug('Updating profile', { component: 'OxyContext', updates });
-      return await oxyServices.updateProfile(updates);
-    },
-    onSuccess: async (data, updates) => {
-      appLogger.debug('Profile update successful', {
-        component: 'OxyContext',
-        username: data.username,
-        updatedFields: Object.keys(updates)
-      });
-
-      // Update cache with server response
-      queryClient.setQueryData(queryKeys.accounts.current(), data);
-      if (activeSessionId) {
-        queryClient.setQueryData(queryKeys.users.profile(activeSessionId), data);
-      }
-
-      // Refresh accountStore with all updated profile data (synchronizes immediately)
-      if (activeSessionId && oxyServices) {
-        refreshAccountInStore(activeSessionId, data, oxyServices);
-      }
-
-      // Force refetch of all active queries to ensure UI updates immediately
-      // Using refetchQueries instead of invalidateQueries to bypass staleTime
-      await Promise.all([
-        queryClient.refetchQueries({
-          queryKey: queryKeys.accounts.all,
-          type: 'active'
-        }),
-        queryClient.refetchQueries({
-          queryKey: queryKeys.users.all,
-          type: 'active'
-        })
-      ]);
-
-      appLogger.debug('Profile update complete', { component: 'OxyContext' });
-    },
-    onError: (error) => {
-      appLogger.error('Profile update failed', error, { component: 'OxyContext' });
-      toast.error(error instanceof Error ? error.message : 'Failed to update profile');
-    },
-  });
-
-  const updateProfile = useCallback(
-    async (updates: Partial<User>): Promise<User> => {
-      return await updateProfileMutation.mutateAsync(updates);
-    },
-    [updateProfileMutation]
-  );
-
   const {
-    completeSignIn,
+    signIn,
     logout,
     logoutAll,
   } = useAuthOperations({
@@ -276,9 +275,12 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     logger,
   });
 
+  // Clear all account data (sessions, cache, etc.)
   const clearAllAccountData = useCallback(async (): Promise<void> => {
+    // Clear TanStack Query cache (in-memory)
     queryClient.clear();
 
+    // Clear persisted query cache
     if (storage) {
       try {
         await clearQueryCache(storage);
@@ -287,68 +289,16 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       }
     }
 
+    // Clear session state (sessions, activeSessionId, storage)
     await clearSessionState();
 
+    // Reset account store
     useAccountStore.getState().reset();
 
+    // Clear HTTP service cache
     oxyServices.clearCache();
   }, [queryClient, storage, clearSessionState, logger, oxyServices]);
 
-  useEffect(() => {
-    if (!storage) return;
-
-    let wasOffline = false;
-    let checkTimeout: NodeJS.Timeout | null = null;
-
-    const scheduleNextCheck = () => {
-      if (checkTimeout) {
-        clearTimeout(checkTimeout);
-      }
-      checkTimeout = setTimeout(() => {
-        checkNetworkStatus();
-      }, 30000); // Check every 30 seconds
-    };
-
-    const checkNetworkStatus = async () => {
-      try {
-        // Try a lightweight health check to see if we're online
-        await oxyServices.healthCheck();
-
-        // If we were offline and now we're online
-        if (wasOffline) {
-          logger('Network reconnected - setting online state');
-          setOnline(true);
-          // TanStack Query will automatically retry pending mutations
-          // Session management will handle token refresh if needed
-          wasOffline = false;
-        } else {
-          // We're online and were already online
-          setOnline(true);
-        }
-      } catch (error) {
-        // Network check failed - we're offline
-        if (!wasOffline) {
-          if (__DEV__) {
-            logger('Network appears offline - suspending authentication');
-          }
-          setOnline(false); // This will set isAuthenticated to false
-        }
-        wasOffline = true;
-      } finally {
-        scheduleNextCheck();
-      }
-    };
-
-    // Check immediately
-    checkNetworkStatus();
-
-    return () => {
-      if (checkTimeout) {
-        clearTimeout(checkTimeout);
-      }
-    };
-  }, [oxyServices, storage, logger, setOnline]);
-
   const { getDeviceSessions, logoutAllDeviceSessions, updateDeviceName } = useDeviceManagement({
     oxyServices,
     activeSessionId,
@@ -395,7 +345,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
               logger('Session validation failed during init', validationError);
             } else if (__DEV__ && isTimeoutOrNetworkError(validationError)) {
               // Only log timeouts in dev mode for debugging
-              appLogger.debug('Session validation timeout (expected when offline)', { component: 'OxyContext', method: 'restoreSessionsFromStorage' }, validationError as unknown);
+              loggerUtil.debug('Session validation timeout (expected when offline)', { component: 'OxyContext', method: 'restoreSessionsFromStorage' }, validationError as unknown);
             }
           }
         }
@@ -420,7 +370,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
           } else if (isTimeoutOrNetworkError(switchError)) {
             // Timeout/network error - non-critical, don't block
             if (__DEV__) {
-              appLogger.debug('Active session validation timeout (expected when offline)', { component: 'OxyContext', method: 'restoreSessionsFromStorage' }, switchError as unknown);
+              loggerUtil.debug('Active session validation timeout (expected when offline)', { component: 'OxyContext', method: 'restoreSessionsFromStorage' }, switchError as unknown);
             }
           } else {
             // Only log unexpected errors
@@ -430,7 +380,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       }
     } catch (error) {
       if (__DEV__) {
-        appLogger.error('Auth init error', error, { component: 'OxyContext', method: 'restoreSessionsFromStorage' });
+        loggerUtil.error('Auth init error', error instanceof Error ? error : new Error(String(error)), { component: 'OxyContext', method: 'restoreSessionsFromStorage' });
       }
       await clearSessionState();
     } finally {
@@ -461,11 +411,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     : undefined;
   const currentDeviceId = activeSession?.deviceId ?? null;
 
-  // Get userId from JWT token (MongoDB ObjectId) for socket room matching
-  const userId = oxyServices.getCurrentUserId();
+  const userId = user?.id;
 
   const refreshSessionsWithUser = useCallback(
-    () => refreshSessions(userId || undefined),
+    () => refreshSessions(userId),
     [refreshSessions, userId],
   );
 
@@ -489,7 +438,6 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     logout,
     clearSessionState,
     baseURL: oxyServices.getBaseURL(),
-    getAccessToken: () => oxyServices.getAccessToken(),
     onRemoteSignOut: handleRemoteSignOut,
     onSessionRemoved: handleSessionRemoved,
   });
@@ -508,30 +456,55 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     },
     [],
   );
-  const { openAvatarPicker } = useAvatarPicker({
-    oxyServices,
-    currentLanguage,
-    activeSessionId,
-    currentDeviceId,
-    queryClient,
-    showBottomSheet: showBottomSheetForContext,
-  });
+
+  // Create openAvatarPicker function
+  const openAvatarPicker = useCallback(() => {
+    showBottomSheetForContext({
+      screen: 'FileManagement' as RouteName,
+      props: {
+        selectMode: true,
+        multiSelect: false,
+        disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+        afterSelect: 'none', // Don't navigate away - stay on current screen
+        onSelect: async (file: any) => {
+          if (!file.contentType.startsWith('image/')) {
+            toast.error(translate(currentLanguage, 'editProfile.toasts.selectImage') || 'Please select an image file');
+            return;
+          }
+          try {
+            // Update file visibility to public for avatar
+            await updateAvatarVisibility(file.id, oxyServices, 'OxyContext');
+
+            // Update user profile (handles query invalidation and accountStore update)
+            await updateProfileWithAvatar(
+              { avatar: file.id },
+              oxyServices,
+              activeSessionId,
+              queryClient
+            );
+
+            toast.success(translate(currentLanguage, 'editProfile.toasts.avatarUpdated') || 'Avatar updated');
+          } catch (e: any) {
+            toast.error(e.message || translate(currentLanguage, 'editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
+          }
+        },
+      },
+    });
+  }, [oxyServices, currentLanguage, showBottomSheetForContext, activeSessionId, queryClient]);
 
   const contextValue: OxyContextState = useMemo(() => ({
     user,
     sessions,
     activeSessionId,
-    currentDeviceId,
     isAuthenticated,
     isLoading,
     isTokenReady: tokenReady,
-    isStorageReady,
     error,
     currentLanguage,
     currentLanguageMetadata,
     currentLanguageName,
     currentNativeLanguageName,
-    completeSignIn,
+    signIn,
     logout,
     logoutAll,
     switchSession: switchSessionForContext,
@@ -547,11 +520,9 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     useFollow: useFollowHook,
     showBottomSheet: showBottomSheetForContext,
     openAvatarPicker,
-    updateProfile,
   }), [
     activeSessionId,
-    currentDeviceId,
-    completeSignIn,
+    signIn,
     currentLanguage,
     currentLanguageMetadata,
     currentLanguageName,
@@ -569,14 +540,12 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     setLanguage,
     switchSessionForContext,
     tokenReady,
-    isStorageReady,
     updateDeviceName,
     clearAllAccountData,
     useFollowHook,
     user,
     showBottomSheetForContext,
     openAvatarPicker,
-    updateProfile,
   ]);
 
   return (
@@ -588,4 +557,13 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
 export const OxyContextProvider = OxyProvider;
 
+export const useOxy = (): OxyContextState => {
+  const context = useContext(OxyContext);
+  if (!context) {
+    throw new Error('useOxy must be used within an OxyContextProvider');
+  }
+  return context;
+};
+
 export default OxyContext;
+