@oxyhq/services 5.13.21 → 5.13.23

package/src/ui/navigation/OxyRouter.tsx

@@ -1,13 +1,48 @@
 import type React from 'react';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { OxyServices } from '../../core';
+import ErrorBoundary from '../components/ErrorBoundary';
 
 // Import types and route registry
 import type { OxyRouterProps } from './types';
-import { routes } from './routes';
+import { routes, routeNames } from './routes';
 import type { RouteName } from './routes';
 
+// Helper function to validate route names at runtime
+const isValidRouteName = (screen: string): screen is RouteName => {
+    return routeNames.includes(screen as RouteName);
+};
+
+// Helper function for safe navigation with validation
+const validateAndNavigate = (
+    screen: string,
+    props: Record<string, any>,
+    setCurrentScreen: (screen: RouteName) => void,
+    setScreenHistory: React.Dispatch<React.SetStateAction<RouteName[]>>,
+    setScreenPropsMap: React.Dispatch<React.SetStateAction<Partial<Record<RouteName, any>>>>
+): boolean => {
+    if (!isValidRouteName(screen)) {
+        const errorMsg = `Invalid route name: "${screen}". Valid routes are: ${routeNames.join(', ')}`;
+        console.error('OxyRouter:', errorMsg);
+        if (process.env.NODE_ENV !== 'production') {
+            console.error('Navigation error:', errorMsg);
+        }
+        return false;
+    }
+
+    if (!routes[screen]) {
+        const errorMsg = `Route "${screen}" is registered but component is missing`;
+        console.error('OxyRouter:', errorMsg);
+        if (process.env.NODE_ENV !== 'production') {
+            console.error('Navigation error:', errorMsg);
+        }
+        return false;
+    }
+
+    return true;
+};
+
 const OxyRouter: React.FC<OxyRouterProps> = ({
     oxyServices,
     initialScreen,
@@ -30,20 +65,19 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         }
     }, [currentScreen, adjustSnapPoints]);
 
-    // Memoized navigation methods
+    // Memoized navigation methods with validation
     const navigate = useCallback((screen: RouteName, props: Record<string, any> = {}) => {
         if (__DEV__) console.log('OxyRouter: navigate called', screen, props);
-        if (routes[screen]) {
-            if (__DEV__) console.log('OxyRouter: screen found in routes');
-            setCurrentScreen(screen);
-            setScreenHistory(prev => [...prev, screen]);
-            setScreenPropsMap(prev => ({ ...prev, [screen]: props }));
-        } else {
-            console.error(`OxyRouter: Screen "${screen}" not found in routes:`, Object.keys(routes));
-            if (process.env.NODE_ENV !== 'production') {
-                console.error(`Screen "${screen}" not found`);
-            }
+        
+        // Validate route before navigating
+        if (!validateAndNavigate(screen, props, setCurrentScreen, setScreenHistory, setScreenPropsMap)) {
+            return; // Early return if validation fails
         }
+
+        // All validations passed, proceed with navigation
+        setCurrentScreen(screen);
+        setScreenHistory(prev => [...prev, screen]);
+        setScreenPropsMap(prev => ({ ...prev, [screen]: props }));
     }, []);
 
     const goBack = useCallback(() => {
@@ -80,10 +114,20 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         const handleNavigationEvent = (event: any) => {
             if (event && event.detail) {
                 if (typeof event.detail === 'string') {
-                    navigate(event.detail);
+                    // Validate string route name before navigating
+                    if (isValidRouteName(event.detail)) {
+                        navigate(event.detail as RouteName);
+                    } else {
+                        console.error('OxyRouter: Invalid route name in event:', event.detail);
+                    }
                 } else if (typeof event.detail === 'object' && event.detail.screen) {
                     const { screen, props } = event.detail;
-                    navigate(screen, props || {});
+                    // Validate route name before navigating
+                    if (isValidRouteName(screen)) {
+                        navigate(screen as RouteName, props || {});
+                    } else {
+                        console.error('OxyRouter: Invalid route name in event:', screen);
+                    }
                 }
             }
         };
@@ -95,8 +139,14 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
             intervalId = setInterval(() => {
                 const globalNav = (globalThis as any).oxyNavigateEvent;
                 if (globalNav && globalNav.screen) {
-                    navigate(globalNav.screen, globalNav.props || {});
-                    (globalThis as any).oxyNavigateEvent = null;
+                    // Validate route name before navigating
+                    if (isValidRouteName(globalNav.screen)) {
+                        navigate(globalNav.screen as RouteName, globalNav.props || {});
+                        (globalThis as any).oxyNavigateEvent = null;
+                    } else {
+                        console.error('OxyRouter: Invalid route name in global event:', globalNav.screen);
+                        (globalThis as any).oxyNavigateEvent = null; // Clear invalid event
+                    }
                 }
             }, 100);
         }
@@ -110,7 +160,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         };
     }, [navigate]);
 
-    // Render the current screen component
+    // Render the current screen component with error boundary
     const renderScreen = () => {
         const CurrentScreen = (routes as any)[currentScreen]?.component;
         if (!CurrentScreen) {
@@ -120,16 +170,22 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
             return <View style={styles.errorContainer} />;
         }
         return (
-            <CurrentScreen
-                oxyServices={oxyServices}
-                navigate={navigate}
-                goBack={goBack}
-                onClose={onClose}
-                onAuthenticated={onAuthenticated}
-                theme={theme}
-                containerWidth={containerWidth}
-                {...(screenPropsMap[currentScreen] || {})}
-            />
+            <ErrorBoundary
+                onError={(error, errorInfo) => {
+                    console.error(`Error in screen "${currentScreen}":`, error, errorInfo);
+                }}
+            >
+                <CurrentScreen
+                    oxyServices={oxyServices}
+                    navigate={navigate}
+                    goBack={goBack}
+                    onClose={onClose}
+                    onAuthenticated={onAuthenticated}
+                    theme={theme}
+                    containerWidth={containerWidth}
+                    {...(screenPropsMap[currentScreen] || {})}
+                />
+            </ErrorBoundary>
         );
     };
 
@@ -140,6 +196,9 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
     );
 };
 
+// Memoize the router component to prevent unnecessary re-renders
+const MemoizedOxyRouter = memo(OxyRouter);
+
 const styles = StyleSheet.create({
     container: {
         flex: 1,
@@ -152,4 +211,6 @@ const styles = StyleSheet.create({
     },
 });
 
-export default OxyRouter;
+// Export both the memoized version (default) and the original for testing
+export { OxyRouter };
+export default MemoizedOxyRouter;

package/src/ui/screens/AccountCenterScreen.tsx

@@ -9,6 +9,7 @@ import {
     Alert,
     Platform,
 } from 'react-native';
+import { useCallback, useMemo } from 'react';
 import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { packageInfo } from '../../constants/version';
@@ -39,7 +40,8 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     const primaryColor = '#0066CC';
     const dangerColor = '#D32F2F';
 
-    const handleLogout = async () => {
+    // Memoized logout handler - prevents unnecessary re-renders
+    const handleLogout = useCallback(async () => {
         try {
             await logout();
             if (onClose) {
@@ -49,14 +51,15 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
             console.error('Logout failed:', error);
             toast.error(t('common.errors.signOutFailed') || 'There was a problem signing you out. Please try again.');
         }
-    };
+    }, [logout, onClose, t]);
 
-    const confirmLogout = () => {
+    // Memoized confirm logout handler - prevents unnecessary re-renders
+    const confirmLogout = useCallback(() => {
         confirmAction(
             t('common.confirms.signOut') || 'Are you sure you want to sign out?',
             handleLogout
         );
-    };
+    }, [handleLogout, t]);
 
     if (!isAuthenticated) {
         return (
@@ -91,14 +94,14 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 {/* Quick Actions */}
                 <Section title={t('accountCenter.sections.quickActions') || 'Quick Actions'} theme={theme} isFirst={true}>
                     <QuickActions
-                        actions={[
+                        actions={useMemo(() => [
                             { id: 'overview', icon: 'person-circle', iconColor: '#007AFF', title: t('accountCenter.quickActions.overview') || 'Overview', onPress: () => navigate('AccountOverview') },
                             { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: t('accountCenter.quickActions.editProfile') || 'Edit Profile', onPress: () => navigate('EditProfile') },
                             { id: 'sessions', icon: 'shield-checkmark', iconColor: '#30D158', title: t('accountCenter.quickActions.sessions') || 'Sessions', onPress: () => navigate('SessionManagement') },
                             { id: 'premium', icon: 'star', iconColor: '#FFD700', title: t('accountCenter.quickActions.premium') || 'Premium', onPress: () => navigate('PremiumSubscription') },
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: '#34C759', title: t('accountCenter.quickActions.billing') || 'Billing', onPress: () => navigate('PaymentGateway') }] : []),
                             ...(sessions && sessions.length > 1 ? [{ id: 'switch', icon: 'swap-horizontal', iconColor: '#FF9500', title: t('accountCenter.quickActions.switch') || 'Switch', onPress: () => navigate('AccountSwitcher') }] : []),
-                        ]}
+                        ], [user?.isPremium, sessions, navigate, t])}
                         theme={theme}
                     />
                 </Section>
@@ -106,7 +109,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 {/* Account Management */}
                 <Section title={t('accountCenter.sections.accountManagement') || 'Account Management'} theme={theme}>
                     <GroupedSection
-                        items={[
+                        items={useMemo(() => [
                             {
                                 id: 'overview',
                                 icon: 'person-circle',
@@ -155,7 +158,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 subtitle: t('accountCenter.items.billing.subtitle') || 'Payment methods and invoices',
                                 onPress: () => navigate('PaymentGateway'),
                             }] : []),
-                        ]}
+                        ], [user?.isPremium, navigate, t])}
                         theme={theme}
                     />
                 </Section>
@@ -164,7 +167,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 {sessions && sessions.length > 1 && (
                     <Section title={t('accountCenter.sections.multiAccount') || 'Multi-Account'} theme={theme}>
                         <GroupedSection
-                            items={[
+                            items={useMemo(() => [
                                 {
                                     id: 'switch',
                                     icon: 'people',
@@ -181,7 +184,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
                                     onPress: () => navigate('SignIn'),
                                 },
-                            ]}
+                            ], [sessions.length, navigate, t])}
                             theme={theme}
                         />
                     </Section>
@@ -191,7 +194,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 {(!sessions || sessions.length <= 1) && (
                     <Section title={t('accountCenter.sections.addAccount') || 'Add Account'} theme={theme}>
                         <GroupedSection
-                            items={[
+                            items={useMemo(() => [
                                 {
                                     id: 'add',
                                     icon: 'person-add',
@@ -200,7 +203,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
                                     onPress: () => navigate('SignIn'),
                                 },
-                            ]}
+                            ], [navigate, t])}
                             theme={theme}
                         />
                     </Section>
@@ -209,7 +212,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 {/* Additional Options */}
                 <Section title={t('accountCenter.sections.moreOptions') || 'More Options'} theme={theme}>
                     <GroupedSection
-                        items={[
+                        items={useMemo(() => [
                             ...(Platform.OS !== 'web' ? [{
                                 id: 'notifications',
                                 icon: 'notifications',
@@ -242,7 +245,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 subtitle: t('accountCenter.items.appInfo.subtitle') || 'Version and system details',
                                 onPress: () => navigate('AppInfo'),
                             },
-                        ]}
+                        ], [navigate, t])}
                         theme={theme}
                     />
                 </Section>

package/src/ui/screens/SessionManagementScreen.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
     View,
     Text,
@@ -39,7 +39,8 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     const dangerColor = '#D32F2F';
     const successColor = '#2E7D32';
 
-    const loadSessions = async (isRefresh = false) => {
+    // Memoized load sessions function - prevents unnecessary re-renders
+    const loadSessions = useCallback(async (isRefresh = false) => {
         try {
             if (isRefresh) {
                 setRefreshing(true);
@@ -64,9 +65,10 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             setLoading(false);
             setRefreshing(false);
         }
-    };
+    }, [refreshSessions]);
 
-    const handleLogoutSession = async (sessionId: string) => {
+    // Memoized logout session handler - prevents unnecessary re-renders
+    const handleLogoutSession = useCallback(async (sessionId: string) => {
         confirmAction('Are you sure you want to logout this session?', async () => {
             try {
                 setActionLoading(sessionId);
@@ -80,9 +82,10 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 setActionLoading(null);
             }
         });
-    };
+    }, [logout, refreshSessions]);
 
-    const handleLogoutOtherSessions = async () => {
+    // Memoized logout other sessions handler - prevents unnecessary re-renders
+    const handleLogoutOtherSessions = useCallback(async () => {
         const otherSessionsCount = userSessions.filter(s => s.sessionId !== activeSessionId).length;
         if (otherSessionsCount === 0) {
             toast.info('No other sessions to logout.');
@@ -108,9 +111,10 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 }
             }
         );
-    };
+    }, [userSessions, activeSessionId, logout, refreshSessions]);
 
-    const handleLogoutAllSessions = async () => {
+    // Memoized logout all sessions handler - prevents unnecessary re-renders
+    const handleLogoutAllSessions = useCallback(async () => {
         confirmAction(
             'This will logout all sessions including this one and you will need to sign in again. Continue?',
             async () => {
@@ -124,10 +128,10 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 }
             }
         );
-    };
+    }, [logoutAll]);
 
-    // Relative time formatter (past & future)
-    const formatRelative = (dateString?: string) => {
+    // Memoized relative time formatter - prevents function recreation on every render
+    const formatRelative = useCallback((dateString?: string) => {
         if (!dateString) return 'Unknown';
         const date = new Date(dateString);
         const now = new Date();
@@ -142,9 +146,10 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         const days = hrs / 24;
         if (days < 7) return isFuture ? `in ${fmt(days)}d` : `${fmt(days)}d ago`;
         return date.toLocaleDateString();
-    };
+    }, []);
 
-    const handleSwitchSession = async (sessionId: string) => {
+    // Memoized switch session handler - prevents unnecessary re-renders
+    const handleSwitchSession = useCallback(async (sessionId: string) => {
         if (sessionId === activeSessionId) return;
         setSwitchLoading(sessionId);
         try {
@@ -156,11 +161,11 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         } finally {
             setSwitchLoading(null);
         }
-    };
+    }, [activeSessionId, switchSession]);
 
     useEffect(() => {
         loadSessions();
-    }, []);
+    }, [loadSessions]);
 
     if (loading) {
         return (
@@ -171,69 +176,76 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         );
     }
 
-    // Build grouped section items for sessions
-    const sessionItems = userSessions.map((session: ClientSession) => {
-        const isCurrent = session.sessionId === activeSessionId;
-        const subtitleParts: string[] = [];
-        if (session.deviceId) subtitleParts.push(`Device ${session.deviceId.substring(0, 10)}...`);
-        subtitleParts.push(`Last ${formatRelative(session.lastActive)}`);
-        subtitleParts.push(`Expires ${formatRelative(session.expiresAt)}`);
+    // Memoized session items - prevents unnecessary re-renders when dependencies haven't changed
+    const sessionItems = useMemo(() => {
+        return userSessions.map((session: ClientSession) => {
+            const isCurrent = session.sessionId === activeSessionId;
+            const subtitleParts: string[] = [];
+            if (session.deviceId) subtitleParts.push(`Device ${session.deviceId.substring(0, 10)}...`);
+            subtitleParts.push(`Last ${formatRelative(session.lastActive)}`);
+            subtitleParts.push(`Expires ${formatRelative(session.expiresAt)}`);
 
-        return {
-            id: session.sessionId,
-            icon: isCurrent ? 'shield-checkmark' : 'laptop-outline',
-            iconColor: isCurrent ? successColor : primaryColor,
-            title: isCurrent ? 'Current Session' : `Session ${session.sessionId.substring(0, 8)}...`,
-            subtitle: subtitleParts.join(' \u2022 '),
-            showChevron: false,
-            multiRow: true,
-            customContentBelow: !isCurrent ? (
-                <View style={styles.sessionActionsRow}>
-                    <TouchableOpacity
-                        onPress={() => handleSwitchSession(session.sessionId)}
-                        style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? '#1E2A38' : '#E6F2FF', borderColor: primaryColor }]}
-                        disabled={switchLoading === session.sessionId || actionLoading === session.sessionId}
-                    >
-                        {switchLoading === session.sessionId ? (
-                            <ActivityIndicator size="small" color={primaryColor} />
-                        ) : (
-                            <Text style={[styles.sessionPillText, { color: primaryColor }]}>Switch</Text>
-                        )}
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                        onPress={() => handleLogoutSession(session.sessionId)}
-                        style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? '#3A1E1E' : '#FFEBEE', borderColor: dangerColor }]}
-                        disabled={actionLoading === session.sessionId || switchLoading === session.sessionId}
-                    >
-                        {actionLoading === session.sessionId ? (
-                            <ActivityIndicator size="small" color={dangerColor} />
-                        ) : (
-                            <Text style={[styles.sessionPillText, { color: dangerColor }]}>Logout</Text>
-                        )}
-                    </TouchableOpacity>
-                </View>
-            ) : (
-                <View style={styles.sessionActionsRow}>
-                    <Text style={[styles.currentBadgeText, { color: successColor }]}>Active</Text>
-                </View>
-            ),
-            selected: isCurrent,
-            dense: true,
-        };
-    });
+            return {
+                id: session.sessionId,
+                icon: isCurrent ? 'shield-checkmark' : 'laptop-outline',
+                iconColor: isCurrent ? successColor : primaryColor,
+                title: isCurrent ? 'Current Session' : `Session ${session.sessionId.substring(0, 8)}...`,
+                subtitle: subtitleParts.join(' \u2022 '),
+                showChevron: false,
+                multiRow: true,
+                customContentBelow: !isCurrent ? (
+                    <View style={styles.sessionActionsRow}>
+                        <TouchableOpacity
+                            onPress={() => handleSwitchSession(session.sessionId)}
+                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? '#1E2A38' : '#E6F2FF', borderColor: primaryColor }]}
+                            disabled={switchLoading === session.sessionId || actionLoading === session.sessionId}
+                        >
+                            {switchLoading === session.sessionId ? (
+                                <ActivityIndicator size="small" color={primaryColor} />
+                            ) : (
+                                <Text style={[styles.sessionPillText, { color: primaryColor }]}>Switch</Text>
+                            )}
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            onPress={() => handleLogoutSession(session.sessionId)}
+                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? '#3A1E1E' : '#FFEBEE', borderColor: dangerColor }]}
+                            disabled={actionLoading === session.sessionId || switchLoading === session.sessionId}
+                        >
+                            {actionLoading === session.sessionId ? (
+                                <ActivityIndicator size="small" color={dangerColor} />
+                            ) : (
+                                <Text style={[styles.sessionPillText, { color: dangerColor }]}>Logout</Text>
+                            )}
+                        </TouchableOpacity>
+                    </View>
+                ) : (
+                    <View style={styles.sessionActionsRow}>
+                        <Text style={[styles.currentBadgeText, { color: successColor }]}>Active</Text>
+                    </View>
+                ),
+                selected: isCurrent,
+                dense: true,
+            };
+        });
+    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, handleLogoutSession, dangerColor]);
+
+    // Memoized bulk action items - prevents unnecessary re-renders when dependencies haven't changed
+    const otherSessionsCount = useMemo(() => 
+        userSessions.filter(s => s.sessionId !== activeSessionId).length,
+        [userSessions, activeSessionId]
+    );
 
-    // Bulk actions as grouped section items
-    const bulkItems = [
+    const bulkItems = useMemo(() => [
         {
             id: 'logout-others',
             icon: 'exit-outline',
             iconColor: primaryColor,
             title: 'Logout Other Sessions',
-            subtitle: userSessions.filter(s => s.sessionId !== activeSessionId).length === 0 ? 'No other sessions' : 'End all sessions except this one',
+            subtitle: otherSessionsCount === 0 ? 'No other sessions' : 'End all sessions except this one',
             onPress: handleLogoutOtherSessions,
             showChevron: false,
             customContent: actionLoading === 'others' ? <ActivityIndicator size="small" color={primaryColor} /> : undefined,
-            disabled: actionLoading === 'others' || userSessions.filter(s => s.sessionId !== activeSessionId).length === 0,
+            disabled: actionLoading === 'others' || otherSessionsCount === 0,
             dense: true,
         },
         {
@@ -248,7 +260,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             disabled: actionLoading === 'all',
             dense: true,
         },
-    ];
+    ], [otherSessionsCount, primaryColor, dangerColor, handleLogoutOtherSessions, handleLogoutAllSessions, actionLoading]);
 
     return (
         <View style={[styles.container, { backgroundColor }]}>

package/src/ui/screens/SignInScreen.tsx

@@ -129,7 +129,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         } finally {
             setIsValidating(false);
         }
-    }, [oxyServices]);
+    }, [oxyServices, sessions]);
 
     // Input change handlers
     const handleUsernameChange = useCallback((text: string) => {