@oxyhq/services 5.11.9 → 5.11.10

package/src/ui/context/OxyContext.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useEffect, useCallback, type ReactNode, useMemo, useRef, useState } from 'react';
+import type { UseFollowHook } from '../hooks/useFollow.types';
 import { View, Text } from 'react-native';
 import { OxyServices } from '../../core';
 import type { User, ApiError } from '../../models/interfaces';
@@ -9,8 +10,8 @@ import { toast } from '../../lib/sonner';
 import { useAuthStore } from '../stores/authStore';
 
 // Define the context shape
-
-import { useFollow as baseUseFollow } from '../hooks/useFollow';
+// NOTE: We intentionally avoid importing useFollow here to prevent a require cycle.
+// If consumers relied on `const { useFollow } = useOxy()`, we provide a lazy proxy below.
 
 export interface OxyContextState {
   // Authentication state
@@ -22,6 +23,9 @@ export interface OxyContextState {
   isLoading: boolean;
   error: string | null;
 
+  // Language state
+  currentLanguage: string;
+
   // Auth methods
   login: (username: string, password: string, deviceName?: string) => Promise<User>;
   logout: (targetSessionId?: string) => Promise<void>;
@@ -33,6 +37,9 @@ export interface OxyContextState {
   removeSession: (sessionId: string) => Promise<void>;
   refreshSessions: () => Promise<void>;
 
+  // Language methods
+  setLanguage: (languageId: string) => Promise<void>;
+
   // Device management methods
   getDeviceSessions: () => Promise<any[]>;
   logoutAllDeviceSessions: () => Promise<void>;
@@ -47,9 +54,10 @@ export interface OxyContextState {
   hideBottomSheet?: () => void;
 
   /**
-   * useFollow hook, exposed for convenience so you can do const { useFollow } = useOxy();
+   * (Deprecated) useFollow hook access via context. Prefer: import { useFollow } from '@oxyhq/services';
+   * Kept for backward compatibility; implemented as a lazy dynamic require to avoid circular dependency.
    */
-  useFollow: any;
+  useFollow: UseFollowHook; // Back-compat; prefer direct import
 }
 
 // Create the context with default values
@@ -122,6 +130,7 @@ const getStorage = async (): Promise<StorageInterface> => {
 // Storage keys for sessions
 const getStorageKeys = (prefix = 'oxy_session') => ({
   activeSessionId: `${prefix}_active_session_id`, // Only store the active session ID
+  language: `${prefix}_language`, // Store the selected language
 });
 
 export const OxyProvider: React.FC<OxyContextProviderProps> = ({
@@ -162,6 +171,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const [sessions, setSessions] = React.useState<ClientSession[]>([]);
   const [activeSessionId, setActiveSessionId] = React.useState<string | null>(null);
   const [storage, setStorage] = React.useState<StorageInterface | null>(null);
+  const [currentLanguage, setCurrentLanguage] = React.useState<string>('en');
   // Add a new state to track token restoration
   const [tokenReady, setTokenReady] = React.useState(false);
 
@@ -185,88 +195,66 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         const platformStorage = await getStorage();
         setStorage(platformStorage);
       } catch (error) {
-        console.error('Failed to initialize storage:', error);
+        console.error('Init storage failed', error);
         useAuthStore.setState({ error: 'Failed to initialize storage' });
       }
     };
-
     initStorage();
   }, []);
 
-  // Effect to initialize authentication state - only store session ID
+  // Initialize authentication state
   useEffect(() => {
     const initAuth = async () => {
       if (!storage) return;
-
       useAuthStore.setState({ isLoading: true });
       try {
-        // Only load the active session ID from storage
-        const storedActiveSessionId = await storage.getItem(keys.activeSessionId);
-
-        console.log('Auth - activeSessionId:', storedActiveSessionId);
-        console.log('Auth - storage available:', !!storage);
-        console.log('Auth - oxyServices available:', !!oxyServices);
+        setTokenReady(false);
+        
+        // Load saved language preference
+        const savedLanguage = await storage.getItem(keys.language);
+        if (savedLanguage) {
+          setCurrentLanguage(savedLanguage);
+        }
 
+        // Try to restore active session from storage
+        const storedActiveSessionId = await storage.getItem(keys.activeSessionId);
         if (storedActiveSessionId) {
-          // Validate the stored session with the backend
           try {
-            const validation = await oxyServices.validateSession(storedActiveSessionId, {
-              useHeaderValidation: true
-            });
-
+            const validation = await oxyServices.validateSession(storedActiveSessionId, { useHeaderValidation: true });
             if (validation.valid) {
-              console.log('Auth - session validated successfully');
               setActiveSessionId(storedActiveSessionId);
-
-              // Get access token for API calls
               await oxyServices.getTokenBySession(storedActiveSessionId);
-
-              // Load full user data from backend
               const fullUser = await oxyServices.getUserBySession(storedActiveSessionId);
               loginSuccess(fullUser);
-              setMinimalUser({
-                id: fullUser.id,
-                username: fullUser.username,
-                avatar: fullUser.avatar
-              });
-
-              // Load sessions from backend
+              setMinimalUser({ id: fullUser.id, username: fullUser.username, avatar: fullUser.avatar });
               const serverSessions = await oxyServices.getSessionsBySessionId(storedActiveSessionId);
-              const clientSessions: ClientSession[] = serverSessions.map(serverSession => ({
-                sessionId: serverSession.sessionId,
-                deviceId: serverSession.deviceId,
-                expiresAt: serverSession.expiresAt || new Date().toISOString(),
-                lastActive: serverSession.lastActive || new Date().toISOString(),
-                userId: serverSession.userId || fullUser.id
+              const clientSessions: ClientSession[] = serverSessions.map(s => ({
+                sessionId: s.sessionId,
+                deviceId: s.deviceId,
+                expiresAt: s.expiresAt || new Date().toISOString(),
+                lastActive: s.lastActive || new Date().toISOString(),
+                userId: s.userId || fullUser.id
               }));
               setSessions(clientSessions);
-
-              if (onAuthStateChange) {
-                onAuthStateChange(fullUser);
-              }
+              onAuthStateChange?.(fullUser);
             } else {
-              console.log('Auth - session invalid, clearing storage');
               await clearAllStorage();
             }
-          } catch (error) {
-            console.error('Auth - session validation error:', error);
+          } catch (e) {
+            console.error('Session validation error', e);
             await clearAllStorage();
           }
-        } else {
-          console.log('Auth - no stored session found, user needs to login');
         }
-      } catch (err) {
-        console.error('Auth initialization error:', err);
+        setTokenReady(true);
+      } catch (e) {
+        console.error('Auth init error', e);
         await clearAllStorage();
       } finally {
         useAuthStore.setState({ isLoading: false });
       }
     };
-
-    if (storage) {
-      initAuth();
-    }
-  }, [storage, oxyServices, keys, onAuthStateChange, loginSuccess, setMinimalUser, clearAllStorage]);
+    initAuth();
+  }, [storage, oxyServices, keys, onAuthStateChange, loginSuccess, clearAllStorage]);
 
 
 
@@ -630,6 +618,26 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [activeSessionId, oxyServices]);
 
+  // Language management method
+  const setLanguage = useCallback(async (languageId: string): Promise<void> => {
+    if (!storage) throw new Error('Storage not initialized');
+
+    try {
+      // Save language preference
+      await storage.setItem(keys.language, languageId);
+      setCurrentLanguage(languageId);
+      
+      console.log(`Language changed to ${languageId}`);
+      
+      // TODO: Here you can add any additional logic needed for app-wide language updates
+      // such as updating i18n configuration, refreshing translations, etc.
+      
+    } catch (error) {
+      console.error('Error saving language preference:', error);
+      throw error;
+    }
+  }, [storage, keys.language]);
+
   // Bottom sheet control methods
   const showBottomSheet = useCallback((screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => {
     console.log('showBottomSheet called with:', screenOrConfig);
@@ -691,6 +699,24 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   });
 
   // Context value - optimized to prevent unnecessary re-renders
+  // Lazy proxy to load the hook only when accessed, breaking the static import cycle.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  const useFollowProxy: UseFollowHook = (userId?: string | string[]) => {
+    try {
+      // Dynamically require to avoid top-level cycle
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const mod = require('../hooks/useFollow');
+      if (mod && typeof mod.useFollow === 'function') {
+        return mod.useFollow(userId);
+      }
+      console.warn('useFollow module did not export a function as expected');
+      return { isFollowing: false, isLoading: false, error: null, toggleFollow: async () => { }, setFollowStatus: () => { }, fetchStatus: async () => { }, clearError: () => { }, followerCount: null, followingCount: null, isLoadingCounts: false, fetchUserCounts: async () => { }, setFollowerCount: () => { }, setFollowingCount: () => { } } as any;
+    } catch (e) {
+      console.warn('Failed to dynamically load useFollow hook:', e);
+      return { isFollowing: false, isLoading: false, error: null, toggleFollow: async () => { }, setFollowStatus: () => { }, fetchStatus: async () => { }, clearError: () => { }, followerCount: null, followingCount: null, isLoadingCounts: false, fetchUserCounts: async () => { }, setFollowerCount: () => { }, setFollowingCount: () => { } } as any;
+    }
+  };
+
   const contextValue: OxyContextState = useMemo(() => ({
     user,
     minimalUser,
@@ -699,6 +725,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     isAuthenticated,
     isLoading,
     error,
+    currentLanguage,
     login,
     logout,
     logoutAll,
@@ -706,6 +733,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     switchSession,
     removeSession,
     refreshSessions,
+    setLanguage,
     getDeviceSessions,
     logoutAllDeviceSessions,
     updateDeviceName,
@@ -713,7 +741,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     bottomSheetRef,
     showBottomSheet,
     hideBottomSheet,
-    useFollow: baseUseFollow,
+    useFollow: useFollowProxy,
   }), [
     user?.id, // Only depend on user ID, not the entire user object
     minimalUser?.id,
@@ -722,6 +750,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     isAuthenticated,
     isLoading,
     error,
+    currentLanguage,
     login,
     logout,
     logoutAll,
@@ -729,6 +758,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     switchSession,
     removeSession,
     refreshSessions,
+    setLanguage,
     getDeviceSessions,
     logoutAllDeviceSessions,
     updateDeviceName,

package/src/ui/hooks/useFollow.types.ts

@@ -0,0 +1,33 @@
+// Type-only definition for the useFollow hook to allow context exposure without runtime import cycles.
+// Expand this as needed to better reflect the real return type.
+
+export type SingleFollowResult = {
+  isFollowing: boolean;
+  isLoading: boolean;
+  error: string | null;
+  toggleFollow: () => Promise<void>;
+  setFollowStatus: (following: boolean) => void;
+  fetchStatus: () => Promise<void>;
+  clearError: () => void;
+  followerCount: number | null;
+  followingCount: number | null;
+  isLoadingCounts: boolean;
+  fetchUserCounts: () => Promise<void>;
+  setFollowerCount: (count: number) => void;
+  setFollowingCount: (count: number) => void;
+};
+
+export type MultiFollowResult = {
+  followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }>;
+  toggleFollowForUser: (userId: string) => Promise<void>;
+  setFollowStatusForUser: (userId: string, following: boolean) => void;
+  fetchStatusForUser: (userId: string) => Promise<void>;
+  fetchAllStatuses: () => Promise<void>;
+  clearErrorForUser: (userId: string) => void;
+  isAnyLoading: boolean;
+  hasAnyError: boolean;
+  allFollowing: boolean;
+  allNotFollowing: boolean;
+};
+
+export type UseFollowHook = (userId?: string | string[]) => SingleFollowResult | MultiFollowResult;

package/src/ui/navigation/OxyRouter.tsx

@@ -25,6 +25,8 @@ import UserLinksScreen from '../screens/UserLinksScreen';
 import FileManagementScreen from '../screens/FileManagementScreen';
 import RecoverAccountScreen from '../screens/RecoverAccountScreen';
 import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
+import WelcomeNewUserScreen from '../screens/WelcomeNewUserScreen';
+import LanguageSelectorScreen from '../screens/LanguageSelectorScreen';
 
 // Import types
 import type { OxyRouterProps, RouteConfig } from './types';
@@ -115,6 +117,14 @@ const routes: Record<string, RouteConfig> = {
         component: PaymentGatewayScreen,
         snapPoints: ['60%', '90%'],
     },
+    WelcomeNewUser: {
+        component: WelcomeNewUserScreen,
+        snapPoints: ['65%', '90%'],
+    },
+    LanguageSelector: {
+        component: LanguageSelectorScreen,
+        snapPoints: ['70%', '100%'],
+    },
 };
 
 const OxyRouter: React.FC<OxyRouterProps> = ({

package/src/ui/navigation/types.ts

@@ -1,6 +1,7 @@
 import type { OxyServices } from '../../core';
 import type { User } from '../../models/interfaces';
 import type { ComponentType, ReactNode } from 'react';
+import type { QueryClient } from '@tanstack/react-query';
 
 /**
  * Base props for all screens in the Oxy UI system
@@ -138,4 +139,9 @@ export interface OxyProviderProps {
    * @default true
    */
   showInternalToaster?: boolean;
+
+  /**
+   * Optional QueryClient instance for React Query. If not provided, a sensible default is created.
+   */
+  queryClient?: QueryClient;
 }

package/src/ui/screens/AccountCenterScreen.tsx

@@ -16,13 +16,11 @@ import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
 import { fontFamilies } from '../styles/fonts';
-import {
-    ProfileCard,
-    Section,
-    QuickActions,
-    GroupedSection,
-    GroupedItem
-} from '../components';
+import ProfileCard from '../components/ProfileCard';
+import Section from '../components/Section';
+import QuickActions from '../components/QuickActions';
+import GroupedSection from '../components/GroupedSection';
+import GroupedItem from '../components/GroupedItem';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -218,6 +216,14 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 subtitle: 'Manage notification settings',
                                 onPress: () => toast.info('Notifications feature coming soon!'),
                             }] : []),
+                            {
+                                id: 'language',
+                                icon: 'language',
+                                iconColor: '#32D74B',
+                                title: 'Language',
+                                subtitle: 'Choose your preferred language',
+                                onPress: () => navigate('LanguageSelector'),
+                            },
                             {
                                 id: 'help',
                                 icon: 'help-circle',

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -192,7 +192,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     <>
                                         <View style={styles.userIcon}>
                                             <Avatar
-                                                uri={user?.avatar?.url}
+                                                uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
                                                 name={user?.name?.full}
                                                 size={40}
                                                 theme={theme}
@@ -301,8 +301,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     customContent: (
                                         <>
                                             <View style={styles.userIcon}>
-                                                {account.avatar?.url ? (
-                                                    <Image source={{ uri: account.avatar.url }} style={styles.accountAvatarImage} />
+                                                {account.avatar ? (
+                                                    <Image source={{ uri: oxyServices.getFileStreamUrl(account.avatar as string) }} style={styles.accountAvatarImage} />
                                                 ) : (
                                                     <View style={styles.accountAvatarFallback}>
                                                         <Text style={styles.accountAvatarText}>

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -15,6 +15,7 @@ import {
 import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import Avatar from '../components/Avatar';
+import type { FileMetadata } from '../../models/interfaces';
 import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
@@ -29,7 +30,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     goBack,
     navigate,
 }) => {
-    const { user, oxyServices, isLoading: authLoading, isAuthenticated } = useOxy();
+    const { user, oxyServices, isLoading: authLoading, isAuthenticated, showBottomSheet } = useOxy();
     const updateUser = useAuthStore((state) => state.updateUser);
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
@@ -45,7 +46,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     const [bio, setBio] = useState('');
     const [location, setLocation] = useState('');
     const [links, setLinks] = useState<string[]>([]);
-    const [avatarUrl, setAvatarUrl] = useState('');
+    const [avatarFileId, setAvatarFileId] = useState('');
 
     // Editing states
     const [editingField, setEditingField] = useState<string | null>(null);
@@ -173,7 +174,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                 setLinks([]);
                 setTempLinksWithMetadata([]);
             }
-            setAvatarUrl(user.avatar?.url || '');
+            setAvatarFileId(typeof user.avatar === 'string' ? user.avatar : '');
         }
     }, [user]);
 
@@ -203,8 +204,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
             }
 
             // Handle avatar
-            if (avatarUrl !== user.avatar?.url) {
-                updates.avatar = { url: avatarUrl };
+            if (avatarFileId !== (typeof user.avatar === 'string' ? user.avatar : '')) {
+                updates.avatar = avatarFileId;
             }
 
             await updateUser(updates, oxyServices);
@@ -225,14 +226,55 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         }
     };
 
-    const handleAvatarUpdate = () => {
-        // Always use confirmAction for both web and native
+    const handleAvatarRemove = () => {
         confirmAction('Remove your profile picture?', () => {
-            setAvatarUrl('');
+            setAvatarFileId('');
             toast.success('Avatar removed');
         });
     };
 
+    const openAvatarPicker = useCallback(() => {
+        showBottomSheet?.({
+            screen: 'FileManagement',
+            props: {
+                selectMode: true,
+                multiSelect: false,
+                afterSelect: 'back',
+                onSelect: (file: FileMetadata) => {
+                    if (!file.contentType.startsWith('image/')) {
+                        toast.error('Please select an image file');
+                        return;
+                    }
+                    // If already selected, do nothing
+                    if (file.id === avatarFileId) {
+                        toast.info?.('Avatar unchanged');
+                        return;
+                    }
+                    setAvatarFileId(file.id);
+                    toast.success('Avatar selected');
+                    // Auto-save avatar immediately (does not close edit profile screen)
+                    (async () => {
+                        try {
+                            console.log('[AccountSettings] Auto-saving avatar', file.id);
+                            setIsSaving(true);
+                            await updateUser({ avatar: file.id }, oxyServices);
+                            // Force refresh current user cache (updateUser already does a fetch with force=true internally)
+                            // Extra safeguard: ensure avatarFileId reflects saved id (already set) and trigger any dependent UI.
+                            toast.success('Avatar updated');
+                        } catch (e: any) {
+                            console.error('[AccountSettings] Failed to auto-save avatar', e);
+                            toast.error(e.message || 'Failed to update avatar');
+                        } finally {
+                            setIsSaving(false);
+                        }
+                    })();
+                },
+                // Limit to images client-side by using photos view if later exposed
+                disabledMimeTypes: ['video/', 'audio/', 'application/pdf']
+            }
+        });
+    }, [showBottomSheet, oxyServices, avatarFileId, updateUser]);
+
     const startEditing = (type: string, currentValue: string) => {
         switch (type) {
             case 'displayName':
@@ -871,19 +913,29 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                         {/* Profile Picture Section */}
                         <View style={styles.section}>
                             <Text style={styles.sectionTitle}>Profile Picture</Text>
-
                             <GroupedSection
                                 items={[
                                     {
                                         id: 'profile-photo',
-                                        icon: avatarUrl ? undefined : 'person',
+                                        icon: avatarFileId ? undefined : 'person',
                                         iconColor: '#007AFF',
-                                        image: avatarUrl || undefined,
+                                        // Use download URL (includes token + fallback) instead of raw stream for reliability
+                                        image: avatarFileId ? oxyServices.getFileDownloadUrl(avatarFileId, 'thumb') : undefined,
                                         imageSize: 40,
                                         title: 'Profile Photo',
-                                        subtitle: avatarUrl ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
-                                        onPress: handleAvatarUpdate,
+                                        subtitle: avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
+                                        onPress: openAvatarPicker,
                                     },
+                                    ...(avatarFileId ? [
+                                        {
+                                            id: 'remove-profile-photo',
+                                            icon: 'trash',
+                                            iconColor: '#FF3B30',
+                                            title: 'Remove Photo',
+                                            subtitle: 'Delete current profile picture',
+                                            onPress: handleAvatarRemove,
+                                        }
+                                    ] : []),
                                 ]}
                                 theme={theme}
                             />

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -294,8 +294,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                                 <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard]}>
                                     <View style={styles.userIcon}>
-                                        {user.avatar?.url ? (
-                                            <Image source={{ uri: user.avatar.url }} style={styles.accountAvatarImage} />
+                                        {typeof user.avatar === 'string' && user.avatar ? (
+                                            <Image source={{ uri: oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') }} style={styles.accountAvatarImage} />
                                         ) : (
                                             <View style={styles.accountAvatarFallback}>
                                                 <Text style={styles.accountAvatarText}>
@@ -356,8 +356,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                         <View style={styles.accountAvatarFallback}>
                                                             <ActivityIndicator size="small" color="#007AFF" />
                                                         </View>
-                                                    ) : userProfile?.avatar?.url ? (
-                                                        <Image source={{ uri: userProfile.avatar.url }} style={styles.accountAvatarImage} />
+                                                    ) : (typeof userProfile?.avatar === 'string' && userProfile.avatar) ? (
+                                                        <Image source={{ uri: oxyServices.getFileDownloadUrl(userProfile.avatar as string, 'thumb') }} style={styles.accountAvatarImage} />
                                                     ) : (
                                                         <View style={styles.accountAvatarFallback}>
                                                             <Text style={styles.accountAvatarText}>