@oxyhq/services 5.7.5 → 5.8.1

package/src/ui/context/OxyContext.tsx

@@ -1,6 +1,6 @@
-import React, { createContext, useContext, useEffect, useCallback, ReactNode, useMemo } from 'react';
+import React, { createContext, useContext, useEffect, useCallback, ReactNode, useMemo, useRef, useState } from 'react';
 import { OxyServices } from '../../core';
-import { User } from '../../models/interfaces';
+import { User, ApiError } from '../../models/interfaces';
 import { SecureLoginResponse, SecureClientSession, MinimalUserData } from '../../models/secureSession';
 import { DeviceManager } from '../../utils/deviceManager';
 import { useSessionSocket } from '../hooks/useSessionSocket';
@@ -49,9 +49,11 @@ const OxyContext = createContext<OxyContextState | null>(null);
 // Props for the OxyContextProvider
 export interface OxyContextProviderProps {
   children: ReactNode;
-  oxyServices: OxyServices;
+  oxyServices?: OxyServices; // Now optional - will be created automatically if not provided
+  baseURL?: string; // New: API base URL for automatic service creation
   storageKeyPrefix?: string;
   onAuthStateChange?: (user: User | null) => void;
+  onError?: (error: ApiError) => void; // New: Error callback
   bottomSheetRef?: React.RefObject<any>;
 }
 
@@ -114,13 +116,30 @@ const getSecureStorageKeys = (prefix = 'oxy_secure') => ({
   activeSessionId: `${prefix}_active_session_id`, // ID of currently active session
 });
 
-export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
+export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   children,
-  oxyServices,
+  oxyServices: providedOxyServices,
+  baseURL,
   storageKeyPrefix = 'oxy_secure',
   onAuthStateChange,
+  onError,
   bottomSheetRef,
 }) => {
+  // Create oxyServices automatically if not provided
+  const oxyServicesRef = useRef<OxyServices | null>(null);
+
+  if (!oxyServicesRef.current) {
+    if (providedOxyServices) {
+      oxyServicesRef.current = providedOxyServices;
+    } else if (baseURL) {
+      oxyServicesRef.current = new OxyServices({ baseURL });
+    } else {
+      throw new Error('Either oxyServices or baseURL must be provided to OxyContextProvider');
+    }
+  }
+
+  const oxyServices = oxyServicesRef.current;
+
   // Zustand state
   const user = useAuthStore((state) => state.user);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -259,25 +278,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [storage, oxyServices, keys, onAuthStateChange]);
 
-  // Effect to restore token on app load or session switch
-  useEffect(() => {
-    const restoreToken = async () => {
-      if (activeSessionId && oxyServices) {
-        try {
-          await oxyServices.getTokenBySession(activeSessionId);
-          setTokenReady(true);
-        } catch (err) {
-          // If token restoration fails, force logout
-          await logout();
-          setTokenReady(false);
-        }
-      } else {
-        setTokenReady(true); // No session, so token is not needed
-      }
-    };
-    restoreToken();
-    // Only run when activeSessionId or oxyServices changes
-  }, [activeSessionId, oxyServices]);
+
 
   // Remove invalid session
   const removeInvalidSession = useCallback(async (sessionId: string): Promise<void> => {
@@ -357,7 +358,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   }, [oxyServices, onAuthStateChange, loginSuccess, saveActiveSessionId]);
 
   // Secure login method
-  const login = async (username: string, password: string, deviceName?: string): Promise<User> => {
+  const login = useCallback(async (username: string, password: string, deviceName?: string): Promise<User> => {
     if (!storage) throw new Error('Storage not initialized');
     useAuthStore.setState({ isLoading: true, error: null });
 
@@ -439,10 +440,10 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     } finally {
       useAuthStore.setState({ isLoading: false });
     }
-  };
+  }, [storage, oxyServices, sessions, activeSessionId, saveSessionsToStorage, saveActiveSessionId, loginSuccess, setMinimalUser, onAuthStateChange, loginFailure]);
 
   // Logout method
-  const logout = async (targetSessionId?: string): Promise<void> => {
+  const logout = useCallback(async (targetSessionId?: string): Promise<void> => {
     if (!activeSessionId) return;
 
     try {
@@ -475,10 +476,10 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       console.error('Logout error:', error);
       useAuthStore.setState({ error: 'Logout failed' });
     }
-  };
+  }, [activeSessionId, oxyServices, sessions, saveSessionsToStorage, switchToSession, logoutStore, setMinimalUser, storage, keys.activeSessionId, onAuthStateChange]);
 
   // Logout all sessions
-  const logoutAll = async (): Promise<void> => {
+  const logoutAll = useCallback(async (): Promise<void> => {
     console.log('logoutAll called with activeSessionId:', activeSessionId);
 
     if (!activeSessionId) {
@@ -515,10 +516,30 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       useAuthStore.setState({ error: `Logout all failed: ${error instanceof Error ? error.message : 'Unknown error'}` });
       throw error;
     }
-  };
+  }, [activeSessionId, oxyServices, logoutStore, setMinimalUser, clearAllStorage, onAuthStateChange]);
+
+  // Effect to restore token on app load or session switch
+  useEffect(() => {
+    const restoreToken = async () => {
+      if (activeSessionId && oxyServices) {
+        try {
+          await oxyServices.getTokenBySession(activeSessionId);
+          setTokenReady(true);
+        } catch (err) {
+          // If token restoration fails, force logout
+          await logout();
+          setTokenReady(false);
+        }
+      } else {
+        setTokenReady(true); // No session, so token is not needed
+      }
+    };
+    restoreToken();
+    // Only run when activeSessionId or oxyServices changes
+  }, [activeSessionId, oxyServices, logout]);
 
   // Sign up method
-  const signUp = async (username: string, email: string, password: string): Promise<User> => {
+  const signUp = useCallback(async (username: string, email: string, password: string): Promise<User> => {
     if (!storage) throw new Error('Storage not initialized');
 
     useAuthStore.setState({ isLoading: true, error: null });
@@ -540,42 +561,83 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     } finally {
       useAuthStore.setState({ isLoading: false });
     }
-  };
+  }, [storage, oxyServices, login, loginFailure]);
 
   // Switch session method
-  const switchSession = async (sessionId: string): Promise<void> => {
+  const switchSession = useCallback(async (sessionId: string): Promise<void> => {
     await switchToSession(sessionId);
-  };
+  }, [switchToSession]);
 
   // Remove session method
-  const removeSession = async (sessionId: string): Promise<void> => {
+  const removeSession = useCallback(async (sessionId: string): Promise<void> => {
     await logout(sessionId);
-  };
+  }, [logout]);
 
   // Refresh sessions method
-  const refreshSessions = async (): Promise<void> => {
-    if (!activeSessionId) return;
+  const refreshSessions = useCallback(async (): Promise<void> => {
+    console.log('refreshSessions called with activeSessionId:', activeSessionId);
+
+    if (!activeSessionId) {
+      console.log('refreshSessions: No activeSessionId, returning');
+      return;
+    }
 
     try {
+      console.log('refreshSessions: Calling getSessionsBySessionId...');
       const serverSessions = await oxyServices.getSessionsBySessionId(activeSessionId);
+      console.log('refreshSessions: Server sessions received:', serverSessions);
 
       // Update local sessions with server data
       const updatedSessions: SecureClientSession[] = serverSessions.map(serverSession => ({
         sessionId: serverSession.sessionId,
         deviceId: serverSession.deviceId,
-        expiresAt: new Date().toISOString(), // You might want to get this from server
-        lastActive: new Date().toISOString()
+        expiresAt: serverSession.expiresAt || new Date().toISOString(),
+        lastActive: serverSession.lastActive || new Date().toISOString(),
+        userId: serverSession.userId || user?.id
       }));
 
+      console.log('refreshSessions: Updated sessions:', updatedSessions);
       setSessions(updatedSessions);
       await saveSessionsToStorage(updatedSessions);
+      console.log('refreshSessions: Sessions saved to storage');
     } catch (error) {
       console.error('Refresh sessions error:', error);
+
+      // If the current session is invalid, try to find another valid session
+      if (sessions.length > 1) {
+        console.log('Current session invalid, trying to switch to another session...');
+        const otherSessions = sessions.filter(s => s.sessionId !== activeSessionId);
+
+        for (const session of otherSessions) {
+          try {
+            // Try to validate this session
+            await oxyServices.validateSession(session.sessionId);
+            console.log('Found valid session, switching to:', session.sessionId);
+            await switchToSession(session.sessionId);
+            return; // Successfully switched to another session
+          } catch (sessionError) {
+            console.log('Session validation failed for:', session.sessionId, sessionError);
+            continue; // Try next session
+          }
+        }
+      }
+
+      // If no valid sessions found, clear all sessions
+      console.log('No valid sessions found, clearing all sessions');
+      setSessions([]);
+      setActiveSessionId(null);
+      logoutStore();
+      setMinimalUser(null);
+      await clearAllStorage();
+
+      if (onAuthStateChange) {
+        onAuthStateChange(null);
+      }
     }
-  };
+  }, [activeSessionId, oxyServices, user?.id, sessions, saveSessionsToStorage, switchToSession, logoutStore, setMinimalUser, clearAllStorage, onAuthStateChange]);
 
   // Device management methods
-  const getDeviceSessions = async (): Promise<any[]> => {
+  const getDeviceSessions = useCallback(async (): Promise<any[]> => {
     if (!activeSessionId) throw new Error('No active session');
 
     try {
@@ -584,9 +646,9 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       console.error('Get device sessions error:', error);
       throw error;
     }
-  };
+  }, [activeSessionId, oxyServices]);
 
-  const logoutAllDeviceSessions = async (): Promise<void> => {
+  const logoutAllDeviceSessions = useCallback(async (): Promise<void> => {
     if (!activeSessionId) throw new Error('No active session');
 
     try {
@@ -606,9 +668,9 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       console.error('Logout all device sessions error:', error);
       throw error;
     }
-  };
+  }, [activeSessionId, oxyServices, logoutStore, setMinimalUser, clearAllStorage, onAuthStateChange]);
 
-  const updateDeviceName = async (deviceName: string): Promise<void> => {
+  const updateDeviceName = useCallback(async (deviceName: string): Promise<void> => {
     if (!activeSessionId) throw new Error('No active session');
 
     try {
@@ -620,7 +682,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       console.error('Update device name error:', error);
       throw error;
     }
-  };
+  }, [activeSessionId, oxyServices]);
 
   // Bottom sheet control methods
   const showBottomSheet = useCallback((screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => {
@@ -638,6 +700,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         bottomSheetRef.current.present();
       } else {
         console.warn('No expand or present method available on bottomSheetRef');
+        console.log('Available methods on bottomSheetRef.current:', Object.keys(bottomSheetRef.current));
       }
 
       // Then navigate to the specified screen if provided
@@ -657,6 +720,8 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       }
     } else {
       console.warn('bottomSheetRef is not available');
+      console.warn('To fix this, ensure you pass a bottomSheetRef to OxyProvider:');
+      console.warn('<OxyProvider baseURL="..." bottomSheetRef={yourBottomSheetRef}>');
     }
   }, [bottomSheetRef]);
 
@@ -672,16 +737,38 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     userId: user?.id,
     activeSessionId,
     refreshSessions,
-    logout: () => logout(),
+    logout,
     baseURL: oxyServices.getBaseURL(),
-    onRemoteSignOut: () => {
+    onRemoteSignOut: useCallback(() => {
       toast.info('You have been signed out remotely.');
       logout();
-    },
+    }, [logout]),
   });
 
   // Context value
-  const contextValue: OxyContextState = {
+  const contextValue: OxyContextState = useMemo(() => ({
+    user,
+    minimalUser,
+    sessions,
+    activeSessionId,
+    isAuthenticated,
+    isLoading,
+    error,
+    login,
+    logout,
+    logoutAll,
+    signUp,
+    switchSession,
+    removeSession,
+    refreshSessions,
+    getDeviceSessions,
+    logoutAllDeviceSessions,
+    updateDeviceName,
+    oxyServices,
+    bottomSheetRef,
+    showBottomSheet,
+    hideBottomSheet,
+  }), [
     user,
     minimalUser,
     sessions,
@@ -691,22 +778,19 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     error,
     login,
     logout,
-    logoutAll: async () => { await logout(); },
-    signUp: async (username, email, password) => {
-      await signUp(username, email, password);
-      return user as User; // Return the latest user from Zustand
-    },
-    switchSession: async (sessionId) => { await switchToSession(sessionId); },
-    removeSession: async (sessionId) => { await removeSession(sessionId); },
-    refreshSessions: async () => { await refreshSessions(); },
-    getDeviceSessions: async () => { return await getDeviceSessions(); },
-    logoutAllDeviceSessions: async () => { await logoutAllDeviceSessions(); },
-    updateDeviceName: async (deviceName) => { await updateDeviceName(deviceName); },
+    logoutAll,
+    signUp,
+    switchSession,
+    removeSession,
+    refreshSessions,
+    getDeviceSessions,
+    logoutAllDeviceSessions,
+    updateDeviceName,
     oxyServices,
     bottomSheetRef,
     showBottomSheet,
     hideBottomSheet,
-  };
+  ]);
 
   // Wrap children rendering to block until token is ready
   if (!tokenReady) {
@@ -720,6 +804,9 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   );
 };
 
+// Alias for backward compatibility
+export const OxyContextProvider = OxyProvider;
+
 // Hook to use the context
 export const useOxy = (): OxyContextState => {
   const context = useContext(OxyContext);

package/src/ui/hooks/useSessionSocket.ts

@@ -33,12 +33,15 @@ export function useSessionSocket({ userId, activeSessionId, refreshSessions, log
 
     socket.on('session_update', (data: { type: string; sessionId: string }) => {
       console.log('Received session_update:', data);
+      
+      // Always refresh sessions to get the latest state
+      refreshSessions();
+      
+      // If the current session was logged out, handle it specially
       if (data.sessionId === activeSessionId) {
         if (onRemoteSignOut) onRemoteSignOut();
         else toast.info('You have been signed out remotely.');
         logout();
-      } else {
-        refreshSessions();
       }
     });
 

package/src/ui/navigation/OxyRouter.tsx

@@ -57,7 +57,7 @@ const routes: Record<string, RouteConfig> = {
         component: AccountOverviewScreen,
         snapPoints: ['60%', '85%'],
     },
-    AccountSettings: {
+    EditProfile: {
         component: AccountSettingsScreen,
         snapPoints: ['60%', '100%'],
     },

package/src/ui/navigation/types.ts

@@ -13,6 +13,9 @@ export interface BaseScreenProps {
   onAuthenticated?: (user: User) => void;
   theme: 'light' | 'dark';
   containerWidth?: number;
+  initialStep?: number;
+  username?: string;
+  userProfile?: any;
 }
 
 /**
@@ -42,9 +45,14 @@ export interface OxyRouterProps {
  */
 export interface OxyProviderProps {
   /**
-   * Instance of OxyServices
+   * Instance of OxyServices (optional if baseURL is provided)
    */
-  oxyServices: OxyServices;
+  oxyServices?: OxyServices;
+  
+  /**
+   * API base URL for automatic service creation (optional if oxyServices is provided)
+   */
+  baseURL?: string;
   
   /**
    * Initial screen to display

package/src/ui/screens/AccountCenterScreen.tsx

@@ -81,7 +81,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 <ProfileCard
                     user={user}
                     theme={theme}
-                    onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
+                    onEditPress={() => navigate('EditProfile', { activeTab: 'profile' })}
                     onClosePress={onClose}
                     showCloseButton={!!onClose}
                 />
@@ -93,7 +93,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     <QuickActions
                         actions={[
                             { id: 'overview', icon: 'person-circle', iconColor: '#007AFF', title: 'Overview', onPress: () => navigate('AccountOverview') },
-                            { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: 'Settings', onPress: () => navigate('AccountSettings') },
+                            { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: 'Edit Profile', onPress: () => navigate('EditProfile') },
                             { id: 'sessions', icon: 'shield-checkmark', iconColor: '#30D158', title: 'Sessions', onPress: () => navigate('SessionManagement') },
                             { id: 'premium', icon: 'star', iconColor: '#FFD700', title: 'Premium', onPress: () => navigate('PremiumSubscription') },
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: '#34C759', title: 'Billing', onPress: () => navigate('') }] : []),
@@ -119,9 +119,9 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 id: 'settings',
                                 icon: 'settings',
                                 iconColor: '#5856D6',
-                                title: 'Account Settings',
-                                subtitle: 'Manage your preferences',
-                                onPress: () => navigate('AccountSettings'),
+                                title: 'Edit Profile',
+                                subtitle: 'Manage your profile and preferences',
+                                onPress: () => navigate('EditProfile'),
                             },
                             {
                                 id: 'sessions',

package/src/ui/screens/AccountManagementDemo.tsx

@@ -30,7 +30,7 @@ const AccountManagementDemo: React.FC = () => {
                             'Multi-account switching',
                             'Session management access'
                         ]}
-                        navigatesTo={['AccountOverview', 'AccountSwitcher', 'AccountSettings', 'SessionManagement']}
+                        navigatesTo={['AccountOverview', 'AccountSwitcher', 'EditProfile', 'SessionManagement']}
                     />
 
                     <ScreenCard
@@ -42,11 +42,11 @@ const AccountManagementDemo: React.FC = () => {
                             'Subscription management',
                             'Privacy and security overview'
                         ]}
-                        navigatesTo={['AccountSettings', 'SessionManagement']}
+                        navigatesTo={['EditProfile', 'SessionManagement']}
                     />
 
                     <ScreenCard
-                        title="AccountSettingsScreen"
+                        title="EditProfileScreen"
                         description="Complete account configuration and preferences"
                         features={[
                             'Profile editing (username, email, name)',
@@ -90,22 +90,22 @@ const AccountManagementDemo: React.FC = () => {
                     <Text style={styles.flowDescription}>
                         The screens are designed with intuitive navigation patterns:
                     </Text>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>1. Entry Point</Text>
                         <Text style={styles.flowText}>Users typically start at AccountCenterScreen</Text>
                     </View>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>2. Explore</Text>
                         <Text style={styles.flowText}>Navigate to specific screens based on needs</Text>
                     </View>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>3. Manage</Text>
                         <Text style={styles.flowText}>Perform account actions in specialized screens</Text>
                     </View>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>4. Return</Text>
                         <Text style={styles.flowText}>Navigate back or to related screens seamlessly</Text>
@@ -142,12 +142,12 @@ const ScreenCard: React.FC<{
     <View style={styles.screenCard}>
         <Text style={styles.screenTitle}>{title}</Text>
         <Text style={styles.screenDescription}>{description}</Text>
-        
+
         <Text style={styles.featuresTitle}>Features:</Text>
         {features.map((feature, index) => (
             <Text key={index} style={styles.feature}>• {feature}</Text>
         ))}
-        
+
         <Text style={styles.navigationTitle}>Navigates to:</Text>
         {navigatesTo.map((nav, index) => (
             <Text key={index} style={styles.navigationItem}>→ {nav}</Text>