@oxyhq/services 5.7.5 → 5.8.2

package/src/ui/hooks/useFollow.ts

@@ -14,6 +14,11 @@ export const useFollow = (userId?: string | string[]) => {
   const isFollowing = isSingleUser && userId ? followState.followingUsers[userId] ?? false : false;
   const isLoading = isSingleUser && userId ? followState.loadingUsers[userId] ?? false : false;
   const error = isSingleUser && userId ? followState.errors[userId] ?? null : null;
+  
+  // Follower count helpers
+  const followerCount = isSingleUser && userId ? followState.followerCounts[userId] ?? null : null;
+  const followingCount = isSingleUser && userId ? followState.followingCounts[userId] ?? null : null;
+  const isLoadingCounts = isSingleUser && userId ? followState.loadingCounts[userId] ?? false : false;
 
   const toggleFollow = useCallback(async () => {
     if (!isSingleUser || !userId) throw new Error('toggleFollow is only available for single user mode');
@@ -35,6 +40,21 @@ export const useFollow = (userId?: string | string[]) => {
     followState.clearFollowError(userId);
   }, [isSingleUser, userId, followState]);
 
+  const fetchUserCounts = useCallback(async () => {
+    if (!isSingleUser || !userId) throw new Error('fetchUserCounts is only available for single user mode');
+    await followState.fetchUserCounts(userId, oxyServices);
+  }, [isSingleUser, userId, followState, oxyServices]);
+
+  const setFollowerCount = useCallback((count: number) => {
+    if (!isSingleUser || !userId) throw new Error('setFollowerCount is only available for single user mode');
+    followState.setFollowerCount(userId, count);
+  }, [isSingleUser, userId, followState]);
+
+  const setFollowingCount = useCallback((count: number) => {
+    if (!isSingleUser || !userId) throw new Error('setFollowingCount is only available for single user mode');
+    followState.setFollowingCount(userId, count);
+  }, [isSingleUser, userId, followState]);
+
   // Multiple user helpers
   const followData = useMemo(() => {
     const data: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
@@ -69,6 +89,11 @@ export const useFollow = (userId?: string | string[]) => {
     followState.clearFollowError(targetUserId);
   }, [followState]);
 
+  const updateCountsFromFollowAction = useCallback((targetUserId: string, action: 'follow' | 'unfollow', counts: { followers: number; following: number }) => {
+    const currentUserId = oxyServices.getCurrentUserId() || undefined;
+    followState.updateCountsFromFollowAction(targetUserId, action, counts, currentUserId);
+  }, [followState, oxyServices]);
+
   // Aggregate helpers for multiple users
   const isAnyLoading = userIds.some(uid => followState.loadingUsers[uid]);
   const hasAnyError = userIds.some(uid => !!followState.errors[uid]);
@@ -84,6 +109,13 @@ export const useFollow = (userId?: string | string[]) => {
       setFollowStatus,
       fetchStatus,
       clearError,
+      // Follower count methods
+      followerCount,
+      followingCount,
+      isLoadingCounts,
+      fetchUserCounts,
+      setFollowerCount,
+      setFollowingCount,
     };
   }
 
@@ -99,4 +131,35 @@ export const useFollow = (userId?: string | string[]) => {
     allFollowing,
     allNotFollowing,
   };
+};
+
+// Convenience hook for just follower counts
+export const useFollowerCounts = (userId: string) => {
+  const { oxyServices } = useOxy();
+  const followState = useFollowStore();
+
+  const followerCount = followState.followerCounts[userId] ?? null;
+  const followingCount = followState.followingCounts[userId] ?? null;
+  const isLoadingCounts = followState.loadingCounts[userId] ?? false;
+
+  const fetchUserCounts = useCallback(async () => {
+    await followState.fetchUserCounts(userId, oxyServices);
+  }, [userId, followState, oxyServices]);
+
+  const setFollowerCount = useCallback((count: number) => {
+    followState.setFollowerCount(userId, count);
+  }, [userId, followState]);
+
+  const setFollowingCount = useCallback((count: number) => {
+    followState.setFollowingCount(userId, count);
+  }, [userId, followState]);
+
+  return {
+    followerCount,
+    followingCount,
+    isLoadingCounts,
+    fetchUserCounts,
+    setFollowerCount,
+    setFollowingCount,
+  };
 }; 

package/src/ui/hooks/useSessionSocket.ts

@@ -33,12 +33,15 @@ export function useSessionSocket({ userId, activeSessionId, refreshSessions, log
 
     socket.on('session_update', (data: { type: string; sessionId: string }) => {
       console.log('Received session_update:', data);
+      
+      // Always refresh sessions to get the latest state
+      refreshSessions();
+      
+      // If the current session was logged out, handle it specially
       if (data.sessionId === activeSessionId) {
         if (onRemoteSignOut) onRemoteSignOut();
         else toast.info('You have been signed out remotely.');
         logout();
-      } else {
-        refreshSessions();
       }
     });
 

package/src/ui/navigation/OxyRouter.tsx

@@ -20,6 +20,7 @@ import KarmaAboutScreen from '../screens/karma/KarmaAboutScreen';
 import KarmaRewardsScreen from '../screens/karma/KarmaRewardsScreen';
 import KarmaFAQScreen from '../screens/karma/KarmaFAQScreen';
 import ProfileScreen from '../screens/ProfileScreen';
+import UserLinksScreen from '../screens/UserLinksScreen';
 import FileManagementScreen from '../screens/FileManagementScreen';
 import RecoverAccountScreen from '../screens/RecoverAccountScreen';
 import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
@@ -57,7 +58,7 @@ const routes: Record<string, RouteConfig> = {
         component: AccountOverviewScreen,
         snapPoints: ['60%', '85%'],
     },
-    AccountSettings: {
+    EditProfile: {
         component: AccountSettingsScreen,
         snapPoints: ['60%', '100%'],
     },
@@ -101,6 +102,10 @@ const routes: Record<string, RouteConfig> = {
         component: ProfileScreen,
         snapPoints: ['60%', '90%'],
     },
+    UserLinks: {
+        component: UserLinksScreen,
+        snapPoints: ['60%', '90%'],
+    },
     FileManagement: {
         component: FileManagementScreen,
         snapPoints: ['70%', '100%'],
@@ -135,11 +140,14 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 
     // Memoized navigation methods
     const navigate = useCallback((screen: string, props: Record<string, any> = {}) => {
+        console.log('OxyRouter: navigate called with screen:', screen, 'props:', props);
         if (routes[screen]) {
+            console.log('OxyRouter: screen found in routes, navigating to:', screen);
             setCurrentScreen(screen);
             setScreenHistory(prev => [...prev, screen]);
             setScreenPropsMap(prev => ({ ...prev, [screen]: props }));
         } else {
+            console.error(`OxyRouter: Screen "${screen}" not found in routes:`, Object.keys(routes));
             if (process.env.NODE_ENV !== 'production') {
                 console.error(`Screen "${screen}" not found`);
             }
@@ -165,10 +173,12 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
     useEffect(() => {
         if (navigationRef) {
             navigationRef.current = navigate;
+            console.log('OxyRouter: navigationRef.current set to navigate function');
         }
         return () => {
             if (navigationRef) {
                 navigationRef.current = null;
+                console.log('OxyRouter: navigationRef.current cleared');
             }
         };
     }, [navigate, navigationRef]);

package/src/ui/navigation/types.ts

@@ -13,6 +13,9 @@ export interface BaseScreenProps {
   onAuthenticated?: (user: User) => void;
   theme: 'light' | 'dark';
   containerWidth?: number;
+  initialStep?: number;
+  username?: string;
+  userProfile?: any;
 }
 
 /**
@@ -42,9 +45,14 @@ export interface OxyRouterProps {
  */
 export interface OxyProviderProps {
   /**
-   * Instance of OxyServices
+   * Instance of OxyServices (optional if baseURL is provided)
    */
-  oxyServices: OxyServices;
+  oxyServices?: OxyServices;
+  
+  /**
+   * API base URL for automatic service creation (optional if oxyServices is provided)
+   */
+  baseURL?: string;
   
   /**
    * Initial screen to display

package/src/ui/screens/AccountCenterScreen.tsx

@@ -81,7 +81,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 <ProfileCard
                     user={user}
                     theme={theme}
-                    onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
+                    onEditPress={() => navigate('EditProfile', { activeTab: 'profile' })}
                     onClosePress={onClose}
                     showCloseButton={!!onClose}
                 />
@@ -93,7 +93,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                     <QuickActions
                         actions={[
                             { id: 'overview', icon: 'person-circle', iconColor: '#007AFF', title: 'Overview', onPress: () => navigate('AccountOverview') },
-                            { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: 'Settings', onPress: () => navigate('AccountSettings') },
+                            { id: 'settings', icon: 'settings', iconColor: '#5856D6', title: 'Edit Profile', onPress: () => navigate('EditProfile') },
                             { id: 'sessions', icon: 'shield-checkmark', iconColor: '#30D158', title: 'Sessions', onPress: () => navigate('SessionManagement') },
                             { id: 'premium', icon: 'star', iconColor: '#FFD700', title: 'Premium', onPress: () => navigate('PremiumSubscription') },
                             ...(user?.isPremium ? [{ id: 'billing', icon: 'card', iconColor: '#34C759', title: 'Billing', onPress: () => navigate('') }] : []),
@@ -119,9 +119,9 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 id: 'settings',
                                 icon: 'settings',
                                 iconColor: '#5856D6',
-                                title: 'Account Settings',
-                                subtitle: 'Manage your preferences',
-                                onPress: () => navigate('AccountSettings'),
+                                title: 'Edit Profile',
+                                subtitle: 'Manage your profile and preferences',
+                                onPress: () => navigate('EditProfile'),
                             },
                             {
                                 id: 'sessions',

package/src/ui/screens/AccountManagementDemo.tsx

@@ -30,7 +30,7 @@ const AccountManagementDemo: React.FC = () => {
                             'Multi-account switching',
                             'Session management access'
                         ]}
-                        navigatesTo={['AccountOverview', 'AccountSwitcher', 'AccountSettings', 'SessionManagement']}
+                        navigatesTo={['AccountOverview', 'AccountSwitcher', 'EditProfile', 'SessionManagement']}
                     />
 
                     <ScreenCard
@@ -42,11 +42,11 @@ const AccountManagementDemo: React.FC = () => {
                             'Subscription management',
                             'Privacy and security overview'
                         ]}
-                        navigatesTo={['AccountSettings', 'SessionManagement']}
+                        navigatesTo={['EditProfile', 'SessionManagement']}
                     />
 
                     <ScreenCard
-                        title="AccountSettingsScreen"
+                        title="EditProfileScreen"
                         description="Complete account configuration and preferences"
                         features={[
                             'Profile editing (username, email, name)',
@@ -90,22 +90,22 @@ const AccountManagementDemo: React.FC = () => {
                     <Text style={styles.flowDescription}>
                         The screens are designed with intuitive navigation patterns:
                     </Text>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>1. Entry Point</Text>
                         <Text style={styles.flowText}>Users typically start at AccountCenterScreen</Text>
                     </View>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>2. Explore</Text>
                         <Text style={styles.flowText}>Navigate to specific screens based on needs</Text>
                     </View>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>3. Manage</Text>
                         <Text style={styles.flowText}>Perform account actions in specialized screens</Text>
                     </View>
-                    
+
                     <View style={styles.flowItem}>
                         <Text style={styles.flowStep}>4. Return</Text>
                         <Text style={styles.flowText}>Navigate back or to related screens seamlessly</Text>
@@ -142,12 +142,12 @@ const ScreenCard: React.FC<{
     <View style={styles.screenCard}>
         <Text style={styles.screenTitle}>{title}</Text>
         <Text style={styles.screenDescription}>{description}</Text>
-        
+
         <Text style={styles.featuresTitle}>Features:</Text>
         {features.map((feature, index) => (
             <Text key={index} style={styles.feature}>• {feature}</Text>
         ))}
-        
+
         <Text style={styles.navigationTitle}>Navigates to:</Text>
         {navigatesTo.map((nav, index) => (
             <Text key={index} style={styles.navigationItem}>→ {nav}</Text>