@oxyhq/services 5.16.7 → 5.16.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "5.16.7",
+  "version": "5.16.8",
   "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,9 @@ 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';
+import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
 
 export interface OxyContextState {
   user: User | null;
@@ -84,6 +87,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);
@@ -482,6 +486,9 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
   const useFollowHook = loadUseFollowHook();
 
+  // Create update profile mutation for avatar picker
+  const updateProfileMutation = useUpdateProfile();
+
   const restoreSessionsFromStorage = useCallback(async (): Promise<void> => {
     if (!storage) {
       return;
@@ -615,6 +622,46 @@ 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 using mutation hook (provides optimistic updates, error handling, retry)
+            await updateProfileMutation.mutateAsync({ avatar: file.id });
+            
+            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, updateProfileMutation]);
+
   const contextValue: OxyContextState = useMemo(() => ({
     user,
     sessions,
@@ -654,6 +701,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     oxyServices,
     useFollow: useFollowHook,
     showBottomSheet: showBottomSheetForContext,
+    openAvatarPicker,
   }), [
     activeSessionId,
     createIdentity,
@@ -689,6 +737,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     useFollowHook,
     user,
     showBottomSheetForContext,
+    openAvatarPicker,
   ]);
 
   return (

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -108,10 +108,11 @@ 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 { openAvatarPicker } = useOxy();
     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');
+                }
+            }
+        });
+    };
+}
+