@oxyhq/services 5.13.1 → 5.13.3

package/src/ui/hooks/useSessionSocket.ts

@@ -13,10 +13,35 @@ interface UseSessionSocketProps {
 
 export function useSessionSocket({ userId, activeSessionId, refreshSessions, logout, baseURL, onRemoteSignOut }: UseSessionSocketProps) {
   const socketRef = useRef<any>(null);
+  const joinedRoomRef = useRef<string | null>(null);
+  
+  // Store callbacks in refs to avoid re-joining when they change
+  const refreshSessionsRef = useRef(refreshSessions);
+  const logoutRef = useRef(logout);
+  const onRemoteSignOutRef = useRef(onRemoteSignOut);
+  const activeSessionIdRef = useRef(activeSessionId);
 
+  // Update refs when callbacks change
   useEffect(() => {
-    if (!userId || !baseURL) return;
+    refreshSessionsRef.current = refreshSessions;
+    logoutRef.current = logout;
+    onRemoteSignOutRef.current = onRemoteSignOut;
+    activeSessionIdRef.current = activeSessionId;
+  }, [refreshSessions, logout, onRemoteSignOut, activeSessionId]);
 
+  useEffect(() => {
+    if (!userId || !baseURL) {
+      // Clean up if userId or baseURL becomes invalid
+      if (socketRef.current && joinedRoomRef.current) {
+        socketRef.current.emit('leave', { userId: joinedRoomRef.current });
+        joinedRoomRef.current = null;
+      }
+      return;
+    }
+
+    const roomId = `user:${userId}`;
+    
+    // Only create socket if it doesn't exist
     if (!socketRef.current) {
       socketRef.current = io(baseURL, {
         transports: ['websocket'],
@@ -24,30 +49,59 @@ export function useSessionSocket({ userId, activeSessionId, refreshSessions, log
     }
     const socket = socketRef.current;
 
-    socket.on('connect', () => {
-      console.log('Socket connected:', socket.id);
-    });
+    // Only join if we haven't already joined this room
+    if (joinedRoomRef.current !== roomId) {
+      // Leave previous room if switching users
+      if (joinedRoomRef.current) {
+        socket.emit('leave', { userId: joinedRoomRef.current });
+      }
+      
+      socket.emit('join', { userId: roomId });
+      joinedRoomRef.current = roomId;
+      
+      if (__DEV__) {
+        console.log('Emitting join for room:', roomId);
+      }
+    }
 
-    socket.emit('join', { userId: `user:${userId}` });
-    console.log('Emitting join for room:', `user:${userId}`);
+    // Set up event handlers (only once per socket instance)
+    const handleConnect = () => {
+      if (__DEV__) {
+        console.log('Socket connected:', socket.id);
+      }
+    };
 
-    socket.on('session_update', (data: { type: string; sessionId: string }) => {
-      console.log('Received session_update:', data);
+    const handleSessionUpdate = (data: { type: string; sessionId: string }) => {
+      if (__DEV__) {
+        console.log('Received session_update:', data);
+      }
       
-      // Always refresh sessions to get the latest state
-      refreshSessions();
+      // Use refs to get latest callback versions
+      refreshSessionsRef.current();
       
       // 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();
+      if (data.sessionId === activeSessionIdRef.current) {
+        if (onRemoteSignOutRef.current) {
+          onRemoteSignOutRef.current();
+        } else {
+          toast.info('You have been signed out remotely.');
+        }
+        logoutRef.current();
       }
-    });
+    };
+
+    socket.on('connect', handleConnect);
+    socket.on('session_update', handleSessionUpdate);
 
     return () => {
-      socket.emit('leave', { userId: `user:${userId}` });
-      socket.off('session_update');
+      socket.off('connect', handleConnect);
+      socket.off('session_update', handleSessionUpdate);
+      
+      // Only leave on unmount if we're still in this room
+      if (joinedRoomRef.current === roomId) {
+        socket.emit('leave', { userId: roomId });
+        joinedRoomRef.current = null;
+      }
     };
-  }, [userId, baseURL, activeSessionId, refreshSessions, logout, onRemoteSignOut]);
+  }, [userId, baseURL]); // Only depend on userId and baseURL - callbacks are in refs
 } 

package/src/ui/index.ts

@@ -7,7 +7,7 @@
 import isFrontend from './isFrontend';
 
 // Real UI exports
-let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useOxyAuth, useOxyUser, useOxyKarma, useOxyPayments, useOxyDevices, useOxyNotifications, useOxySocket, useOxyQR, OxyContextProvider, OxyContextState, OxyContextProviderProps, useFollow, ProfileScreen, OxyRouter, useAuthStore, fontFamilies, fontStyles, toast;
+let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useOxyAuth, useOxyUser, useOxyKarma, useOxyPayments, useOxyDevices, useOxyNotifications, useOxySocket, useOxyQR, OxyContextProvider, OxyContextState, OxyContextProviderProps, useFollow, ProfileScreen, OxyRouter, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast;
 
 if (isFrontend) {
   OxyProvider = require('./components/OxyProvider').default;
@@ -27,6 +27,7 @@ if (isFrontend) {
   ProfileScreen = require('./screens/ProfileScreen').default;
   OxyRouter = require('./navigation/OxyRouter').default;
   useAuthStore = require('./stores/authStore').useAuthStore;
+  useAccountStore = require('./stores/accountStore').useAccountStore;
   fontFamilies = require('./styles/fonts').fontFamilies;
   fontStyles = require('./styles/fonts').fontStyles;
   toast = require('../lib/sonner').toast;
@@ -51,6 +52,7 @@ if (isFrontend) {
   ProfileScreen = noopComponent;
   OxyRouter = noopComponent;
   useAuthStore = noopHook;
+  useAccountStore = noopHook;
   fontFamilies = {};
   fontStyles = {};
   toast = () => {};
@@ -74,6 +76,7 @@ export {
   ProfileScreen,
   OxyRouter,
   useAuthStore,
+  useAccountStore,
   fontFamilies,
   fontStyles,
   toast

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -25,6 +25,13 @@ import { useAuthStore } from '../stores/authStore';
 import { Header, GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import QRCode from 'react-native-qrcode-svg';
+import { TTLCache, registerCacheForCleanup } from '../../utils/cache';
+
+// Caches for link metadata and location searches
+const linkMetadataCache = new TTLCache<any>(30 * 60 * 1000); // 30 minutes cache for link metadata
+const locationSearchCache = new TTLCache<any[]>(60 * 60 * 1000); // 1 hour cache for location searches
+registerCacheForCleanup(linkMetadataCache);
+registerCacheForCleanup(locationSearchCache);
 
 const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -369,6 +376,13 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
 
     const fetchLinkMetadata = async (url: string) => {
+        // Check cache first
+        const cacheKey = url.toLowerCase().trim();
+        const cached = linkMetadataCache.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+
         try {
             setIsFetchingMetadata(true);
             console.log('Fetching metadata for URL:', url);
@@ -377,20 +391,27 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             const metadata = await oxyServices.fetchLinkMetadata(url);
             console.log('Received metadata:', metadata);
 
-            return {
+            const result = {
                 ...metadata,
                 id: Date.now().toString()
             };
+
+            // Cache the result
+            linkMetadataCache.set(cacheKey, result);
+            return result;
         } catch (error) {
             console.error('Error fetching metadata:', error);
             // Fallback to basic metadata
-            return {
+            const fallback = {
                 url: url.startsWith('http') ? url : 'https://' + url,
                 title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
                 description: 'Link',
                 image: undefined,
                 id: Date.now().toString()
             };
+            // Cache fallback too (shorter TTL)
+            linkMetadataCache.set(cacheKey, fallback, 5 * 60 * 1000); // 5 minutes for fallbacks
+            return fallback;
         } finally {
             setIsFetchingMetadata(false);
         }
@@ -402,12 +423,23 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             return;
         }
 
+        // Check cache first
+        const cacheKey = query.toLowerCase().trim();
+        const cached = locationSearchCache.get(cacheKey);
+        if (cached) {
+            setLocationSearchResults(cached);
+            return;
+        }
+
         try {
             setIsSearchingLocations(true);
             const response = await fetch(
                 `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5&addressdetails=1`
             );
             const data = await response.json();
+            
+            // Cache the results
+            locationSearchCache.set(cacheKey, data);
             setLocationSearchResults(data);
         } catch (error) {
             console.error('Error searching locations:', error);

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import {
     View,
     Text,
@@ -74,8 +74,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const isDarkTheme = theme === 'dark';
     const { t } = useI18n();
 
-    // Modern color scheme
-    const colors = {
+    // Modern color scheme - memoized for performance
+    const colors = useMemo(() => ({
         background: isDarkTheme ? '#000000' : '#FFFFFF',
         surface: isDarkTheme ? '#1C1C1E' : '#F2F2F7',
         card: isDarkTheme ? '#2C2C2E' : '#FFFFFF',
@@ -87,7 +87,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         border: isDarkTheme ? '#38383A' : '#C6C6C8',
         activeCard: isDarkTheme ? '#0A84FF20' : '#007AFF15',
         shadow: isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
-    };
+    }), [isDarkTheme]);
 
     // Refresh sessions when screen loads
     useEffect(() => {
@@ -96,54 +96,72 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         }
     }, [isAuthenticated, activeSessionId]);
 
+    // Memoize session IDs to prevent unnecessary re-renders
+    const sessionIds = useMemo(() => sessions.map(s => s.sessionId).join(','), [sessions]);
+
     // Load user profiles for sessions
+    // Production-ready: Optimized with batching, memoization, and error handling
     useEffect(() => {
-        console.log('AccountSwitcherScreen - sessions changed:', sessions);
-        console.log('AccountSwitcherScreen - sessions length:', sessions.length);
-        console.log('AccountSwitcherScreen - activeSessionId:', activeSessionId);
-        console.log('AccountSwitcherScreen - isAuthenticated:', isAuthenticated);
+        let cancelled = false;
 
         const loadUserProfiles = async () => {
-            if (!sessions.length || !oxyServices) return;
+            if (!sessions.length || !oxyServices || cancelled) return;
+
+            // Sessions are already deduplicated by userId at the core level (OxyContext)
+            const uniqueSessions = sessions;
 
-            const updatedSessions: SessionWithUser[] = sessions.map(session => ({
+            // Initialize loading state
+            setSessionsWithUsers(uniqueSessions.map(session => ({
                 ...session,
                 isLoadingProfile: true,
-            }));
-            setSessionsWithUsers(updatedSessions);
-
-            // Load profiles for each session
-            for (let i = 0; i < sessions.length; i++) {
-                const session = sessions[i];
-                try {
-                    // Try to get user profile using the session
-                    const userProfile = await oxyServices.getUserBySession(session.sessionId);
-
-                    setSessionsWithUsers(prev =>
-                        prev.map(s =>
-                            s.sessionId === session.sessionId
-                                ? { ...s, userProfile, isLoadingProfile: false }
-                                : s
-                        )
-                    );
-                } catch (error) {
-                    console.error(`Failed to load profile for session ${session.sessionId}:`, error);
+            })));
+
+            // Batch load profiles for better performance using batch endpoint
+            try {
+                const sessionIds = uniqueSessions.map(s => s.sessionId);
+                const batchResults = await oxyServices.getUsersBySessions(sessionIds);
+                
+                // Create a map for O(1) lookup
+                const userProfileMap = new Map<string, User | null>();
+                batchResults.forEach(({ sessionId, user }) => {
+                    userProfileMap.set(sessionId, user);
+                });
+
+                if (cancelled) return;
+
+                // Update sessions with loaded profiles - optimized with Map for O(1) lookup
+                setSessionsWithUsers(prev => {
+                    return prev.map(session => {
+                        const userProfile = userProfileMap.get(session.sessionId);
+                        return {
+                            ...session,
+                            userProfile: userProfile || undefined,
+                            isLoadingProfile: false,
+                        };
+                    });
+                });
+            } catch (error) {
+                if (!cancelled && __DEV__) {
+                    console.error('Failed to load user profiles:', error);
+                }
+                if (!cancelled) {
                     setSessionsWithUsers(prev =>
-                        prev.map(s =>
-                            s.sessionId === session.sessionId
-                                ? { ...s, isLoadingProfile: false }
-                                : s
-                        )
+                        prev.map(s => ({ ...s, isLoadingProfile: false }))
                     );
                 }
             }
         };
 
         loadUserProfiles();
-    }, [sessions, oxyServices]);
 
-    const handleSwitchSession = async (sessionId: string) => {
-        if (sessionId === user?.sessionId) return; // Already active session
+        return () => {
+            cancelled = true;
+        };
+    }, [sessionIds, oxyServices, sessions]);
+
+    const handleSwitchSession = useCallback(async (sessionId: string) => {
+        if (sessionId === activeSessionId) return; // Already active session
+        if (switchingToUserId) return; // Already switching
 
         setSwitchingToUserId(sessionId);
         try {
@@ -153,14 +171,18 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 onClose();
             }
         } catch (error) {
-            console.error('Switch session failed:', error);
+            if (__DEV__) {
+                console.error('Switch session failed:', error);
+            }
             toast.error(t('accountSwitcher.toasts.switchFailed') || 'There was a problem switching accounts. Please try again.');
         } finally {
             setSwitchingToUserId(null);
         }
-    };
+    }, [activeSessionId, switchSession, onClose, t, switchingToUserId]);
+
+    const handleRemoveSession = useCallback(async (sessionId: string, displayName: string) => {
+        if (removingUserId) return; // Already removing
 
-    const handleRemoveSession = async (sessionId: string, displayName: string) => {
         confirmAction(
             t('accountSwitcher.confirms.remove', { displayName }) || `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`,
             async () => {
@@ -169,16 +191,18 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                     await removeSession(sessionId);
                     toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
                 } catch (error) {
-                    console.error('Remove session failed:', error);
+                    if (__DEV__) {
+                        console.error('Remove session failed:', error);
+                    }
                     toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
                 } finally {
                     setRemovingUserId(null);
                 }
             }
         );
-    };
+    }, [removeSession, t, removingUserId]);
 
-    const handleLogoutAll = async () => {
+    const handleLogoutAll = useCallback(() => {
         confirmAction(
             t('accountSwitcher.confirms.logoutAll') || 'Are you sure you want to sign out of all accounts? This will remove all saved accounts from this device.',
             async () => {
@@ -189,52 +213,58 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                         onClose();
                     }
                 } catch (error) {
-                    console.error('Logout all failed:', error);
+                    if (__DEV__) {
+                        console.error('Logout all failed:', error);
+                    }
                     const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
                     toast.error(t('accountSwitcher.toasts.signOutAllFailed', { error: errorMessage }) || `There was a problem signing out: ${errorMessage}`);
                 }
             }
         );
-    };
+    }, [logoutAll, onClose, t]);
 
-    // Device session management functions
-    const loadAllDeviceSessions = async () => {
+    // Device session management functions - optimized with useCallback
+    const loadAllDeviceSessions = useCallback(async () => {
         if (!oxyServices || !activeSessionId) return;
 
         setLoadingDeviceSessions(true);
         try {
-            // This would call the API to get all device sessions for the current user
             const allSessions = await oxyServices.getDeviceSessions(activeSessionId);
             setDeviceSessions(allSessions || []);
         } catch (error) {
-            console.error('Failed to load device sessions:', error);
+            if (__DEV__) {
+                console.error('Failed to load device sessions:', error);
+            }
             toast.error(t('accountSwitcher.toasts.deviceLoadFailed') || 'Failed to load device sessions. Please try again.');
         } finally {
             setLoadingDeviceSessions(false);
         }
-    };
+    }, [oxyServices, activeSessionId, t]);
+
+    const handleRemoteSessionLogout = useCallback((sessionId: string, deviceName: string) => {
+        if (remotingLogoutSessionId) return; // Already processing
 
-    const handleRemoteSessionLogout = async (sessionId: string, deviceName: string) => {
         confirmAction(
             t('accountSwitcher.confirms.remoteLogout', { deviceName }) || `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`,
             async () => {
                 setRemoteLogoutSessionId(sessionId);
                 try {
                     await oxyServices?.logoutSession(activeSessionId || '', sessionId);
-                    // Refresh device sessions list
                     await loadAllDeviceSessions();
                     toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', { deviceName }) || `Signed out from ${deviceName} successfully!`);
                 } catch (error) {
-                    console.error('Remote logout failed:', error);
+                    if (__DEV__) {
+                        console.error('Remote logout failed:', error);
+                    }
                     toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
                 } finally {
                     setRemoteLogoutSessionId(null);
                 }
             }
         );
-    };
+    }, [activeSessionId, oxyServices, loadAllDeviceSessions, t, remotingLogoutSessionId]);
 
-    const handleLogoutAllDevices = async () => {
+    const handleLogoutAllDevices = useCallback(() => {
         const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
 
         if (otherDevicesCount === 0) {
@@ -242,24 +272,33 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             return;
         }
 
+        if (loggingOutAllDevices) return; // Already processing
+
         confirmAction(
             t('accountSwitcher.confirms.logoutOthers', { count: otherDevicesCount }) || `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`,
             async () => {
                 setLoggingOutAllDevices(true);
                 try {
                     await oxyServices?.logoutAllDeviceSessions(activeSessionId || '');
-                    // Refresh device sessions list
                     await loadAllDeviceSessions();
                     toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
                 } catch (error) {
-                    console.error('Logout all devices failed:', error);
+                    if (__DEV__) {
+                        console.error('Logout all devices failed:', error);
+                    }
                     toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
                 } finally {
                     setLoggingOutAllDevices(false);
                 }
             }
         );
-    };
+    }, [deviceSessions, activeSessionId, oxyServices, loadAllDeviceSessions, t, loggingOutAllDevices]);
+
+    // Memoize filtered sessions for performance
+    const otherSessions = useMemo(
+        () => sessionsWithUsers.filter(s => s.sessionId !== activeSessionId),
+        [sessionsWithUsers, activeSessionId]
+    );
 
     return (
         <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
@@ -274,10 +313,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 elevation="subtle"
                 rightAction={{
                     icon: "refresh",
-                    onPress: () => {
-                        console.log('Manual refresh triggered');
-                        refreshSessions();
-                    }
+                    onPress: refreshSessions
                 }}
             />
 
@@ -325,15 +361,13 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                         )}
 
                         {/* Other Accounts */}
-                        {sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length > 0 && (
+                        {otherSessions.length > 0 && (
                             <View style={styles.section}>
                                 <Text style={styles.sectionTitle}>
-                                    {t('accountSwitcher.sections.otherWithCount', { count: sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length }) || `Other Accounts (${sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length})`}
+                                    {t('accountSwitcher.sections.otherWithCount', { count: otherSessions.length }) || `Other Accounts (${otherSessions.length})`}
                                 </Text>
 
-                                {sessionsWithUsers
-                                    .filter(s => s.sessionId !== activeSessionId)
-                                    .map((sessionWithUser, index, filteredArray) => {
+                                {otherSessions.map((sessionWithUser, index, filteredArray) => {
                                         const isFirst = index === 0;
                                         const isLast = index === filteredArray.length - 1;
                                         const isSwitching = switchingToUserId === sessionWithUser.sessionId;
@@ -346,7 +380,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                                         return (
                                             <View
-                                                key={sessionWithUser.sessionId}
+                                                key={`session-${sessionWithUser.sessionId}-${index}`}
                                                 style={[
                                                     styles.settingItem,
                                                     isFirst && styles.firstSettingItem,

package/src/ui/screens/FileManagementScreen.tsx

@@ -1974,7 +1974,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             {/* Uploading banner overlay */}
             {!selectMode && uploading && (
-                <View pointerEvents="none" style={styles.uploadBannerContainer}>
+                <View style={[styles.uploadBannerContainer, { pointerEvents: 'none' }]}>
                     <View style={[styles.uploadBanner, { backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE', borderColor: themeStyles.borderColor }]}>
                         <Ionicons name="cloud-upload" size={18} color={themeStyles.primaryColor} />
                         <Text style={[styles.uploadBannerText, { color: themeStyles.textColor }]}>Uploading{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'}</Text>