@oxyhq/services 5.4.1 → 5.4.3

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import {
     View,
     Text,
@@ -20,6 +20,15 @@ import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
 
+/**
+ * AccountOverviewScreen - Optimized for performance
+ * 
+ * Performance optimizations implemented:
+ * - useMemo for theme calculations (only recalculates when theme changes)
+ * - useMemo for additional accounts filtering (only recalculates when dependencies change)
+ * - useCallback for event handlers to prevent unnecessary re-renders
+ * - React.memo wrapper to prevent re-renders when props haven't changed
+ */
 const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
@@ -30,18 +39,26 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
 
-    const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#d169e5';
-    const dangerColor = '#D32F2F';
-    const iconColor = isDarkTheme ? '#BBBBBB' : '#666666';
-
-    // Get additional accounts from sessions (excluding current user)
-    const additionalAccounts = sessions.filter(session => 
-        session.sessionId !== activeSessionId && session.userId !== user?.id
+    // Memoize theme-related calculations to prevent unnecessary recalculations
+    const themeStyles = useMemo(() => {
+        const isDarkTheme = theme === 'dark';
+        return {
+            isDarkTheme,
+            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
+            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
+            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
+            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
+            primaryColor: '#d169e5',
+            dangerColor: '#D32F2F',
+            iconColor: isDarkTheme ? '#BBBBBB' : '#666666',
+        };
+    }, [theme]);
+
+    // Memoize additional accounts filtering to prevent recalculation on every render
+    const additionalAccounts = useMemo(() => 
+        sessions.filter(session => 
+            session.sessionId !== activeSessionId && session.userId !== user?.id
+        ), [sessions, activeSessionId, user?.id]
     );
 
     // Load user profiles for additional accounts
@@ -98,7 +115,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         language: 'English',
     };
 
-    const handleLogout = async () => {
+    // Memoize event handlers to prevent recreation on every render
+    const handleLogout = useCallback(async () => {
         try {
             await logout();
             if (onClose) {
@@ -108,9 +126,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
             console.error('Logout failed:', error);
             toast.error('There was a problem signing you out. Please try again.');
         }
-    };
+    }, [logout, onClose]);
 
-    const confirmLogout = () => {
+    const confirmLogout = useCallback(() => {
         Alert.alert(
             'Sign Out',
             'Are you sure you want to sign out?',
@@ -127,13 +145,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
             ],
             { cancelable: true }
         );
-    };
+    }, [handleLogout]);
 
-    const handleAddAccount = () => {
+    const handleAddAccount = useCallback(() => {
         toast.info('Add another account feature coming soon!');
-    };
+    }, []);
 
-    const handleSignOutAll = () => {
+    const handleSignOutAll = useCallback(() => {
         Alert.alert(
             'Sign Out of All Accounts',
             'Are you sure you want to sign out of all accounts?',
@@ -150,20 +168,20 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
             ],
             { cancelable: true }
         );
-    };
+    }, [handleLogout]);
 
     if (!user) {
         return (
-            <View style={[styles.container, { backgroundColor }]}>
-                <Text style={[styles.message, { color: textColor }]}>Not signed in</Text>
+            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+                <Text style={[styles.message, { color: themeStyles.textColor }]}>Not signed in</Text>
             </View>
         );
     }
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
-                <ActivityIndicator size="large" color={primaryColor} />
+            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }]}>
+                <ActivityIndicator size="large" color={themeStyles.primaryColor} />
             </View>
         );
     }
@@ -676,4 +694,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default AccountOverviewScreen;
+export default React.memo(AccountOverviewScreen);

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import {
     View,
     Text,
@@ -51,19 +51,25 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     const [tempLocation, setTempLocation] = useState('');
     const [tempWebsite, setTempWebsite] = useState('');
 
-    const isDarkTheme = theme === 'dark';
-    const backgroundColor = isDarkTheme ? '#121212' : '#f2f2f2';
-    const primaryColor = '#007AFF';
+    // Memoize theme-related calculations to prevent unnecessary recalculations
+    const themeStyles = useMemo(() => {
+        const isDarkTheme = theme === 'dark';
+        return {
+            isDarkTheme,
+            backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
+            primaryColor: '#007AFF',
+        };
+    }, [theme]);
 
-    // Animation functions
-    const animateSaveButton = (toValue: number) => {
+    // Memoize animation function to prevent recreation on every render
+    const animateSaveButton = useCallback((toValue: number) => {
         Animated.spring(saveButtonScale, {
             toValue,
             useNativeDriver: true,
             tension: 150,
             friction: 8,
         }).start();
-    };
+    }, [saveButtonScale]);
 
     // Load user data
     useEffect(() => {
@@ -280,20 +286,20 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                             style={[
                                 config.multiline ? styles.editingFieldTextArea : styles.editingFieldInput,
                                 { 
-                                    backgroundColor: isDarkTheme ? '#333' : '#fff',
-                                    color: isDarkTheme ? '#fff' : '#000',
-                                    borderColor: primaryColor
+                                    backgroundColor: themeStyles.isDarkTheme ? '#333' : '#fff',
+                                    color: themeStyles.isDarkTheme ? '#fff' : '#000',
+                                    borderColor: themeStyles.primaryColor
                                 }
                             ]}
                             value={tempValue}
                             onChangeText={setTempValue}
                             placeholder={config.placeholder}
-                            placeholderTextColor={isDarkTheme ? '#aaa' : '#999'}
+                            placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
                             multiline={config.multiline}
                             numberOfLines={config.multiline ? 6 : 1}
                             keyboardType={config.keyboardType}
                             autoFocus
-                            selectionColor={primaryColor}
+                            selectionColor={themeStyles.primaryColor}
                         />
                     </View>
                 </View>
@@ -340,14 +346,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
     if (authLoading || !user) {
         return (
-            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
-                <ActivityIndicator size="large" color={primaryColor} />
+            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }]}>
+                <ActivityIndicator size="large" color={themeStyles.primaryColor} />
             </View>
         );
     }
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             {/* Header */}
             <View style={styles.header}>
                 {editingField ? (
@@ -401,9 +407,9 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                                 disabled={isSaving}
                             >
                                 {isSaving ? (
-                                    <ActivityIndicator size="small" color={primaryColor} />
+                                    <ActivityIndicator size="small" color={themeStyles.primaryColor} />
                                 ) : (
-                                    <Ionicons name="checkmark" size={24} color={primaryColor} />
+                                    <Ionicons name="checkmark" size={24} color={themeStyles.primaryColor} />
                                 )}
                             </TouchableOpacity>
                         </Animated.View>
@@ -799,4 +805,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default AccountSettingsScreen;
+export default React.memo(AccountSettingsScreen);