@oxyhq/services 5.13.0 → 5.13.2

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import {
     View,
     Text,
@@ -15,101 +14,18 @@ import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { Header, Section, GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
-
-// Supported languages with their metadata
-const SUPPORTED_LANGUAGES = [
-    {
-        id: 'en-US',
-        name: 'English',
-        nativeName: 'English',
-        flag: '🇺🇸',
-        icon: 'language-outline',
-        color: '#007AFF',
-    },
-    {
-        id: 'es-ES',
-        name: 'Spanish',
-        nativeName: 'Español',
-        flag: '🇪🇸',
-        icon: 'language-outline',
-        color: '#FF3B30',
-    },
-    {
-        id: 'ca-ES',
-        name: 'Catalan',
-        nativeName: 'Català',
-        flag: '🇪🇸',
-        icon: 'language-outline',
-        color: '#0CA678',
-    },
-    {
-        id: 'fr-FR',
-        name: 'French',
-        nativeName: 'Français',
-        flag: '🇫🇷',
-        icon: 'language-outline',
-        color: '#5856D6',
-    },
-    {
-        id: 'de-DE',
-        name: 'German',
-        nativeName: 'Deutsch',
-        flag: '🇩🇪',
-        icon: 'language-outline',
-        color: '#FF9500',
-    },
-    {
-        id: 'it-IT',
-        name: 'Italian',
-        nativeName: 'Italiano',
-        flag: '🇮🇹',
-        icon: 'language-outline',
-        color: '#34C759',
-    },
-    {
-        id: 'pt-PT',
-        name: 'Portuguese',
-        nativeName: 'Português',
-        flag: '🇵🇹',
-        icon: 'language-outline',
-        color: '#AF52DE',
-    },
-    {
-        id: 'ja-JP',
-        name: 'Japanese',
-        nativeName: '日本語',
-        flag: '🇯🇵',
-        icon: 'language-outline',
-        color: '#FF2D92',
-    },
-    {
-        id: 'ko-KR',
-        name: 'Korean',
-        nativeName: '한국어',
-        flag: '🇰🇷',
-        icon: 'language-outline',
-        color: '#32D74B',
-    },
-    {
-        id: 'zh-CN',
-        name: 'Chinese',
-        nativeName: '中文',
-        flag: '🇨🇳',
-        icon: 'language-outline',
-        color: '#FF9F0A',
-    },
-    {
-        id: 'ar-SA',
-        name: 'Arabic',
-        nativeName: 'العربية',
-        flag: '🇸🇦',
-        icon: 'language-outline',
-        color: '#30B0C7',
-    },
-];
+import { SUPPORTED_LANGUAGES } from '../../utils/languageUtils';
 
 interface LanguageSelectorScreenProps extends BaseScreenProps { }
 
+/**
+ * LanguageSelectorScreen - Optimized for performance
+ * 
+ * Performance optimizations:
+ * - useMemo for language items to prevent recreation on every render
+ * - useCallback for handlers to prevent unnecessary re-renders
+ * - Memoized current language section
+ */
 const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     goBack,
     onClose,
@@ -121,20 +37,27 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
     const colors = useThemeColors(theme);
     const [isLoading, setIsLoading] = useState(false);
 
-    const handleLanguageSelect = async (languageId: string) => {
-        if (languageId === currentLanguage) {
-            return; // Already selected
+    // Memoize the language select handler to prevent recreation on every render
+    const handleLanguageSelect = useCallback(async (languageId: string) => {
+        if (languageId === currentLanguage || isLoading) {
+            return; // Already selected or loading
         }
 
         setIsLoading(true);
 
         try {
+            let serverSyncFailed = false;
+            
             // If signed in, persist preference to backend user settings
             if (isAuthenticated && user?.id) {
                 try {
                     await oxyServices.updateProfile({ language: languageId });
                 } catch (e: any) {
-                    console.warn('Failed to update language on server, falling back to local storage', e);
+                    // Server sync failed, but we'll save locally anyway
+                    serverSyncFailed = true;
+                    if (__DEV__) {
+                        console.warn('Failed to sync language to server (will save locally only):', e?.message || e);
+                    }
                 }
             }
 
@@ -142,34 +65,71 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             await setLanguage(languageId);
 
             const selectedLang = SUPPORTED_LANGUAGES.find(lang => lang.id === languageId);
+            
+            // Show success message (language is saved locally regardless of server sync)
             toast.success(t('language.changed', { lang: selectedLang?.name || languageId }));
+            
+            // Log server sync failure only in dev mode (user experience is still good - saved locally)
+            if (serverSyncFailed && __DEV__) {
+                console.warn('Language saved locally but server sync failed');
+            }
 
             setIsLoading(false);
             // Close the bottom sheet if possible; otherwise, go back
             if (onClose) onClose(); else goBack();
 
         } catch (error) {
+            // Only show error if local storage also failed
             console.error('Error saving language preference:', error);
             toast.error('Failed to save language preference');
             setIsLoading(false);
         }
-    };
+    }, [currentLanguage, isLoading, isAuthenticated, user?.id, oxyServices, setLanguage, t, onClose, goBack]);
+
+    // Memoize language items to prevent recreation on every render
+    const languageItems = useMemo(() => 
+        SUPPORTED_LANGUAGES.map(language => ({
+            id: language.id,
+            title: language.name,
+            subtitle: language.nativeName,
+            customIcon: (
+                <View style={[styles.languageFlag, { backgroundColor: `${language.color}20` }]}>
+                    <Text style={styles.flagEmoji}>{language.flag}</Text>
+                </View>
+            ),
+            iconColor: language.color,
+            selected: currentLanguage === language.id,
+            onPress: () => handleLanguageSelect(language.id),
+            dense: true,
+        })), 
+        [currentLanguage, handleLanguageSelect]
+    );
 
-    // Create grouped items for the language list
-    const languageItems = SUPPORTED_LANGUAGES.map(language => ({
-        id: language.id,
-        title: language.name,
-        subtitle: language.nativeName,
-        customIcon: (
-            <View style={[styles.languageFlag, { backgroundColor: `${language.color}20` }]}>
-                <Text style={styles.flagEmoji}>{language.flag}</Text>
-            </View>
-        ),
-        iconColor: language.color,
-        selected: currentLanguage === language.id,
-        onPress: () => handleLanguageSelect(language.id),
-        dense: true,
-    }));
+    // Memoize current language data to prevent recalculation
+    const currentLanguageData = useMemo(() => {
+        if (!currentLanguage) return null;
+        return SUPPORTED_LANGUAGES.find(lang => lang.id === currentLanguage);
+    }, [currentLanguage]);
+
+    // Memoize current language section items
+    const currentLanguageItems = useMemo(() => {
+        if (!currentLanguageData) return [];
+        return [{
+            id: `current-${currentLanguageData.id}`,
+            title: currentLanguageData.name,
+            subtitle: currentLanguageData.nativeName,
+            customIcon: (
+                <View style={[styles.languageFlag, { backgroundColor: `${currentLanguageData.color}20` }]}>
+                    <Text style={styles.flagEmoji}>{currentLanguageData.flag}</Text>
+                </View>
+            ),
+            iconColor: currentLanguageData.color,
+            selected: false,
+            showChevron: false,
+            dense: true,
+            disabled: true,
+        }];
+    }, [currentLanguageData]);
 
     return (
         <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
@@ -182,36 +142,18 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                 elevation="subtle"
             />
 
-            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+            <ScrollView 
+                style={styles.content} 
+                showsVerticalScrollIndicator={false}
+                removeClippedSubviews={true}
+            >
                 {/* Current selection */}
-                {currentLanguage && (
+                {currentLanguage && currentLanguageItems.length > 0 && (
                     <Section title={t('language.current')} theme={theme} isFirst={true}>
-                        {(() => {
-                            const current = SUPPORTED_LANGUAGES.find(lang => lang.id === currentLanguage);
-                            if (!current) return null;
-                            return (
-                                <GroupedSection
-                                    items={[
-                                        {
-                                            id: `current-${current.id}`,
-                                            title: current.name,
-                                            subtitle: current.nativeName,
-                                            customIcon: (
-                                                <View style={[styles.languageFlag, { backgroundColor: `${current.color}20` }]}>
-                                                    <Text style={styles.flagEmoji}>{current.flag}</Text>
-                                                </View>
-                                            ),
-                                            iconColor: current.color,
-                                            selected: false,
-                                            showChevron: false,
-                                            dense: true,
-                                            disabled: true,
-                                        },
-                                    ]}
-                                    theme={theme}
-                                />
-                            );
-                        })()}
+                        <GroupedSection
+                            items={currentLanguageItems}
+                            theme={theme}
+                        />
                     </Section>
                 )}
 
@@ -348,4 +290,5 @@ const styles = StyleSheet.create({
     },
 });
 
-export default LanguageSelectorScreen;
+// Export memoized component to prevent unnecessary re-renders
+export default React.memo(LanguageSelectorScreen);

package/src/ui/screens/SignInScreen.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { useThemeColors } from '../styles';
@@ -29,18 +29,9 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     const [validationStatus, setValidationStatus] = useState<'idle' | 'validating' | 'valid' | 'invalid'>(
         initialUserProfile ? 'valid' : 'idle'
     );
+    const [existingSession, setExistingSession] = useState<any>(null);
 
-    // Cache for validation results to prevent repeated API calls
-    const validationCache = useRef<Map<string, { profile: any }>>(new Map());
-
-    const { login, completeMfaLogin, isLoading, user, isAuthenticated, sessions, oxyServices } = useOxy();
-
-    // Only log props in development mode to reduce console noise
-    if (__DEV__) {
-        console.log('SignInScreen props:', { initialStep, initialUsername, initialUserProfile });
-        console.log('🔧 oxyServices available:', !!oxyServices);
-        console.log('🔧 getProfileByUsername available:', typeof oxyServices?.getProfileByUsername);
-    }
+    const { login, completeMfaLogin, isLoading, user, isAuthenticated, sessions, oxyServices, switchSession } = useOxy();
     const colors = useThemeColors(theme);
 
     // Check if this should be treated as "Add Account" mode
@@ -68,14 +59,13 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             return false;
         }
 
-        // Check cache first
-        const cached = validationCache.current.get(usernameToValidate);
-        if (cached) {
-            if (__DEV__) console.log('✅ Username found in cache:', cached.profile);
-            setUserProfile(cached.profile);
-            setValidationStatus('valid');
-            setErrorMessage('');
-            return true;
+        const offlineDetected = typeof navigator !== 'undefined' && navigator.onLine === false;
+
+        if (offlineDetected) {
+            if (__DEV__) console.log('⚠️ Offline detected, skipping username validation');
+            setValidationStatus('invalid');
+            setErrorMessage('No connection. Check your internet connection and try again.');
+            return false;
         }
 
         if (__DEV__) console.log('🔄 Validating username with API...');
@@ -97,14 +87,24 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
                 if (__DEV__) console.log('✅ Username is valid:', profileData);
                 setUserProfile(profileData);
+                
+                // Check if this account is already signed in
+                const profileUserId = profile.id?.toString();
+                const existing = sessions?.find(s => {
+                    const sessionUserId = s.userId?.toString();
+                    return sessionUserId === profileUserId;
+                });
+                
+                if (existing) {
+                    setExistingSession(existing);
+                    if (__DEV__) console.log('✅ Account already signed in:', existing);
+                } else {
+                    setExistingSession(null);
+                }
+                
                 setValidationStatus('valid');
                 setErrorMessage('');
 
-                // Cache the result
-                validationCache.current.set(usernameToValidate, {
-                    profile: profileData
-                });
-
                 return true;
             } else {
                 if (__DEV__) console.log('❌ Username not found');
@@ -116,25 +116,29 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             if (__DEV__) console.log('🚨 Validation error:', error);
 
             // If user not found (404), username doesn't exist
-            if (error.status === 404 || error.code === 'USER_NOT_FOUND') {
+            if (error?.status === 404 || error?.code === 'USER_NOT_FOUND') {
                 console.log('❌ Username not found (404)');
                 setValidationStatus('invalid');
                 setErrorMessage('Username not found.');
                 return false;
             }
 
-            // For development/testing: if API fails, allow any 3+ character username
-            if (__DEV__) {
-                if (__DEV__) console.log('⚠️ Development mode: allowing username due to API error');
-                setValidationStatus('valid');
-                setErrorMessage('');
-                return true;
-            }
+            const isNetworkError =
+                error?.status === 0 ||
+                error?.code === 'ECONNABORTED' ||
+                error?.code === 'ERR_NETWORK' ||
+                error?.message?.toLowerCase?.().includes('network request failed') ||
+                error?.message?.toLowerCase?.().includes('network error') ||
+                error?.name === 'AbortError' ||
+                error?.type === 'network';
 
-            // For other errors, show generic message
             console.error('Username validation error:', error);
             setValidationStatus('invalid');
-            setErrorMessage('Unable to validate username. Please try again.');
+            setErrorMessage(
+                isNetworkError
+                    ? 'No connection. Check your internet connection and try again.'
+                    : 'Unable to validate username. Please try again.'
+            );
             return false;
         } finally {
             setIsValidating(false);
@@ -177,6 +181,22 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
     const [mfaToken, setMfaToken] = useState<string | null>(null);
 
+    const handleContinueWithExistingAccount = useCallback(async () => {
+        if (!existingSession) return;
+        
+        try {
+            setErrorMessage('');
+            await switchSession(existingSession.sessionId);
+            // Get the user for the authenticated callback
+            const currentUser = await oxyServices.getUserBySession(existingSession.sessionId);
+            if (onAuthenticated) {
+                onAuthenticated(currentUser);
+            }
+        } catch (error: any) {
+            setErrorMessage(error.message || 'Failed to switch account');
+        }
+    }, [existingSession, switchSession, oxyServices, onAuthenticated]);
+
     const handleSignIn = useCallback(async () => {
         if (!password) {
             setErrorMessage('Please enter your password.');
@@ -186,6 +206,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             setErrorMessage('Please enter a valid username first.');
             return;
         }
+        
         try {
             setErrorMessage('');
             const user = await login(username, password);
@@ -201,13 +222,6 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         }
     }, [username, password, login, onAuthenticated, userProfile]);
 
-    // Simple cleanup on unmount - that's all we need for username validation
-    useEffect(() => {
-        return () => {
-            validationCache.current.clear();
-        };
-    }, []);
-
     // Step configurations
     const steps: StepConfig[] = useMemo(() => {
         const base: StepConfig[] = [
@@ -259,6 +273,8 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             handleInputBlur,
             handleSignIn, // Add sign-in function for password step
             mfaToken,
+            existingSession,
+            handleContinueWithExistingAccount,
         },
         ...(mfaToken ? [{
             username,
@@ -272,7 +288,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         username, password, errorMessage, validationStatus, userProfile, mfaToken,
         isValidating, isInputFocused, isAddAccountMode, user, showPassword,
         isLoading, handleUsernameChange, handlePasswordChange, handleInputFocus, handleInputBlur,
-        validateUsername, handleSignIn, completeMfaLogin
+        validateUsername, handleSignIn, completeMfaLogin, existingSession, handleContinueWithExistingAccount
     ]);
 
     return (

package/src/ui/screens/SignUpScreen.tsx

@@ -9,6 +9,7 @@ import SignUpWelcomeStep from './steps/SignUpWelcomeStep';
 import SignUpIdentityStep from './steps/SignUpIdentityStep';
 import SignUpSecurityStep from './steps/SignUpSecurityStep';
 import SignUpSummaryStep from './steps/SignUpSummaryStep';
+import { TTLCache, registerCacheForCleanup } from '../../utils/cache';
 
 // Types for better type safety
 interface ValidationState {
@@ -51,8 +52,16 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
     // Error message state
     const [errorMessage, setErrorMessage] = useState('');
 
-    // Username validation with caching
-    const usernameCache = useRef<Map<string, { available: boolean; timestamp: number }>>(new Map());
+    // Username validation with caching - uses centralized cache
+    const usernameCache = useRef(new TTLCache<boolean>(5 * 60 * 1000)); // 5 minutes cache
+    
+    // Register cache for cleanup on mount
+    useEffect(() => {
+        registerCacheForCleanup(usernameCache.current);
+        return () => {
+            usernameCache.current.clear();
+        };
+    }, []);
 
     const validateUsername = useCallback(async (usernameToValidate: string): Promise<boolean> => {
         if (!usernameToValidate || usernameToValidate.length < USERNAME_MIN_LENGTH) {
@@ -62,9 +71,8 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
 
         // Check cache first
         const cached = usernameCache.current.get(usernameToValidate);
-        const now = Date.now();
-        if (cached && (now - cached.timestamp) < 5 * 60 * 1000) {
-            const isValid = cached.available;
+        if (cached !== null) {
+            const isValid = cached;
             setValidationState({
                 status: isValid ? 'valid' : 'invalid',
                 message: isValid ? '' : 'Username is already taken'
@@ -79,10 +87,7 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
             const isValid = result.available;
 
             // Cache the result
-            usernameCache.current.set(usernameToValidate, {
-                available: isValid,
-                timestamp: now
-            });
+            usernameCache.current.set(usernameToValidate, isValid);
 
             setValidationState({
                 status: isValid ? 'valid' : 'invalid',
@@ -146,12 +151,6 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
         }
     }, [username, email, password, confirmPassword, validateEmail, validatePassword, signUp, navigate]);
 
-    // Cleanup cache on unmount
-    useEffect(() => {
-        return () => {
-            usernameCache.current.clear();
-        };
-    }, []);
 
     // Step configurations
     const steps: StepConfig[] = useMemo(() => [