@oxyhq/services 5.4.0 → 5.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oxyhq/services",
-    "version": "5.4.0",
+    "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",
@@ -69,6 +69,7 @@
     },
     "dependencies": {
         "@gorhom/bottom-sheet": "^5.1.6",
+        "@oxyhq/services": "^5.4.0",
         "@react-native-async-storage/async-storage": "^2.1.2",
         "axios": "^1.9.0",
         "expo-font": "^13.3.1",
@@ -148,4 +149,4 @@
         "react-native-gesture-handler": "^2.20.2",
         "react-native-reanimated": "^3.16.1"
     }
-}
+}

package/src/__tests__/ui/screens/AccountSettingsScreen.test.tsx

@@ -15,10 +15,10 @@ jest.mock('../../../ui/context/OxyContext', () => ({
       avatar: { url: 'https://example.com/avatar.jpg' }
     },
     oxyServices: {
-      updateUser: jest.fn(() => Promise.resolve({ 
-        id: '123', 
-        username: 'testuser', 
-        email: 'test@example.com' 
+      updateProfile: jest.fn(() => Promise.resolve({
+        id: '123',
+        username: 'testuser',
+        email: 'test@example.com'
       }))
     },
     isLoading: false
@@ -31,10 +31,10 @@ jest.mock('../../../ui/components/Avatar', () => 'Avatar');
 
 describe('AccountSettingsScreen', () => {
   const mockOxyServices = {
-    updateUser: jest.fn(() => Promise.resolve({ 
-      id: '123', 
-      username: 'testuser', 
-      email: 'test@example.com' 
+    updateProfile: jest.fn(() => Promise.resolve({
+      id: '123',
+      username: 'testuser',
+      email: 'test@example.com'
     }))
   } as unknown as OxyServices;
 

package/src/core/index.ts

@@ -153,6 +153,14 @@ export class OxyServices {
     );
   }
 
+  /**
+   * Gets the base URL configured for this OxyServices instance
+   * @returns The base URL
+   */
+  public getBaseURL(): string {
+    return this.client.defaults.baseURL || '';
+  }
+
   /**
    * Gets the currently authenticated user ID from the token
    * @returns The user ID or null if not authenticated
@@ -484,6 +492,33 @@ export class OxyServices {
     }
   }
 
+  /**
+   * Get the currently authenticated user's profile
+   * @returns User data for the current user
+   */
+  async getCurrentUser(): Promise<User> {
+    try {
+      const res = await this.client.get('/users/me');
+      return res.data;
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
+
+  /**
+   * Update the authenticated user's profile
+   * @param updates - Object containing fields to update
+   * @returns Updated user data
+   */
+  async updateProfile(updates: Record<string, any>): Promise<User> {
+    try {
+      const res = await this.client.put('/users/me', updates);
+      return res.data;
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
+
   /**
    * Update user profile (requires auth)
    * @param userId - User ID to update (must match authenticated user or have admin rights)
@@ -1554,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/lib/sonner.ts

@@ -1,5 +1,10 @@
-// Import polyfills for React Native before importing sonner-native
-import './react-native-polyfills';
+import { Platform } from 'react-native';
+import * as WebSonner from 'sonner';
+import * as NativeSonner from 'sonner-native';
 
-// Use the safe wrapper that handles potential import failures
-export * from './sonner-safe';
+const { toast: webToast, Toaster: WebToaster } = WebSonner as any;
+const { toast: nativeToast, Toaster: NativeToaster } = NativeSonner as any;
+
+export const toast = Platform.OS === 'web' ? webToast : nativeToast;
+export const Toaster = Platform.OS === 'web' ? WebToaster : NativeToaster;
+export type ToastT = typeof webToast;

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/AccountManagementDemo.tsx

@@ -9,7 +9,7 @@ import { OxyServices } from '../../core';
  */
 const AccountManagementDemo: React.FC = () => {
     const oxyServices = new OxyServices({
-        baseURL: 'http://localhost:3001'
+        baseURL: 'https://api.oxy.so'
     });
 
     return (

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