@oxyhq/services 5.13.1 → 5.13.3

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

@@ -32,13 +32,6 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     const [existingSession, setExistingSession] = useState<any>(null);
 
     const { login, completeMfaLogin, isLoading, user, isAuthenticated, sessions, oxyServices, switchSession } = 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 colors = useThemeColors(theme);
 
     // Check if this should be treated as "Add Account" mode

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(() => [

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -69,8 +69,19 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
     const [currentStep, setCurrentStep] = useState(0);
+    // Track avatar separately to ensure it updates immediately after selection
+    const [selectedAvatarId, setSelectedAvatarId] = useState<string | undefined>(currentUser?.avatar);
 
-    const avatarUri = currentUser?.avatar ? oxyServices.getFileDownloadUrl(currentUser.avatar as string, 'thumb') : undefined;
+    // Update selectedAvatarId when user changes
+    useEffect(() => {
+        if (user?.avatar) {
+            setSelectedAvatarId(user.avatar);
+        } else if (newUser?.avatar) {
+            setSelectedAvatarId(newUser.avatar);
+        }
+    }, [user?.avatar, newUser?.avatar]);
+
+    const avatarUri = selectedAvatarId ? oxyServices.getFileDownloadUrl(selectedAvatarId, 'thumb') : undefined;
 
     // Steps content
     const welcomeTitle = currentUser?.username
@@ -100,7 +111,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const totalSteps = steps.length;
     const avatarStepIndex = steps.findIndex(s => s.showAvatar);
 
-    const animateToStep = (next: number) => {
+    const animateToStepCallback = useCallback((next: number) => {
         Animated.timing(fadeAnim, { toValue: 0, duration: 180, useNativeDriver: Platform.OS !== 'web' }).start(() => {
             setCurrentStep(next);
             slideAnim.setValue(-40);
@@ -109,40 +120,59 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                 Animated.spring(slideAnim, { toValue: 0, useNativeDriver: Platform.OS !== 'web', friction: 9 })
             ]).start();
         });
-    };
+    }, [fadeAnim, slideAnim]);
 
-    const nextStep = useCallback(() => { if (currentStep < totalSteps - 1) animateToStep(currentStep + 1); }, [currentStep, totalSteps]);
-    const prevStep = useCallback(() => { if (currentStep > 0) animateToStep(currentStep - 1); }, [currentStep]);
-    const skipToAvatar = useCallback(() => { if (avatarStepIndex >= 0) animateToStep(avatarStepIndex); }, [avatarStepIndex]);
+    const nextStep = useCallback(() => { if (currentStep < totalSteps - 1) animateToStepCallback(currentStep + 1); }, [currentStep, totalSteps, animateToStepCallback]);
+    const prevStep = useCallback(() => { if (currentStep > 0) animateToStepCallback(currentStep - 1); }, [currentStep, animateToStepCallback]);
+    const skipToAvatar = useCallback(() => { if (avatarStepIndex >= 0) animateToStepCallback(avatarStepIndex); }, [avatarStepIndex, animateToStepCallback]);
     const finish = useCallback(() => { if (onAuthenticated && currentUser) onAuthenticated(currentUser); }, [onAuthenticated, currentUser]);
     const openAvatarPicker = useCallback(() => {
+        // Ensure we're on the avatar step before opening picker
+        if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
+            animateToStepCallback(avatarStepIndex);
+        }
+
         navigate('FileManagement', {
             selectMode: true,
             multiSelect: false,
             disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
-            afterSelect: 'back',
+            afterSelect: 'none', // Don't navigate away - stay on current screen
             onSelect: async (file: any) => {
                 if (!file.contentType.startsWith('image/')) {
                     toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file');
                     return;
                 }
                 try {
-                    // Update file visibility to public for avatar
-                    try {
-                        await oxyServices.assetUpdateVisibility(file.id, 'public');
-                        console.log('[WelcomeNewUser] Avatar visibility updated to public');
-                    } catch (visError) {
-                        console.warn('[WelcomeNewUser] Failed to update avatar visibility, continuing anyway:', visError);
+                    // Update file visibility to public for avatar (skip if temporary asset ID)
+                    if (file.id && !file.id.startsWith('temp-')) {
+                        try {
+                            await oxyServices.assetUpdateVisibility(file.id, 'public');
+                            console.log('[WelcomeNewUser] Avatar visibility updated to public');
+                        } catch (visError: any) {
+                            // Only log non-404 errors (404 means asset doesn't exist yet, which is OK)
+                            if (visError?.response?.status !== 404) {
+                                console.warn('[WelcomeNewUser] Failed to update avatar visibility, continuing anyway:', visError);
+                            }
+                        }
                     }
 
+                    // Update the avatar immediately in local state
+                    setSelectedAvatarId(file.id);
+                    
+                    // Update user in store
                     await updateUser({ avatar: file.id }, oxyServices);
                     toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
+                    
+                    // Ensure we stay on the avatar step
+                    if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
+                        animateToStepCallback(avatarStepIndex);
+                    }
                 } catch (e: any) {
                     toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
                 }
             }
         });
-    }, [navigate, updateUser, oxyServices]);
+    }, [navigate, updateUser, oxyServices, currentStep, avatarStepIndex, animateToStepCallback, t]);
 
     const step = steps[currentStep];
     const pillButtons = useMemo(() => {
@@ -201,7 +231,14 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                         )}
                         {step.showAvatar && (
                             <View style={[styles.avatarSection, styles.sectionSpacing]}>
-                                <Avatar size={120} name={currentUser?.username} uri={avatarUri} theme={theme} style={styles.avatar} />
+                                <Avatar 
+                                    size={120} 
+                                    name={currentUser?.name?.full || currentUser?.name?.first || currentUser?.username} 
+                                    uri={avatarUri} 
+                                    theme={theme} 
+                                    backgroundColor={colors.primary + '20'}
+                                    style={styles.avatar} 
+                                />
                                 <TouchableOpacity style={[styles.changeAvatarButton, { backgroundColor: colors.primary }]} onPress={openAvatarPicker}>
                                     <Ionicons name="image-outline" size={18} color="#FFFFFF" />
                                     <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>

package/src/ui/screens/internal/SignInPasswordStep.tsx

@@ -9,6 +9,7 @@ import Animated, {
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../../components/Avatar';
 import { useI18n } from '../../hooks/useI18n';
+import { useOxy } from '../../context/OxyContext';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 
@@ -59,6 +60,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
 }) => {
     const inputRef = useRef<TextInput>(null);
     const { t } = useI18n();
+    const { oxyServices } = useOxy();
 
     // Animated styles - properly memoized to prevent re-renders
     const containerAnimatedStyle = useAnimatedStyle(() => {
@@ -101,18 +103,14 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
             containerAnimatedStyle
         ]}>
             <View style={styles.modernUserProfileContainer}>
-                <Animated.View style={[
-                    styles.avatarContainer,
-                    logoAnimatedStyle
-                ]}>
+                <Animated.View style={logoAnimatedStyle}>
                     <Avatar
                         name={userProfile?.displayName || userProfile?.name || username}
                         size={100}
                         theme={theme as 'light' | 'dark'}
-                        style={styles.modernUserAvatar}
                         backgroundColor={colors.primary + '20'}
+                        uri={userProfile?.avatar && oxyServices ? oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') : undefined}
                     />
-                    <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
                 </Animated.View>
                 <Text style={[styles.modernUserDisplayName, { color: colors.text }]}>
                     {userProfile?.displayName || userProfile?.name || username}

package/src/ui/screens/steps/SignInPasswordStep.tsx

@@ -6,6 +6,7 @@ import Avatar from '../../components/Avatar';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 import { useI18n } from '../../hooks/useI18n';
+import { useOxy } from '../../context/OxyContext';
 import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface SignInPasswordStepProps {
@@ -69,6 +70,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
 }) => {
     const inputRef = useRef<any>(null);
     const { t } = useI18n();
+    const { oxyServices } = useOxy();
     const baseStyles = stepStyles;
     const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
 
@@ -114,16 +116,13 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
         return (
             <>
                 <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.userProfileContainer]}>
-                    <View style={stylesheet.avatarContainer}>
                         <Avatar
                             name={userProfile?.displayName || userProfile?.name || username}
                             size={100}
                             theme={theme as 'light' | 'dark'}
-                            style={styles.modernUserAvatar}
                             backgroundColor={colors.primary + '20'}
+                        uri={userProfile?.avatar && oxyServices ? oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') : undefined}
                         />
-                        <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
-                    </View>
                     <Text style={[styles.modernUserDisplayName, stylesheet.displayName, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>
                         {userProfile?.displayName || userProfile?.name || username}
                     </Text>
@@ -186,16 +185,13 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     return (
         <>
             <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.userProfileContainer]}>
-                <View style={stylesheet.avatarContainer}>
                     <Avatar
                         name={userProfile?.displayName || userProfile?.name || username}
                         size={100}
                         theme={theme as 'light' | 'dark'}
-                        style={styles.modernUserAvatar}
                         backgroundColor={colors.primary + '20'}
+                    uri={userProfile?.avatar && oxyServices ? oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') : undefined}
                     />
-                    <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
-                </View>
                 <Text style={[styles.modernUserDisplayName, stylesheet.displayName, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>
                     {userProfile?.displayName || userProfile?.name || username}
                 </Text>