@oxyhq/services 5.21.6 → 5.21.7

package/src/ui/components/profile/EditUsernameModal.tsx

@@ -1,183 +1,55 @@
-import React, { useState, useEffect } from 'react';
-import {
-    View,
-    Text,
-    TextInput,
-    TouchableOpacity,
-    StyleSheet,
-    Modal,
-    Platform,
-} from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { useThemeStyles } from '../../hooks/useThemeStyles';
-import { useColorScheme } from '../../hooks/use-color-scheme';
-import { useI18n } from '../../hooks/useI18n';
-import { fontFamilies } from '../../styles/fonts';
+import React from 'react';
+import { EditFieldModal } from './EditFieldModal';
 import { useProfileEditing } from '../../hooks/useProfileEditing';
+import { useI18n } from '../../hooks/useI18n';
 
 interface EditUsernameModalProps {
-    visible: boolean;
-    onClose: () => void;
-    initialValue?: string;
-    theme?: 'light' | 'dark';
-    onSave?: () => void;
+  visible: boolean;
+  onClose: () => void;
+  initialValue?: string;
+  theme?: 'light' | 'dark';
+  onSave?: () => void;
 }
 
 export const EditUsernameModal: React.FC<EditUsernameModalProps> = ({
-    visible,
-    onClose,
-    initialValue = '',
-    theme = 'light',
-    onSave,
+  visible,
+  onClose,
+  initialValue = '',
+  theme = 'light',
+  onSave,
 }) => {
-    const { t } = useI18n();
-    const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
-    const colors = themeStyles.colors;
-    const { updateField, isSaving } = useProfileEditing();
-
-    const [username, setUsername] = useState(initialValue);
-
-    useEffect(() => {
-        if (visible) {
-            setUsername(initialValue);
-        }
-    }, [visible, initialValue]);
-
-    const handleSave = async () => {
-        const success = await updateField('username', username);
-        if (success) {
-            onSave?.();
-            onClose();
-        }
-    };
-
-    return (
-        <Modal
-            visible={visible}
-            animationType="slide"
-            transparent={true}
-            onRequestClose={onClose}
-        >
-            <View style={styles.modalOverlay}>
-                <View style={[styles.modalContent, { backgroundColor: colors.background }]}>
-                    <View style={styles.modalHeader}>
-                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-                            <Ionicons name="close" size={24} color={colors.text} />
-                        </TouchableOpacity>
-                        <Text style={[styles.modalTitle, { color: colors.text }]}>
-                            {t('editProfile.items.username.title') || 'Username'}
-                        </Text>
-                        <TouchableOpacity
-                            onPress={handleSave}
-                            disabled={isSaving || !username.trim()}
-                            style={[styles.saveButton, { opacity: (isSaving || !username.trim()) ? 0.5 : 1 }]}
-                        >
-                            <Text style={[styles.saveButtonText, { color: colors.tint }]}>
-                                {isSaving ? 'Saving...' : 'Save'}
-                            </Text>
-                        </TouchableOpacity>
-                    </View>
-
-                    <View style={styles.modalBody}>
-                        <View style={styles.inputGroup}>
-                            <Text style={[styles.label, { color: colors.text }]}>
-                                {t('editProfile.items.username.label') || 'Username'}
-                            </Text>
-                            <TextInput
-                                style={[
-                                    styles.input,
-                                    {
-                                        backgroundColor: colors.card,
-                                        color: colors.text,
-                                        borderColor: colors.border,
-                                    },
-                                ]}
-                                value={username}
-                                onChangeText={setUsername}
-                                placeholder={t('editProfile.items.username.placeholder') || 'Choose a username'}
-                                placeholderTextColor={colors.secondaryText}
-                                autoFocus
-                                autoCapitalize="none"
-                                autoCorrect={false}
-                                selectionColor={colors.tint}
-                            />
-                        </View>
-                    </View>
-                </View>
-            </View>
-        </Modal>
-    );
+  const { t } = useI18n();
+  const { updateField } = useProfileEditing();
+
+  return (
+    <EditFieldModal
+      visible={visible}
+      onClose={onClose}
+      title={t('editProfile.items.username.title') || 'Username'}
+      theme={theme}
+      onSave={onSave}
+      variant="single"
+      fields={[
+        {
+          key: 'username',
+          label: t('editProfile.items.username.label') || 'Username',
+          initialValue,
+          placeholder: t('editProfile.items.username.placeholder') || 'Choose a username',
+          validation: (value) => {
+            if (!value.trim()) {
+              return t('editProfile.items.username.required') || 'Username is required';
+            }
+            return undefined;
+          },
+          inputProps: {
+            autoCapitalize: 'none',
+            autoCorrect: false,
+          },
+        },
+      ]}
+      onSubmit={async (data) => {
+        return await updateField('username', data.username as string);
+      }}
+    />
+  );
 };
-
-const styles = StyleSheet.create({
-    modalOverlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'flex-end',
-    },
-    modalContent: {
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        paddingTop: Platform.OS === 'ios' ? 20 : 16,
-        maxHeight: '80%',
-    },
-    modalHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingBottom: 16,
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: '#E5E5EA',
-    },
-    closeButton: {
-        width: 40,
-        height: 40,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    modalTitle: {
-        fontSize: 18,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-        flex: 1,
-        textAlign: 'center',
-    },
-    saveButton: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-    },
-    saveButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-    },
-    modalBody: {
-        padding: 16,
-        gap: 16,
-    },
-    inputGroup: {
-        gap: 8,
-    },
-    label: {
-        fontSize: 14,
-        fontWeight: '600',
-        fontFamily: fontFamilies.phuduSemiBold,
-    },
-    input: {
-        borderWidth: StyleSheet.hairlineWidth,
-        borderRadius: 12,
-        padding: 16,
-        fontSize: 16,
-        minHeight: 52,
-    },
-});
-
-
-
-
-
-
-
-

package/src/ui/hooks/mutations/mutationFactory.ts

@@ -0,0 +1,215 @@
+/**
+ * Mutation Factory - Creates standardized mutations with optimistic updates
+ *
+ * This factory reduces boilerplate code for mutations that follow the common pattern:
+ * 1. Cancel outgoing queries
+ * 2. Snapshot previous data
+ * 3. Apply optimistic update
+ * 4. On error: rollback and show toast
+ * 5. On success: update cache, stores, and invalidate queries
+ */
+
+import { QueryClient, UseMutationOptions } from '@tanstack/react-query';
+import type { User } from '../../../models/interfaces';
+import { queryKeys, invalidateAccountQueries, invalidateUserQueries } from '../queries/queryKeys';
+import { toast } from '../../../lib/sonner';
+import { useAuthStore } from '../../stores/authStore';
+
+/**
+ * Configuration for creating a standard profile mutation
+ */
+export interface ProfileMutationConfig<TData, TVariables> {
+  /** The mutation function that makes the API call */
+  mutationFn: (variables: TVariables) => Promise<TData>;
+  /** Query keys to cancel before mutation */
+  cancelQueryKeys?: unknown[][];
+  /** Function to apply optimistic update to the user data */
+  optimisticUpdate?: (previousUser: User, variables: TVariables) => Partial<User>;
+  /** Error message to show on failure */
+  errorMessage?: string | ((error: Error) => string);
+  /** Success message to show (optional) */
+  successMessage?: string;
+  /** Whether to update authStore on success (default: true) */
+  updateAuthStore?: boolean;
+  /** Whether to invalidate user queries on success (default: true) */
+  invalidateUserQueries?: boolean;
+  /** Whether to invalidate account queries on success (default: true) */
+  invalidateAccountQueries?: boolean;
+  /** Custom onSuccess handler */
+  onSuccess?: (data: TData, variables: TVariables, queryClient: QueryClient) => void;
+}
+
+/**
+ * Creates a standard profile mutation with optimistic updates
+ *
+ * @example
+ * ```ts
+ * const updateProfile = createProfileMutation({
+ *   mutationFn: (updates) => oxyServices.updateProfile(updates),
+ *   optimisticUpdate: (user, updates) => updates,
+ *   errorMessage: 'Failed to update profile',
+ * });
+ * ```
+ */
+export function createProfileMutation<TVariables>(
+  config: ProfileMutationConfig<User, TVariables>,
+  queryClient: QueryClient,
+  activeSessionId: string | null
+): UseMutationOptions<User, Error, TVariables, { previousUser?: User }> {
+  const {
+    mutationFn,
+    cancelQueryKeys = [],
+    optimisticUpdate,
+    errorMessage = 'Operation failed',
+    successMessage,
+    updateAuthStore = true,
+    invalidateUserQueries: shouldInvalidateUserQueries = true,
+    invalidateAccountQueries: shouldInvalidateAccountQueries = true,
+    onSuccess: customOnSuccess,
+  } = config;
+
+  return {
+    mutationFn,
+
+    onMutate: async (variables) => {
+      // Cancel queries that might conflict
+      await queryClient.cancelQueries({ queryKey: queryKeys.accounts.current() });
+      for (const key of cancelQueryKeys) {
+        await queryClient.cancelQueries({ queryKey: key });
+      }
+
+      // Snapshot previous user data
+      const previousUser = queryClient.getQueryData<User>(queryKeys.accounts.current());
+
+      // Apply optimistic update if provided
+      if (previousUser && optimisticUpdate) {
+        const updates = optimisticUpdate(previousUser, variables);
+        const optimisticUser = { ...previousUser, ...updates };
+
+        queryClient.setQueryData<User>(queryKeys.accounts.current(), optimisticUser);
+
+        if (activeSessionId) {
+          queryClient.setQueryData<User>(queryKeys.users.profile(activeSessionId), optimisticUser);
+        }
+      }
+
+      return { previousUser };
+    },
+
+    onError: (error, _variables, context) => {
+      // Rollback optimistic update
+      if (context?.previousUser) {
+        queryClient.setQueryData(queryKeys.accounts.current(), context.previousUser);
+        if (activeSessionId) {
+          queryClient.setQueryData(queryKeys.users.profile(activeSessionId), context.previousUser);
+        }
+      }
+
+      // Show error toast
+      const message = typeof errorMessage === 'function'
+        ? errorMessage(error)
+        : (error instanceof Error ? error.message : errorMessage);
+      toast.error(message);
+    },
+
+    onSuccess: (data, variables) => {
+      // Update cache with server response
+      queryClient.setQueryData(queryKeys.accounts.current(), data);
+      if (activeSessionId) {
+        queryClient.setQueryData(queryKeys.users.profile(activeSessionId), data);
+      }
+
+      // Update authStore for immediate UI updates
+      if (updateAuthStore) {
+        useAuthStore.getState().setUser(data);
+      }
+
+      // Invalidate related queries
+      if (shouldInvalidateUserQueries) {
+        invalidateUserQueries(queryClient);
+      }
+      if (shouldInvalidateAccountQueries) {
+        invalidateAccountQueries(queryClient);
+      }
+
+      // Show success toast if configured
+      if (successMessage) {
+        toast.success(successMessage);
+      }
+
+      // Call custom onSuccess handler
+      if (customOnSuccess) {
+        customOnSuccess(data, variables, queryClient);
+      }
+    },
+  };
+}
+
+/**
+ * Configuration for creating a generic mutation (non-profile)
+ */
+export interface GenericMutationConfig<TData, TVariables, TContext> {
+  /** The mutation function */
+  mutationFn: (variables: TVariables) => Promise<TData>;
+  /** Query key for optimistic data */
+  queryKey: unknown[];
+  /** Function to create optimistic data */
+  optimisticData?: (previous: TData | undefined, variables: TVariables) => TData;
+  /** Error message */
+  errorMessage?: string;
+  /** Success message */
+  successMessage?: string;
+  /** Additional queries to invalidate on success */
+  invalidateQueries?: unknown[][];
+}
+
+/**
+ * Creates a generic mutation with optimistic updates
+ */
+export function createGenericMutation<TData, TVariables>(
+  config: GenericMutationConfig<TData, TVariables, { previous?: TData }>,
+  queryClient: QueryClient
+): UseMutationOptions<TData, Error, TVariables, { previous?: TData }> {
+  const {
+    mutationFn,
+    queryKey,
+    optimisticData,
+    errorMessage = 'Operation failed',
+    successMessage,
+    invalidateQueries = [],
+  } = config;
+
+  return {
+    mutationFn,
+
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey });
+      const previous = queryClient.getQueryData<TData>(queryKey);
+
+      if (optimisticData) {
+        queryClient.setQueryData<TData>(queryKey, optimisticData(previous, variables));
+      }
+
+      return { previous };
+    },
+
+    onError: (error, _variables, context) => {
+      if (context?.previous !== undefined) {
+        queryClient.setQueryData(queryKey, context.previous);
+      }
+      toast.error(error instanceof Error ? error.message : errorMessage);
+    },
+
+    onSuccess: (data) => {
+      queryClient.setQueryData(queryKey, data);
+
+      for (const key of invalidateQueries) {
+        queryClient.invalidateQueries({ queryKey: key });
+      }
+
+      if (successMessage) {
+        toast.success(successMessage);
+      }
+    },
+  };
+}

package/src/ui/hooks/mutations/useAccountMutations.ts

@@ -5,6 +5,7 @@ import { useOxy } from '../../context/OxyContext';
 import { toast } from '../../../lib/sonner';
 import { refreshAvatarInStore } from '../../utils/avatarUtils';
 import { useAuthStore } from '../../stores/authStore';
+import { authenticatedApiCall } from '../../utils/authHelpers';
 
 /**
  * Update user profile with optimistic updates and offline queue support
@@ -15,38 +16,11 @@ export const useUpdateProfile = () => {
 
   return useMutation({
     mutationFn: async (updates: Partial<User>) => {
-      // Ensure we have a valid token before making the request
-      if (!oxyServices.hasValidToken() && activeSessionId) {
-        try {
-          // Try to get token for the session
-          await oxyServices.getTokenBySession(activeSessionId);
-        } catch (tokenError) {
-          // If getting token fails, might be an offline session - try syncing
-          const errorMessage = tokenError instanceof Error ? tokenError.message : String(tokenError);
-          if (errorMessage.includes('AUTH_REQUIRED_OFFLINE_SESSION') || errorMessage.includes('offline')) {
-            // Session sync should be handled by the app layer
-            throw new Error('Session needs to be synced. Please try again.');
-          } else {
-            throw tokenError;
-          }
-        }
-      }
-
-      try {
-        return await oxyServices.updateProfile(updates);
-      } catch (error: any) {
-        const errorMessage = error?.message || '';
-        const status = error?.status || error?.response?.status;
-        
-        // Handle authentication errors
-        if (status === 401 || errorMessage.includes('Authentication required') || errorMessage.includes('Invalid or missing authorization header')) {
-          // Session sync should be handled by the app layer
-          throw new Error('Authentication failed. Please sign in again.');
-        }
-        
-        // TanStack Query will automatically retry on network errors
-        throw error;
-      }
+      return authenticatedApiCall<User>(
+        oxyServices,
+        activeSessionId,
+        () => oxyServices.updateProfile(updates)
+      );
     },
     // Optimistic update
     onMutate: async (updates) => {
@@ -116,22 +90,7 @@ export const useUploadAvatar = () => {
 
   return useMutation({
     mutationFn: async (file: { uri: string; type?: string; name?: string; size?: number }) => {
-      // Ensure we have a valid token before making the request
-      if (!oxyServices.hasValidToken() && activeSessionId) {
-        try {
-          await oxyServices.getTokenBySession(activeSessionId);
-        } catch (tokenError) {
-          const errorMessage = tokenError instanceof Error ? tokenError.message : String(tokenError);
-          if (errorMessage.includes('AUTH_REQUIRED_OFFLINE_SESSION') || errorMessage.includes('offline')) {
-            // Session sync should be handled by the app layer
-            throw new Error('Session needs to be synced. Please try again.');
-          } else {
-            throw tokenError;
-          }
-        }
-      }
-
-      try {
+      return authenticatedApiCall<User>(oxyServices, activeSessionId, async () => {
         // Upload file first
         const uploadResult = await oxyServices.assetUpload(file as any, 'public');
         const fileId = uploadResult?.file?.id || uploadResult?.id || uploadResult;
@@ -142,19 +101,7 @@ export const useUploadAvatar = () => {
 
         // Update profile with file ID
         return await oxyServices.updateProfile({ avatar: fileId });
-      } catch (error: any) {
-        const errorMessage = error?.message || '';
-        const status = error?.status || error?.response?.status;
-        
-        // Handle authentication errors
-        if (status === 401 || errorMessage.includes('Authentication required') || errorMessage.includes('Invalid or missing authorization header')) {
-          // Session sync should be handled by the app layer
-          throw new Error('Authentication failed. Please sign in again.');
-        }
-        
-        // TanStack Query will automatically retry on network errors
-        throw error;
-      }
+      });
     },
     onMutate: async (file) => {
       await queryClient.cancelQueries({ queryKey: queryKeys.accounts.current() });
@@ -267,38 +214,11 @@ export const useUpdatePrivacySettings = () => {
         throw new Error('User ID is required');
       }
 
-      // Ensure we have a valid token before making the request
-      if (!oxyServices.hasValidToken() && activeSessionId) {
-        try {
-          // Try to get token for the session
-          await oxyServices.getTokenBySession(activeSessionId);
-        } catch (tokenError) {
-          // If getting token fails, might be an offline session - try syncing
-          const errorMessage = tokenError instanceof Error ? tokenError.message : String(tokenError);
-          if (errorMessage.includes('AUTH_REQUIRED_OFFLINE_SESSION') || errorMessage.includes('offline')) {
-            // Session sync should be handled by the app layer
-            throw new Error('Session needs to be synced. Please try again.');
-          } else {
-            throw tokenError;
-          }
-        }
-      }
-
-      try {
-        return await oxyServices.updatePrivacySettings(settings, targetUserId);
-      } catch (error: any) {
-        const errorMessage = error?.message || '';
-        const status = error?.status || error?.response?.status;
-        
-        // Handle authentication errors
-        if (status === 401 || errorMessage.includes('Authentication required') || errorMessage.includes('Invalid or missing authorization header')) {
-          // Session sync should be handled by the app layer
-          throw new Error('Authentication failed. Please sign in again.');
-        }
-        
-        // TanStack Query will automatically retry on network errors
-        throw error;
-      }
+      return authenticatedApiCall<Record<string, unknown>>(
+        oxyServices,
+        activeSessionId,
+        () => oxyServices.updatePrivacySettings(settings, targetUserId)
+      );
     },
     // Optimistic update
     onMutate: async ({ settings, userId }) => {
@@ -354,12 +274,12 @@ export const useUpdatePrivacySettings = () => {
       // Also update account query if it contains privacy settings
       const currentUser = queryClient.getQueryData<User>(queryKeys.accounts.current());
       if (currentUser) {
-        const updatedUser = {
+        const updatedUser: User = {
           ...currentUser,
-          privacySettings: data,
+          privacySettings: data as { [key: string]: unknown },
         };
         queryClient.setQueryData<User>(queryKeys.accounts.current(), updatedUser);
-        
+
         // Update authStore so frontend components see the changes immediately
         useAuthStore.getState().setUser(updatedUser);
       }
@@ -376,6 +296,25 @@ export const useUpdatePrivacySettings = () => {
   });
 };
 
+/** Uploaded file data structure from API */
+interface UploadedFile {
+  id: string;
+  originalName?: string;
+  sha256?: string;
+  mime?: string;
+  size?: number;
+  createdAt?: string;
+  metadata?: Record<string, unknown>;
+  variants?: Array<{ type: string; key: string; width?: number; height?: number; readyAt?: string; metadata?: Record<string, unknown> }>;
+}
+
+/** Upload result type that supports both single file and batch responses */
+interface UploadResult {
+  file?: UploadedFile;
+  files?: UploadedFile[];
+  id?: string;
+}
+
 /**
  * Upload file with authentication handling and progress tracking
  */
@@ -383,49 +322,22 @@ export const useUploadFile = () => {
   const { oxyServices, activeSessionId } = useOxy();
 
   return useMutation({
-    mutationFn: async ({ 
-      file, 
-      visibility, 
-      metadata, 
-      onProgress 
-    }: { 
-      file: File; 
-      visibility?: 'private' | 'public' | 'unlisted'; 
+    mutationFn: async ({
+      file,
+      visibility,
+      metadata,
+      onProgress
+    }: {
+      file: File;
+      visibility?: 'private' | 'public' | 'unlisted';
       metadata?: Record<string, any>;
       onProgress?: (progress: number) => void;
     }) => {
-      // Ensure we have a valid token before making the request
-      if (!oxyServices.hasValidToken() && activeSessionId) {
-        try {
-          // Try to get token for the session
-          await oxyServices.getTokenBySession(activeSessionId);
-        } catch (tokenError) {
-          // If getting token fails, might be an offline session - try syncing
-          const errorMessage = tokenError instanceof Error ? tokenError.message : String(tokenError);
-          if (errorMessage.includes('AUTH_REQUIRED_OFFLINE_SESSION') || errorMessage.includes('offline')) {
-            // Session sync should be handled by the app layer
-            throw new Error('Session needs to be synced. Please try again.');
-          } else {
-            throw tokenError;
-          }
-        }
-      }
-
-      try {
-        return await oxyServices.assetUpload(file as any, visibility, metadata, onProgress);
-      } catch (error: any) {
-        const errorMessage = error?.message || '';
-        const status = error?.status || error?.response?.status;
-        
-        // Handle authentication errors
-        if (status === 401 || errorMessage.includes('Authentication required') || errorMessage.includes('Invalid or missing authorization header')) {
-          // Session sync should be handled by the app layer
-          throw new Error('Authentication failed. Please sign in again.');
-        }
-        
-        // TanStack Query will automatically retry on network errors
-        throw error;
-      }
+      return authenticatedApiCall<UploadResult>(
+        oxyServices,
+        activeSessionId,
+        () => oxyServices.assetUpload(file as any, visibility, metadata, onProgress)
+      );
     },
   });
 };