@oxyhq/services 5.16.7 → 5.16.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "5.16.7",
+  "version": "5.16.9",
   "description": "Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -161,7 +161,8 @@
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
-    "react-native-svg": ">=13.0.0"
+    "react-native-svg": ">=13.0.0",
+    "expo-document-picker": "~14.0.0"
   },
   "peerDependenciesMeta": {
     "@expo/vector-icons": {
@@ -190,6 +191,9 @@
     },
     "@react-navigation/native": {
       "optional": true
+    },
+    "expo-document-picker": {
+      "optional": true
     }
   },
   "react-native-builder-bob": {

package/src/ui/context/OxyContext.tsx

@@ -30,6 +30,8 @@ import { useQueryClient } from '@tanstack/react-query';
 import { clearQueryCache } from '../hooks/queryClient';
 import { useAccountStore } from '../stores/accountStore';
 import { KeyManager } from '../../crypto/keyManager';
+import { translate } from '../../i18n';
+import { queryKeys } from '../hooks/queries/queryKeys';
 
 export interface OxyContextState {
   user: User | null;
@@ -84,6 +86,7 @@ export interface OxyContextState {
   oxyServices: OxyServices;
   useFollow?: UseFollowHook;
   showBottomSheet?: (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => void;
+  openAvatarPicker: () => void;
 }
 
 const OxyContext = createContext<OxyContextState | null>(null);
@@ -323,7 +326,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const clearAllAccountData = useCallback(async (): Promise<void> => {
     // Clear TanStack Query cache (in-memory)
     queryClient.clear();
-    
+
     // Clear persisted query cache
     if (storage) {
       try {
@@ -334,10 +337,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         }
       }
     }
-    
+
     // Clear session state (sessions, activeSessionId, storage)
     await clearSessionState();
-    
+
     // Clear identity sync state from storage
     if (storage) {
       try {
@@ -348,14 +351,14 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         }
       }
     }
-    
+
     // Reset auth store identity sync state
     useAuthStore.getState().setIdentitySynced(false);
     useAuthStore.getState().setSyncing(false);
-    
+
     // Reset account store
     useAccountStore.getState().reset();
-    
+
     // Clear HTTP service cache
     oxyServices.clearCache();
   }, [queryClient, storage, clearSessionState, logger, oxyServices]);
@@ -369,7 +372,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   ): Promise<void> => {
     // First, clear all account data
     await clearAllAccountData();
-    
+
     // Then delete the identity keys
     await KeyManager.deleteIdentity(skipBackup, force, userConfirmed);
   }, [clearAllAccountData]);
@@ -381,7 +384,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
     let wasOffline = false;
     let checkTimeout: NodeJS.Timeout | null = null;
-    
+
     // Circuit breaker and exponential backoff state
     const stateRef = {
       consecutiveFailures: 0,
@@ -438,10 +441,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       } catch (error) {
         // Network check failed - we're offline
         wasOffline = true;
-        
+
         // Increment failure count and apply exponential backoff
         stateRef.consecutiveFailures++;
-        
+
         // Calculate new interval with exponential backoff, capped at maxInterval
         const backoffMultiplier = Math.min(
           Math.pow(2, stateRef.consecutiveFailures - 1),
@@ -451,7 +454,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
           stateRef.baseInterval * backoffMultiplier,
           stateRef.maxInterval
         );
-        
+
         // If we hit the circuit breaker threshold, use max interval
         if (stateRef.consecutiveFailures >= stateRef.maxFailures) {
           stateRef.currentInterval = stateRef.maxInterval;
@@ -615,6 +618,52 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     [],
   );
 
+  // Create openAvatarPicker function
+  const openAvatarPicker = useCallback(() => {
+    showBottomSheetForContext({
+      screen: 'FileManagement' as RouteName,
+      props: {
+        selectMode: true,
+        multiSelect: false,
+        disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+        afterSelect: 'none', // Don't navigate away - stay on current screen
+        onSelect: async (file: any) => {
+          if (!file.contentType.startsWith('image/')) {
+            toast.error(translate(currentLanguage, 'editProfile.toasts.selectImage') || 'Please select an image file');
+            return;
+          }
+          try {
+            // 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('[OxyContext] 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('[OxyContext] Failed to update avatar visibility, continuing anyway:', visError);
+                }
+              }
+            }
+
+            // Update user profile directly
+            await oxyServices.updateProfile({ avatar: file.id });
+
+            // Invalidate queries to refresh user data
+            queryClient.invalidateQueries({ queryKey: queryKeys.accounts.current() });
+            if (activeSessionId) {
+              queryClient.invalidateQueries({ queryKey: queryKeys.users.profile(activeSessionId) });
+            }
+
+            toast.success(translate(currentLanguage, 'editProfile.toasts.avatarUpdated') || 'Avatar updated');
+          } catch (e: any) {
+            toast.error(e.message || translate(currentLanguage, 'editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
+          }
+        },
+      },
+    });
+  }, [oxyServices, currentLanguage, showBottomSheetForContext, queryClient, activeSessionId]);
+
   const contextValue: OxyContextState = useMemo(() => ({
     user,
     sessions,
@@ -654,6 +703,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     oxyServices,
     useFollow: useFollowHook,
     showBottomSheet: showBottomSheetForContext,
+    openAvatarPicker,
   }), [
     activeSessionId,
     createIdentity,
@@ -689,6 +739,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     useFollowHook,
     user,
     showBottomSheetForContext,
+    openAvatarPicker,
   ]);
 
   return (

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -77,6 +77,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         activeSessionId,
         oxyServices,
         isAuthenticated,
+        openAvatarPicker,
     } = useOxy();
     const { t } = useI18n();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
@@ -108,10 +109,10 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         return undefined;
     }, [user?.avatar, oxyServices]);
 
-    // Handle avatar press to navigate to EditProfile
+    // Handle avatar press - use openAvatarPicker from context
     const handleAvatarPress = useCallback(() => {
-        navigate?.('EditProfile', { initialSection: 'profilePicture', initialField: 'avatar' });
-    }, [navigate]);
+        openAvatarPicker();
+    }, [openAvatarPicker]);
 
     // Play Lottie animation once when component mounts
     useEffect(() => {

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -75,12 +75,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     } = useOxy();
     const { t } = useI18n();
     const normalizedTheme = normalizeTheme(theme);
-    
+
     // Use TanStack Query for user data
     const { data: user, isLoading: userLoading } = useCurrentUser({ enabled: isAuthenticated });
     const updateProfileMutation = useUpdateProfile();
     const uploadAvatarMutation = useUploadAvatar();
-    
+
     // Fallback to store for backward compatibility
     const userFromStore = useAuthStore((state) => state.user);
     const finalUser = user || userFromStore;
@@ -503,9 +503,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         });
     };
 
-    const openAvatarPicker = useCallback(() => {
-        toast.info?.(t('editProfile.toasts.avatarPickerUnavailable') || 'Avatar picker is not available in this build.');
-    }, [t]);
+    const { openAvatarPicker } = useOxy();
 
     // Handlers to open modals
     const handleOpenDisplayNameModal = useCallback(() => setShowEditDisplayNameModal(true), []);

package/src/ui/screens/FileManagementScreen.tsx

@@ -769,7 +769,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
         try {
             setIsPickingDocument(true);
-            
+
             // Use expo-document-picker (works on all platforms including web)
             // On web, it uses the native file input and provides File objects directly
             const result = await DocumentPicker.getDocumentAsync({

package/src/ui/utils/fileManagement.ts

@@ -1,6 +1,8 @@
 import { Alert } from 'react-native';
 import type { FileMetadata } from '../../models/interfaces';
 import { File as ExpoFile } from 'expo-file-system';
+import { toast } from '../../lib/sonner';
+import type { RouteName } from '../navigation/routes';
 
 /**
  * Format file size in bytes to human-readable string
@@ -188,3 +190,106 @@ export async function uploadFileRaw(
     return await oxyServices.uploadRawFile(file, visibility);
 }
 
+/**
+ * Configuration for creating an avatar picker handler
+ */
+export interface AvatarPickerConfig {
+    /** Navigation function from BaseScreenProps */
+    navigate?: (screen: RouteName, props?: Record<string, unknown>) => void;
+    /** OxyServices instance */
+    oxyServices: any;
+    /** TanStack Query mutation for updating profile */
+    updateProfileMutation: {
+        mutateAsync: (updates: { avatar: string }) => Promise<any>;
+    };
+    /** Callback to update local avatar state */
+    onAvatarSelected?: (fileId: string) => void;
+    /** i18n translation function */
+    t: (key: string) => string | undefined;
+    /** Optional context name for logging (e.g., 'AccountSettings', 'WelcomeNewUser') */
+    contextName?: string;
+}
+
+/**
+ * Creates a reusable avatar picker handler function.
+ * 
+ * This function navigates to the FileManagement screen and handles:
+ * - Image file validation
+ * - File visibility update to public
+ * - Profile avatar update via mutation
+ * - Success/error toast notifications
+ * 
+ * @example
+ * ```tsx
+ * const openAvatarPicker = createAvatarPickerHandler({
+ *   navigate,
+ *   oxyServices,
+ *   updateProfileMutation,
+ *   onAvatarSelected: setAvatarFileId,
+ *   t,
+ *   contextName: 'AccountSettings'
+ * });
+ * 
+ * <TouchableOpacity onPress={openAvatarPicker}>
+ *   <Text>Change Avatar</Text>
+ * </TouchableOpacity>
+ * ```
+ */
+export function createAvatarPickerHandler(config: AvatarPickerConfig): () => void {
+    const {
+        navigate,
+        oxyServices,
+        updateProfileMutation,
+        onAvatarSelected,
+        t,
+        contextName = 'AvatarPicker'
+    } = config;
+
+    return () => {
+        if (!navigate) {
+            console.warn(`[${contextName}] navigate function is not available`);
+            return;
+        }
+
+        navigate('FileManagement', {
+            selectMode: true,
+            multiSelect: false,
+            disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
+            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 (skip if temporary asset ID)
+                    if (file.id && !file.id.startsWith('temp-')) {
+                        try {
+                            await oxyServices.assetUpdateVisibility(file.id, 'public');
+                            console.log(`[${contextName}] 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(`[${contextName}] Failed to update avatar visibility, continuing anyway:`, visError);
+                            }
+                        }
+                    }
+
+                    // Update local state if callback provided
+                    if (onAvatarSelected) {
+                        onAvatarSelected(file.id);
+                    }
+
+                    // Update user using TanStack Query mutation
+                    await updateProfileMutation.mutateAsync({ avatar: file.id });
+                    
+                    toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
+                } catch (e: any) {
+                    toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
+                }
+            }
+        });
+    };
+}
+