@oxyhq/services 5.16.4 → 5.16.8

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

@@ -14,6 +14,7 @@ import {
     Alert,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
+import * as DocumentPicker from 'expo-document-picker';
 import type { FileManagementScreenProps } from '../types/fileManagement';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
@@ -28,13 +29,13 @@ import { useThemeStyles } from '../hooks/useThemeStyles';
 import { useColorScheme } from '../hooks/use-color-scheme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
+import { useUploadFile } from '../hooks/mutations/useAccountMutations';
 import {
     confirmAction,
     convertDocumentPickerAssetToFile,
     formatFileSize,
     getFileIcon,
     getSafeDownloadUrl,
-    uploadFileRaw
 } from '../utils/fileManagement';
 import { FileViewer } from '../components/fileManagement/FileViewer';
 import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
@@ -115,6 +116,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 }) => {
     // Use useOxy() hook for OxyContext values
     const { user, oxyServices } = useOxy();
+    const uploadFileMutation = useUploadFile();
     const files = useFiles();
     // Ensure containerWidth is a number (TypeScript guard)
     const safeContainerWidth: number = typeof containerWidth === 'number' ? containerWidth : 400;
@@ -528,7 +530,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     };
                     useFileStore.getState().addFile(optimisticFile, { prepend: true });
 
-                    const result = await uploadFileRaw(raw, targetUserId, oxyServices, defaultVisibility);
+                    // Use the mutation hook with authentication handling
+                    const result = await uploadFileMutation.mutateAsync({
+                        file: raw,
+                        visibility: defaultVisibility,
+                    });
 
                     // Attempt to refresh file list incrementally – fetch single file metadata if API allows
                     if (result?.file || result?.files?.[0]) {
@@ -763,16 +769,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
         try {
             setIsPickingDocument(true);
-            
-            // Dynamically import expo-document-picker (Expo 54 supports it on all platforms)
-            const DocumentPicker = await import('expo-document-picker').catch(() => null);
-
-            if (!DocumentPicker || !DocumentPicker.getDocumentAsync) {
-                toast.error('File picker not available. Please install expo-document-picker');
-                return;
-            }
 
-            // Use getDocumentAsync directly - it will handle platform availability
+            // 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({
                 type: '*/*',
                 multiple: true,

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');
+                }
+            }
+        });
+    };
+}
+