@oxyhq/services 5.4.4 → 5.4.6

package/lib/typescript/ui/store/index.d.ts

@@ -5,12 +5,59 @@ interface AuthState {
     isLoading: boolean;
     error: string | null;
 }
+interface FollowState {
+    followingUsers: Record<string, boolean>;
+    loadingUsers: Record<string, boolean>;
+    fetchingUsers: Record<string, boolean>;
+    errors: Record<string, string | null>;
+}
+export declare const fetchFollowStatus: import("@reduxjs/toolkit").AsyncThunk<{
+    userId: string;
+    isFollowing: any;
+}, {
+    userId: string;
+    oxyServices: any;
+}, {
+    state?: unknown;
+    dispatch?: import("redux-thunk").ThunkDispatch<unknown, unknown, import("redux").UnknownAction>;
+    extra?: unknown;
+    rejectValue?: unknown;
+    serializedErrorType?: unknown;
+    pendingMeta?: unknown;
+    fulfilledMeta?: unknown;
+    rejectedMeta?: unknown;
+}>;
+export declare const toggleFollowUser: import("@reduxjs/toolkit").AsyncThunk<{
+    userId: string;
+    isFollowing: boolean;
+    message: string;
+}, {
+    userId: string;
+    oxyServices: any;
+    isCurrentlyFollowing: boolean;
+}, {
+    state?: unknown;
+    dispatch?: import("redux-thunk").ThunkDispatch<unknown, unknown, import("redux").UnknownAction>;
+    extra?: unknown;
+    rejectValue?: unknown;
+    serializedErrorType?: unknown;
+    pendingMeta?: unknown;
+    fulfilledMeta?: unknown;
+    rejectedMeta?: unknown;
+}>;
 export declare const loginStart: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"auth/loginStart">, loginSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<User, "auth/loginSuccess">, loginFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "auth/loginFailure">, logout: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"auth/logout">;
+export declare const setFollowingStatus: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    userId: string;
+    isFollowing: boolean;
+}, "follow/setFollowingStatus">, clearFollowError: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "follow/clearFollowError">, resetFollowState: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"follow/resetFollowState">;
+export declare const selectIsUserBeingFetched: (state: RootState, userId: string) => boolean;
 export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
     auth: AuthState;
+    follow: FollowState;
 }, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
     dispatch: import("redux-thunk").ThunkDispatch<{
         auth: AuthState;
+        follow: FollowState;
     }, undefined, import("redux").UnknownAction>;
 }>, import("redux").StoreEnhancer]>>;
 export type RootState = ReturnType<typeof store.getState>;

package/lib/typescript/ui/store/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/store/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpD,UAAU,SAAS;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAiCD,eAAO,MAAQ,UAAU,6EAAE,YAAY,kFAAE,YAAY,oFAAE,MAAM,uEAAsB,CAAC;AAEpF,eAAO,MAAM,KAAK;;;;;;oCAIhB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/store/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpD,UAAU,SAAS;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,UAAU,WAAW;IAEnB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAExC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEtC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;CACvC;AAiBD,eAAO,MAAM,iBAAiB;;;;YAEc,MAAM;iBAAe,GAAG;;;;;;;;;;EAkCnE,CAAC;AAGF,eAAO,MAAM,gBAAgB;;;;;YAGjB,MAAM;iBACD,GAAG;0BACM,OAAO;;;;;;;;;;EAkEhC,CAAC;AAwFF,eAAO,MAAQ,UAAU,6EAAE,YAAY,kFAAE,YAAY,oFAAE,MAAM,uEAAsB,CAAC;AACpF,eAAO,MAAQ,kBAAkB;YA3D0C,MAAM;iBAAe,OAAO;iCA2DpE,gBAAgB,0FAAE,gBAAgB,mFAAwB,CAAC;AAG9F,eAAO,MAAM,wBAAwB,GAAI,OAAO,SAAS,EAAE,QAAQ,MAAM,YACzB,CAAC;AAEjD,eAAO,MAAM,KAAK;;;;;;;;oCAKhB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,KAAK,CAAC,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oxyhq/services",
-    "version": "5.4.4",
+    "version": "5.4.6",
     "description": "Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀",
     "main": "lib/commonjs/node/index.js",
     "module": "lib/module/node/index.js",

package/src/core/index.ts

@@ -67,6 +67,9 @@ interface JwtPayload {
 
 /**
  * OxyServices - Client library for interacting with the Oxy API
+ * 
+ * Note: For authentication status in UI components, use `isAuthenticated` from useOxy() context
+ * instead of checking token status directly on this service.
  */
 export class OxyServices {
   private client: AxiosInstance;
@@ -179,10 +182,12 @@ export class OxyServices {
   }
   
   /**
-   * Checks if the user is currently authenticated
-   * @returns Boolean indicating authentication status
+   * Internal method to check if we have an access token
+   * @private
+   * @returns Boolean indicating if access token exists
+   * @internal - Use `isAuthenticated` from useOxy() context in UI components instead
    */
-  public isAuthenticated(): boolean {
+  private hasAccessToken(): boolean {
     return this.accessToken !== null;
   }
 
@@ -562,6 +567,20 @@ export class OxyServices {
     }
   }
 
+  /**
+   * Get follow status for a user
+   * @param userId - User ID to check follow status for
+   * @returns Whether the current user is following the specified user
+   */
+  async getFollowStatus(userId: string): Promise<{ isFollowing: boolean }> {
+    try {
+      const res = await this.client.get(`/users/${userId}/following-status`);
+      return res.data;
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
+
   /**
    * Get all followers of a user
    * @param userId - User ID to get followers for
@@ -1657,6 +1676,72 @@ export class OxyServices {
       throw this.handleError(error);
     }
   }
+
+  /**
+   * Health check endpoint to verify API connectivity
+   * @returns Health status and basic server info
+   */
+  async healthCheck(): Promise<{ 
+    status: string; 
+    users?: number; 
+    timestamp?: string; 
+    [key: string]: any 
+  }> {
+    try {
+      const res = await this.client.get('/');
+      return res.data;
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
+
+  /**
+   * Download file content using authenticated request
+   * @param fileId - The file ID to download
+   * @returns Response object for further processing
+   */
+  async downloadFileContent(fileId: string): Promise<Response> {
+    try {
+      const downloadUrl = this.getFileDownloadUrl(fileId);
+      const response = await fetch(downloadUrl);
+      
+      if (!response.ok) {
+        throw new Error(`Download failed: ${response.status} ${response.statusText}`);
+      }
+      
+      return response;
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
+
+  /**
+   * Get file content as text using authenticated request
+   * @param fileId - The file ID to get content for
+   * @returns File content as string
+   */
+  async getFileContentAsText(fileId: string): Promise<string> {
+    try {
+      const response = await this.downloadFileContent(fileId);
+      return await response.text();
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
+
+  /**
+   * Get file content as blob using authenticated request  
+   * @param fileId - The file ID to get content for
+   * @returns File content as blob
+   */
+  async getFileContentAsBlob(fileId: string): Promise<Blob> {
+    try {
+      const response = await this.downloadFileContent(fileId);
+      return await response.blob();
+    } catch (error) {
+      throw this.handleError(error);
+    }
+  }
 }
 
 export default OxyServices;

package/src/index.ts

@@ -25,7 +25,13 @@ import {
   Avatar,
   FollowButton,
   FontLoader,
-  OxyIcon
+  OxyIcon,
+  useFollow,
+  ProfileScreen,
+  OxyRouter,
+  store,
+  type RootState,
+  type AppDispatch,
 } from './ui';
 
 // ------------- Type Imports -------------
@@ -58,9 +64,19 @@ export {
   Avatar,
   FollowButton,
   FontLoader,
-  OxyIcon
+  OxyIcon,
+  useFollow,
+  ProfileScreen,
+  OxyRouter,
+  store,
+  type RootState,
+  type AppDispatch,
 };
 
 // ------------- Type Exports -------------
 export { OxyContextState, OxyContextProviderProps };
-export * from './ui/navigation/types';
+export * from './ui/navigation/types';
+export * from './models/secureSession';
+
+// Sonner toast integration
+export { toast } from './lib/sonner';

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,88 @@ 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 with defensive checks
+  const followState = useSelector((state: RootState) => {
+    // Defensive check to handle cases where follow state might not be initialized yet
+    if (!state.follow) {
+      return {
+        isFollowing: initiallyFollowing ?? false,
+        isLoading: false,
+        error: null
+      };
+    }
+
+    return {
+      isFollowing: state.follow.followingUsers?.[userId] ?? initiallyFollowing ?? false,
+      isLoading: state.follow.loadingUsers?.[userId] ?? false,
+      error: state.follow.errors?.[userId] ?? null
+    };
+  });
+
+  // Whether the follow status has been loaded from the store with defensive check
+  const isStatusKnown = useSelector((state: RootState) => {
+    if (!state.follow?.followingUsers) {
+      return false;
+    }
+    return 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
 
-  // The button press handler with preventDefault support
-  const handlePress = async (event?: any) => {
+  // 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 - 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 +233,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 +293,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
       [0, 1],
       ['#d169e5', '#FFFFFF']
     );
-    
+
     const borderColor = interpolateColor(
       animationProgress.value,
       [0, 1],
@@ -296,7 +368,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
     <TouchableOpacity
       activeOpacity={0.8}
       onPress={handlePress}
-      disabled={disabled || isLoading || !isAuthenticated}
+      disabled={disabled || isLoading}
     >
       <Animated.View
         style={[
@@ -307,9 +379,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';