@oxyhq/services 5.4.1 → 5.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oxyhq/services",
-    "version": "5.4.1",
+    "version": "5.4.2",
     "description": "Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀",
     "main": "lib/commonjs/node/index.js",
     "module": "lib/module/node/index.js",
@@ -149,4 +149,4 @@
         "react-native-gesture-handler": "^2.20.2",
         "react-native-reanimated": "^3.16.1"
     }
-}
+}

package/src/core/index.ts

@@ -1589,6 +1589,74 @@ export class OxyServices {
     
     return apiError;
   }
+
+  /**
+   * Check if a username is available
+   * @param username - The username to check
+   * @returns Promise with availability status
+   */
+  async checkUsernameAvailability(username: string): Promise<{ available: boolean; message: string }> {
+    try {
+      const res = await this.client.get(`/auth/check-username/${username}`);
+      return res.data;
+    } catch (error: any) {
+      // If the endpoint doesn't exist, fall back to basic validation
+      if (error.response?.status === 404) {
+        console.warn('Username validation endpoint not found, using fallback validation');
+        return { available: true, message: 'Username validation not available' };
+      }
+      
+      // If it's a validation error (400), return the error message
+      if (error.response?.status === 400) {
+        return error.response.data;
+      }
+      
+      // For other errors, log and return a fallback
+      console.error('Username validation error:', error);
+      return { available: true, message: 'Unable to validate username' };
+    }
+  }
+
+  /**
+   * Check if an email is available
+   * @param email - The email to check
+   * @returns Promise with availability status
+   */
+  async checkEmailAvailability(email: string): Promise<{ available: boolean; message: string }> {
+    try {
+      const res = await this.client.post('/auth/check-email', { email });
+      return res.data;
+    } catch (error: any) {
+      // If the endpoint doesn't exist, fall back to basic validation
+      if (error.response?.status === 404) {
+        console.warn('Email validation endpoint not found, using fallback validation');
+        return { available: true, message: 'Email validation not available' };
+      }
+      
+      // If it's a validation error (400), return the error message
+      if (error.response?.status === 400) {
+        return error.response.data;
+      }
+      
+      // For other errors, log and return a fallback
+      console.error('Email validation error:', error);
+      return { available: true, message: 'Unable to validate email' };
+    }
+  }
+
+  /**
+   * Get user profile by username
+   * @param username - The username to look up
+   * @returns Promise with user profile
+   */
+  async getUserProfileByUsername(username: string): Promise<User> {
+    try {
+      const res = await this.client.get(`/profiles/username/${username}`);
+      return res.data;
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
 }
 
 export default OxyServices;

package/src/ui/components/OxyProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState, useEffect } from 'react';
+import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
 import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -303,8 +303,8 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         []
     );
 
-    // Background style based on theme
-    const getBackgroundStyle = () => {
+    // Memoize background style based on theme to prevent recalculation on every render
+    const backgroundStyle = useMemo(() => {
         const baseColor = customStyles.backgroundColor || (theme === 'light' ? '#FFFFFF' : '#121212');
         return {
             backgroundColor: baseColor,
@@ -317,7 +317,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 }
             })
         };
-    };
+    }, [customStyles.backgroundColor, theme]);
 
     // Method to adjust snap points from Router
     const adjustSnapPoints = useCallback((points: string[]) => {
@@ -398,7 +398,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             enablePanDownToClose
             backdropComponent={renderBackdrop}
             backgroundStyle={[
-                getBackgroundStyle(),
+                backgroundStyle,
                 {
                     borderTopLeftRadius: 35,
                     borderTopRightRadius: 35,

package/src/ui/context/OxyContext.tsx

@@ -161,11 +161,11 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
         if (sessionsData) {
           const parsedSessions: SecureClientSession[] = JSON.parse(sessionsData);
-          
+
           // Migrate old session format to include user info
           const migratedSessions: SecureClientSession[] = [];
           let shouldUpdateStorage = false;
-          
+
           for (const session of parsedSessions) {
             if (!session.userId || !session.username) {
               // Session is missing user info, try to fetch it
@@ -188,31 +188,31 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
               migratedSessions.push(session);
             }
           }
-          
+
           // Update storage if we made changes
           if (shouldUpdateStorage) {
             await saveSessionsToStorage(migratedSessions);
           }
-          
+
           setSessions(migratedSessions);
 
           if (storedActiveSessionId && migratedSessions.length > 0) {
             const activeSession = migratedSessions.find(s => s.sessionId === storedActiveSessionId);
-            
+
             if (activeSession) {
               console.log('SecureAuth - activeSession found:', activeSession);
-              
+
               // Validate session
               try {
                 const validation = await oxyServices.validateSession(activeSession.sessionId);
-                
+
                 if (validation.valid) {
                   console.log('SecureAuth - session validated successfully');
                   setActiveSessionId(activeSession.sessionId);
-                  
+
                   // Get access token for API calls
                   await oxyServices.getTokenBySession(activeSession.sessionId);
-                  
+
                   // Load full user data
                   const fullUser = await oxyServices.getUserBySession(activeSession.sessionId);
                   setUser(fullUser);
@@ -221,7 +221,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
                     username: fullUser.username,
                     avatar: fullUser.avatar
                   });
-                  
+
                   if (onAuthStateChange) {
                     onAuthStateChange(fullUser);
                   }
@@ -254,7 +254,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     const filteredSessions = sessions.filter(s => s.sessionId !== sessionId);
     setSessions(filteredSessions);
     await saveSessionsToStorage(filteredSessions);
-    
+
     // If there are other sessions, switch to the first one
     if (filteredSessions.length > 0) {
       await switchToSession(filteredSessions[0].sessionId);
@@ -264,7 +264,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       setUser(null);
       setMinimalUser(null);
       await storage?.removeItem(keys.activeSessionId);
-      
+
       if (onAuthStateChange) {
         onAuthStateChange(null);
       }
@@ -298,13 +298,13 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   const switchToSession = useCallback(async (sessionId: string): Promise<void> => {
     try {
       setIsLoading(true);
-      
+
       // Get access token for this session
       await oxyServices.getTokenBySession(sessionId);
-      
+
       // Load full user data
       const fullUser = await oxyServices.getUserBySession(sessionId);
-      
+
       setActiveSessionId(sessionId);
       setUser(fullUser);
       setMinimalUser({
@@ -312,9 +312,9 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         username: fullUser.username,
         avatar: fullUser.avatar
       });
-      
+
       await saveActiveSessionId(sessionId);
-      
+
       if (onAuthStateChange) {
         onAuthStateChange(fullUser);
       }
@@ -336,20 +336,20 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     try {
       // Get device fingerprint for enhanced device identification
       const deviceFingerprint = DeviceManager.getDeviceFingerprint();
-      
+
       // Get or generate persistent device info
       const deviceInfo = await DeviceManager.getDeviceInfo();
-      
+
       console.log('SecureAuth - Using device fingerprint:', deviceFingerprint);
       console.log('SecureAuth - Using device ID:', deviceInfo.deviceId);
 
       const response: SecureLoginResponse = await oxyServices.secureLogin(
-        username, 
-        password, 
+        username,
+        password,
         deviceName || deviceInfo.deviceName || DeviceManager.getDefaultDeviceName(),
         deviceFingerprint
       );
-      
+
       // Create client session object with user info for duplicate detection
       const clientSession: SecureClientSession = {
         sessionId: response.sessionId,
@@ -361,20 +361,20 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       };
 
       // Check if this user already has a session (prevent duplicate accounts)
-      const existingUserSessionIndex = sessions.findIndex(s => 
+      const existingUserSessionIndex = sessions.findIndex(s =>
         s.userId === response.user.id || s.username === response.user.username
       );
 
       let updatedSessions: SecureClientSession[];
-      
+
       if (existingUserSessionIndex !== -1) {
         // User already has a session - replace it with the new one (reused session scenario)
         const existingSession = sessions[existingUserSessionIndex];
         updatedSessions = [...sessions];
         updatedSessions[existingUserSessionIndex] = clientSession;
-        
+
         console.log(`Reusing/updating existing session for user ${response.user.username}. Previous session: ${existingSession.sessionId}, New session: ${response.sessionId}`);
-        
+
         // If the replaced session was the active one, update active session
         if (activeSessionId === existingSession.sessionId) {
           setActiveSessionId(response.sessionId);
@@ -438,7 +438,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
           setUser(null);
           setMinimalUser(null);
           await storage?.removeItem(keys.activeSessionId);
-          
+
           if (onAuthStateChange) {
             onAuthStateChange(null);
           }
@@ -453,7 +453,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   // Logout all sessions
   const logoutAll = async (): Promise<void> => {
     console.log('logoutAll called with activeSessionId:', activeSessionId);
-    
+
     if (!activeSessionId) {
       console.error('No active session ID found, cannot logout all');
       setError('No active session found');
@@ -470,7 +470,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       console.log('Calling oxyServices.logoutAllSecureSessions with sessionId:', activeSessionId);
       await oxyServices.logoutAllSecureSessions(activeSessionId);
       console.log('logoutAllSecureSessions completed successfully');
-      
+
       // Clear all local data
       setSessions([]);
       setActiveSessionId(null);
@@ -478,7 +478,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       setMinimalUser(null);
       await clearAllStorage();
       console.log('Local storage cleared');
-      
+
       if (onAuthStateChange) {
         onAuthStateChange(null);
         console.log('Auth state change callback called');
@@ -490,10 +490,30 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     }
   };
 
-  // Sign up method (placeholder - you can implement based on your needs)
+  // Sign up method
   const signUp = async (username: string, email: string, password: string): Promise<User> => {
-    // Implement sign up logic similar to secureLogin
-    throw new Error('Sign up not implemented yet');
+    if (!storage) throw new Error('Storage not initialized');
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Create new account using the OxyServices signUp method
+      const response = await oxyServices.signUp(username, email, password);
+
+      console.log('SignUp successful:', response);
+
+      // Now log the user in securely to create a session
+      // This will handle the session creation and device registration
+      const user = await login(username, password);
+
+      return user;
+    } catch (error: any) {
+      setError(error.message || 'Sign up failed');
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   // Switch session method
@@ -512,7 +532,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
     try {
       const serverSessions = await oxyServices.getSessionsBySessionId(activeSessionId);
-      
+
       // Update local sessions with server data
       const updatedSessions: SecureClientSession[] = serverSessions.map(serverSession => ({
         sessionId: serverSession.sessionId,
@@ -520,7 +540,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         expiresAt: new Date().toISOString(), // You might want to get this from server
         lastActive: new Date().toISOString()
       }));
-      
+
       setSessions(updatedSessions);
       await saveSessionsToStorage(updatedSessions);
     } catch (error) {
@@ -545,14 +565,14 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
     try {
       await oxyServices.logoutAllDeviceSessions(activeSessionId);
-      
+
       // Clear all local sessions since we logged out from all devices
       setSessions([]);
       setActiveSessionId(null);
       setUser(null);
       setMinimalUser(null);
       await clearAllStorage();
-      
+
       if (onAuthStateChange) {
         onAuthStateChange(null);
       }
@@ -567,7 +587,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
     try {
       await oxyServices.updateDeviceName(activeSessionId, deviceName);
-      
+
       // Update local device info
       await DeviceManager.updateDeviceName(deviceName);
     } catch (error) {
@@ -579,10 +599,10 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   // Bottom sheet control methods
   const showBottomSheet = useCallback((screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => {
     console.log('showBottomSheet called with:', screenOrConfig);
-    
+
     if (bottomSheetRef?.current) {
       console.log('bottomSheetRef is available');
-      
+
       // First, show the bottom sheet
       if (bottomSheetRef.current.expand) {
         console.log('Expanding bottom sheet');
@@ -593,7 +613,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       } else {
         console.warn('No expand or present method available on bottomSheetRef');
       }
-      
+
       // Then navigate to the specified screen if provided
       if (screenOrConfig) {
         // Add a small delay to ensure the bottom sheet is opened first

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);