@oxyhq/services 5.4.4 → 5.4.5

package/src/ui/components/FollowButton.tsx

@@ -1,25 +1,33 @@
-import React, { useState, useEffect } from 'react';
-import { 
-  TouchableOpacity, 
-  Text, 
-  StyleSheet, 
-  ViewStyle, 
-  TextStyle, 
-  StyleProp, 
+import React, { useEffect, useCallback } from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  StyleProp,
   Platform,
   ActivityIndicator
 } from 'react-native';
-import Animated, { 
-  useSharedValue, 
-  useAnimatedStyle, 
-  withSpring, 
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
   interpolateColor,
-  Easing, 
-  withTiming 
+  Easing,
+  withTiming
 } from 'react-native-reanimated';
+import { useDispatch, useSelector } from 'react-redux';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
+import {
+  toggleFollowUser,
+  setFollowingStatus,
+  clearFollowError,
+  fetchFollowStatus
+} from '../store';
+import type { RootState, AppDispatch } from '../store';
 
 export interface FollowButtonProps {
   /**
@@ -59,7 +67,7 @@ export interface FollowButtonProps {
    * @default false
    */
   disabled?: boolean;
-  
+
   /**
    * Whether to show loading indicator during API calls
    * @default true
@@ -82,6 +90,7 @@ export interface FollowButtonProps {
 
 /**
  * An animated follow button with interactive state changes and preventDefault support
+ * Uses Redux for state management to ensure all buttons with the same user ID stay synchronized
  * 
  * @example
  * ```tsx
@@ -130,36 +139,74 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   preventParentActions = true,
   onPress,
 }) => {
+  const dispatch = useDispatch();
   const { oxyServices, isAuthenticated } = useOxy();
-  const [isFollowing, setIsFollowing] = useState(initiallyFollowing);
-  const [isLoading, setIsLoading] = useState(false);
+
+  // Optimized single selector to prevent multiple re-renders
+  const followState = useSelector((state: RootState) => ({
+    isFollowing: state.follow.followingUsers[userId] ?? initiallyFollowing ?? false,
+    isLoading: state.follow.loadingUsers[userId] ?? false,
+    error: state.follow.errors[userId]
+  }));
+
+  // Whether the follow status has been loaded from the store
+  const isStatusKnown = useSelector((state: RootState) =>
+    Object.prototype.hasOwnProperty.call(state.follow.followingUsers, userId)
+  );
+
+  const { isFollowing, isLoading, error } = followState;
 
   // Animation values
-  const animationProgress = useSharedValue(initiallyFollowing ? 1 : 0);
+  const animationProgress = useSharedValue(isFollowing ? 1 : 0);
   const scale = useSharedValue(1);
-  
+
+  // Initialize Redux state with initial value if not already set
+  useEffect(() => {
+    if (userId && !isStatusKnown) {
+      // Set the initial state regardless of whether initiallyFollowing is defined
+      const initialState = initiallyFollowing ?? false;
+      dispatch(setFollowingStatus({ userId, isFollowing: initialState }));
+    }
+  }, [userId, initiallyFollowing, isStatusKnown, dispatch]);
+
+  // Fetch latest follow status from backend on mount if authenticated
+  // This runs separately and will overwrite the initial state with actual data
+  useEffect(() => {
+    if (userId && isAuthenticated) {
+      dispatch(fetchFollowStatus({ userId, oxyServices }));
+    }
+  }, [userId, oxyServices, isAuthenticated, dispatch]);
+
   // Update the animation value when isFollowing changes
   useEffect(() => {
     animationProgress.value = withTiming(isFollowing ? 1 : 0, {
       duration: 300,
       easing: Easing.bezier(0.25, 0.1, 0.25, 1),
     });
-  }, [isFollowing, animationProgress]);
+  }, [isFollowing]); // Removed animationProgress from dependencies as it's stable
+
+  // Show error toast when error occurs
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+      dispatch(clearFollowError(userId));
+    }
+  }, [error]); // Removed userId and dispatch to prevent unnecessary runs
 
-  // The button press handler with preventDefault support
-  const handlePress = async (event?: any) => {
+  // The button press handler with preventDefault support - memoized to prevent recreation
+  const handlePress = useCallback(async (event?: any) => {
     // Prevent parent actions if enabled (e.g., if inside a link or pressable container)
     if (preventParentActions && event) {
       // For React Native Web compatibility
       if (Platform.OS === 'web' && event.preventDefault) {
         event.preventDefault();
       }
-      
+
       // Stop event propagation to prevent parent TouchableOpacity/Pressable actions
       if (event.stopPropagation) {
         event.stopPropagation();
       }
-      
+
       // For React Native, prevent gesture bubbling
       if (event.nativeEvent && event.nativeEvent.stopPropagation) {
         event.nativeEvent.stopPropagation();
@@ -172,47 +219,58 @@ const FollowButton: React.FC<FollowButtonProps> = ({
       return;
     }
 
-    if (disabled || isLoading || !isAuthenticated) return;
-    
+    if (disabled || followState.isLoading) return;
+
+    // Check if user is authenticated - show toast instead of disabling
+    if (!isAuthenticated) {
+      toast.error('Please sign in to follow users');
+      return;
+    }
+
     // Touch feedback animation
     scale.value = withSpring(0.95, { damping: 10 }, () => {
       scale.value = withSpring(1);
     });
 
-    setIsLoading(true);
-
     try {
-      // This should be replaced with actual API call to your services
-      if (isFollowing) {
-        // Unfollow API call would go here
-        // await oxyServices.user.unfollowUser(userId);
-        console.log(`Unfollowing user: ${userId}`);
-        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
-      } else {
-        // Follow API call would go here
-        // await oxyServices.user.followUser(userId);
-        console.log(`Following user: ${userId}`);
-        await new Promise(resolve => setTimeout(resolve, 500)); // Simulating API call
-      }
+      // Dispatch the async action to follow/unfollow
+      const result = await dispatch(toggleFollowUser({
+        userId,
+        oxyServices,
+        isCurrentlyFollowing: followState.isFollowing
+      })).unwrap();
 
-      // Toggle following state with animation
-      const newFollowingState = !isFollowing;
-      setIsFollowing(newFollowingState);
-      
       // Call the callback if provided
       if (onFollowChange) {
-        onFollowChange(newFollowingState);
+        onFollowChange(result.isFollowing);
       }
 
       // Show success toast
-      toast.success(newFollowingState ? 'Following user!' : 'Unfollowed user');
-    } catch (error) {
+      toast.success(result.isFollowing ? 'Following user!' : 'Unfollowed user');
+    } catch (error: any) {
       console.error('Follow action failed:', error);
-      toast.error('Failed to update follow status. Please try again.');
-    } finally {
-      setIsLoading(false);
+
+      // Show user-friendly error messages for state mismatches
+      const errorMessage = error?.toString() || 'Unknown error';
+      if (errorMessage.includes('State synced with backend')) {
+        toast.info('Status updated. Please try again.');
+      } else {
+        toast.error(`Failed to ${followState.isFollowing ? 'unfollow' : 'follow'} user. Please try again.`);
+      }
     }
-  };
+  }, [
+    preventParentActions,
+    onPress,
+    disabled,
+    followState.isLoading,
+    followState.isFollowing,
+    isAuthenticated,
+    scale,
+    dispatch,
+    userId,
+    oxyServices,
+    onFollowChange
+  ]);
 
   // Animated styles for the button
   const animatedButtonStyle = useAnimatedStyle(() => {
@@ -221,7 +279,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
       [0, 1],
       ['#d169e5', '#FFFFFF']
     );
-    
+
     const borderColor = interpolateColor(
       animationProgress.value,
       [0, 1],
@@ -296,7 +354,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
     <TouchableOpacity
       activeOpacity={0.8}
       onPress={handlePress}
-      disabled={disabled || isLoading || !isAuthenticated}
+      disabled={disabled || isLoading}
     >
       <Animated.View
         style={[
@@ -307,9 +365,9 @@ const FollowButton: React.FC<FollowButtonProps> = ({
         ]}
       >
         {isLoading && showLoadingState ? (
-          <ActivityIndicator 
-            size="small" 
-            color={isFollowing ? '#d169e5' : '#FFFFFF'} 
+          <ActivityIndicator
+            size="small"
+            color={isFollowing ? '#d169e5' : '#FFFFFF'}
           />
         ) : (
           <Animated.Text

package/src/ui/components/OxySignInButton.tsx

@@ -88,10 +88,10 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     screen = 'SignIn',
 }) => {
     // Get all needed values from context in a single call
-    const { user, showBottomSheet } = useOxy();
+    const { isAuthenticated, showBottomSheet } = useOxy();
 
     // Don't show the button if already authenticated (unless explicitly overridden)
-    if (user && !showWhenAuthenticated) return null;
+    if (isAuthenticated && !showWhenAuthenticated) return null;
 
     // Default handler that uses the context methods
     const handlePress = () => {

package/src/ui/context/OxyContext.tsx

@@ -11,7 +11,7 @@ export interface OxyContextState {
   minimalUser: MinimalUserData | null; // Minimal user data for UI
   sessions: SecureClientSession[]; // All active sessions
   activeSessionId: string | null;
-  isAuthenticated: boolean;
+  isAuthenticated: boolean; // Single source of truth for authentication - use this instead of service methods
   isLoading: boolean;
   error: string | null;
 
@@ -640,13 +640,23 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [bottomSheetRef]);
 
+  // Compute comprehensive authentication status
+  // This is the single source of truth for authentication across the entire app
+  const isAuthenticated = useMemo(() => {
+    // User is authenticated if:
+    // 1. We have a full user object loaded, OR
+    // 2. We have an active session with a valid token
+    // This covers both the loaded state and the loading-but-authenticated state
+    return !!user || (!!activeSessionId && !!oxyServices?.getCurrentUserId());
+  }, [user, activeSessionId, oxyServices]);
+
   // Context value
   const contextValue: OxyContextState = {
     user,
     minimalUser,
     sessions,
     activeSessionId,
-    isAuthenticated: !!user,
+    isAuthenticated,
     isLoading,
     error,
     login,

package/src/ui/hooks/index.ts

@@ -0,0 +1 @@
+export { useFollow } from './useFollow'; 

package/src/ui/hooks/useFollow.ts

@@ -0,0 +1,173 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback, useMemo } from 'react';
+import { toggleFollowUser, setFollowingStatus, clearFollowError, fetchFollowStatus } from '../store';
+import type { RootState } from '../store';
+import { useOxy } from '../context/OxyContext';
+
+// Memoized selector to prevent unnecessary re-renders
+const createFollowSelector = (userId: string) => (state: RootState) => ({
+  isFollowing: state.follow.followingUsers[userId] ?? false,
+  isLoading: state.follow.loadingUsers[userId] ?? false,
+  error: state.follow.errors[userId] ?? null,
+});
+
+// Memoized selector for multiple users
+const createMultipleFollowSelector = (userIds: string[]) => (state: RootState) => {
+  const followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+  const followState = state.follow;
+  
+  for (const userId of userIds) {
+    followData[userId] = {
+      isFollowing: followState.followingUsers[userId] ?? false,
+      isLoading: followState.loadingUsers[userId] ?? false,
+      error: followState.errors[userId] ?? null,
+    };
+  }
+  
+  return {
+    followData,
+    isAnyLoading: userIds.some(uid => followState.loadingUsers[uid]),
+    hasAnyError: userIds.some(uid => followState.errors[uid]),
+    allFollowing: userIds.every(uid => followState.followingUsers[uid]),
+    allNotFollowing: userIds.every(uid => !followState.followingUsers[uid]),
+  };
+};
+
+/**
+ * Custom hook for managing follow/unfollow functionality
+ * Optimized to prevent unnecessary re-renders
+ * Can handle both single user and multiple users
+ */
+export const useFollow = (userId?: string | string[]) => {
+  const dispatch = useDispatch();
+  const { oxyServices } = useOxy();
+  
+  // Memoize user IDs to prevent recreation on every render
+  const userIds = useMemo(() => {
+    return Array.isArray(userId) ? userId : userId ? [userId] : [];
+  }, [userId]);
+  
+  const isSingleUser = typeof userId === 'string';
+  
+  // Memoize selectors to prevent recreation
+  const singleUserSelector = useMemo(() => {
+    return isSingleUser && userId ? createFollowSelector(userId) : null;
+  }, [isSingleUser, userId]);
+  
+  const multipleUserSelector = useMemo(() => {
+    return !isSingleUser ? createMultipleFollowSelector(userIds) : null;
+  }, [isSingleUser, userIds]);
+  
+  // Use appropriate selector based on mode
+  const singleUserData = useSelector(singleUserSelector || (() => ({ isFollowing: false, isLoading: false, error: null })));
+  const multipleUserData = useSelector(multipleUserSelector || (() => ({ 
+    followData: {}, 
+    isAnyLoading: false, 
+    hasAnyError: false, 
+    allFollowing: false, 
+    allNotFollowing: true 
+  })));
+
+  // Memoized callbacks to prevent recreation on every render
+  const toggleFollow = useCallback(async () => {
+    if (!isSingleUser || !userId) throw new Error('toggleFollow is only available for single user mode');
+    
+    try {
+      const result = await dispatch(toggleFollowUser({
+        userId,
+        oxyServices,
+        isCurrentlyFollowing: singleUserData.isFollowing
+      })).unwrap();
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  }, [dispatch, userId, oxyServices, singleUserData.isFollowing, isSingleUser]);
+
+  const setFollowStatus = useCallback((following: boolean) => {
+    if (!isSingleUser || !userId) throw new Error('setFollowStatus is only available for single user mode');
+    dispatch(setFollowingStatus({ userId, isFollowing: following }));
+  }, [dispatch, userId, isSingleUser]);
+
+  const fetchStatus = useCallback(async () => {
+    if (!isSingleUser || !userId) throw new Error('fetchStatus is only available for single user mode');
+    
+    try {
+      await dispatch(fetchFollowStatus({ userId, oxyServices })).unwrap();
+    } catch (error) {
+      console.warn(`Failed to fetch follow status for user ${userId}:`, error);
+    }
+  }, [dispatch, userId, oxyServices, isSingleUser]);
+
+  const clearError = useCallback(() => {
+    if (!isSingleUser || !userId) throw new Error('clearError is only available for single user mode');
+    dispatch(clearFollowError(userId));
+  }, [dispatch, userId, isSingleUser]);
+
+  // Multiple user callbacks
+  const toggleFollowForUser = useCallback(async (targetUserId: string) => {
+    const currentState = multipleUserData.followData[targetUserId]?.isFollowing ?? false;
+    try {
+      const result = await dispatch(toggleFollowUser({
+        userId: targetUserId,
+        oxyServices,
+        isCurrentlyFollowing: currentState
+      })).unwrap();
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  }, [dispatch, oxyServices, multipleUserData.followData]);
+
+  const setFollowStatusForUser = useCallback((targetUserId: string, following: boolean) => {
+    dispatch(setFollowingStatus({ userId: targetUserId, isFollowing: following }));
+  }, [dispatch]);
+
+  const fetchStatusForUser = useCallback(async (targetUserId: string) => {
+    try {
+      await dispatch(fetchFollowStatus({ userId: targetUserId, oxyServices })).unwrap();
+    } catch (error) {
+      console.warn(`Failed to fetch follow status for user ${targetUserId}:`, error);
+    }
+  }, [dispatch, oxyServices]);
+
+  const fetchAllStatuses = useCallback(async () => {
+    const promises = userIds.map(uid => 
+      dispatch(fetchFollowStatus({ userId: uid, oxyServices })).unwrap().catch((error: any) => {
+        console.warn(`Failed to fetch follow status for user ${uid}:`, error);
+      })
+    );
+    await Promise.all(promises);
+  }, [dispatch, userIds, oxyServices]);
+
+  const clearErrorForUser = useCallback((targetUserId: string) => {
+    dispatch(clearFollowError(targetUserId));
+  }, [dispatch]);
+
+  // Return appropriate interface based on mode
+  if (isSingleUser && userId) {
+    return {
+      isFollowing: singleUserData.isFollowing,
+      isLoading: singleUserData.isLoading,
+      error: singleUserData.error,
+      toggleFollow,
+      setFollowStatus,
+      fetchStatus,
+      clearError,
+    };
+  }
+  
+  return {
+    followData: multipleUserData.followData,
+    toggleFollowForUser,
+    setFollowStatusForUser,
+    fetchStatusForUser,
+    fetchAllStatuses,
+    clearErrorForUser,
+    // Helper methods
+    isAnyLoading: multipleUserData.isAnyLoading,
+    hasAnyError: multipleUserData.hasAnyError,
+    allFollowing: multipleUserData.allFollowing,
+    allNotFollowing: multipleUserData.allNotFollowing,
+  };
+}; 

package/src/ui/index.ts

@@ -30,3 +30,12 @@ export { fontFamilies, fontStyles } from './styles/fonts';
 
 // Export types for navigation (internal use)
 export * from './navigation/types';
+
+// Hooks
+export { useFollow } from './hooks';
+
+// Screens
+export { default as ProfileScreen } from './screens/ProfileScreen';
+
+// Navigation
+export { default as OxyRouter } from './navigation/OxyRouter';

package/src/ui/screens/AccountCenterScreen.tsx

@@ -15,12 +15,12 @@ import { packageInfo } from '../../constants/version';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
 import { fontFamilies } from '../styles/fonts';
-import { 
-    ProfileCard, 
-    Section, 
-    QuickActions, 
-    GroupedSection, 
-    GroupedItem 
+import {
+    ProfileCard,
+    Section,
+    QuickActions,
+    GroupedSection,
+    GroupedItem
 } from '../components';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
@@ -28,7 +28,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, sessions } = useOxy();
+    const { user, logout, isLoading, sessions, isAuthenticated } = useOxy();
 
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
@@ -69,7 +69,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    if (!user) {
+    if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor }]}>
                 <Text style={[styles.message, { color: textColor }]}>Not signed in</Text>
@@ -88,13 +88,15 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     return (
         <View style={[styles.container, { backgroundColor }]}>
             {/* Header with user profile */}
-            <ProfileCard
-                user={user}
-                theme={theme}
-                onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
-                onClosePress={onClose}
-                showCloseButton={!!onClose}
-            />
+            {user && (
+                <ProfileCard
+                    user={user}
+                    theme={theme}
+                    onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
+                    onClosePress={onClose}
+                    showCloseButton={!!onClose}
+                />
+            )}
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
                 {/* Quick Actions */}