@oxyhq/services 5.5.9 → 5.6.1

package/src/index.ts

@@ -2,9 +2,6 @@
  * OxyHQServices Main Export File
  */
 
-// ------------- Polyfills -------------
-import './utils/polyfills';
-
 // ------------- Core Imports -------------
 import OxyCore from './core';
 import { OxyServices } from './core';
@@ -18,10 +15,10 @@ import {
   OxyProvider, 
   OxyContextProvider, 
   useOxy,
-  useAuthFetch,
   
   // Components
   OxySignInButton,
+  OxyPayButton,
   OxyLogo,
   Avatar,
   FollowButton,
@@ -30,9 +27,7 @@ import {
   useFollow,
   ProfileScreen,
   OxyRouter,
-  store,
-  type RootState,
-  type AppDispatch,
+  // Remove store, RootState, AppDispatch exports
 } from './ui';
 
 // ------------- Type Imports -------------
@@ -40,8 +35,9 @@ import { OxyContextState, OxyContextProviderProps } from './ui/context/OxyContex
 import * as Models from './models/interfaces';
 
 // ------------- Core Exports -------------
-export { OxyCore, OxyServices };
-export default OxyServices;  // Default export for backward compatibility
+export default OxyCore; // Default export for backward compatibility
+export { OxyServices };
+export * from './core';
 
 // ------------- Utility Exports -------------
 export { DeviceManager } from './utils';
@@ -57,10 +53,10 @@ export {
   OxyProvider, 
   OxyContextProvider, 
   useOxy,
-  useAuthFetch,
   
   // Components
   OxySignInButton,
+  OxyPayButton,
   OxyLogo,
   Avatar,
   FollowButton,
@@ -69,41 +65,8 @@ export {
   useFollow,
   ProfileScreen,
   OxyRouter,
-  
-  // Redux Store - NEW ARCHITECTURE
-  setupOxyStore,
-  oxyReducers,
-  // Individual slices
-  authSlice,
-  authActions,
-  authSelectors,
-  authReducer,
-  followSlice,
-  followActions,
-  followSelectors,
-  followThunks,
-  followReducer,
-  // Action creators
-  loginStart,
-  loginSuccess,
-  loginFailure,
-  logout,
-  setFollowingStatus,
-  clearFollowError,
-  resetFollowState,
-  fetchFollowStatus,
-  toggleFollowUser,
-  // Types
-  type AuthState,
-  type FollowState,
-  initialAuthState,
-  initialFollowState,
-  
-  // Legacy exports (deprecated)
-  store,
-  type RootState,
-  type AppDispatch,
-} from './ui';
+  // Remove store, RootState, AppDispatch exports
+};
 
 // ------------- Type Exports -------------
 export { OxyContextState, OxyContextProviderProps };

package/src/models/interfaces.ts

@@ -14,7 +14,7 @@ export interface User {
   name?: {
     first?: string;
     last?: string;
-    full?: string;
+    full?: string; // virtual, not stored in DB, returned by API
     [key: string]: any;
   };
   bio?: string;
@@ -23,6 +23,12 @@ export interface User {
   website?: string;
   createdAt?: string;
   updatedAt?: string;
+  links?: Array<{
+    title?: string;
+    description?: string;
+    image?: string;
+    link: string;
+  }>;
   [key: string]: any;
 }
 

package/src/models/secureSession.ts

@@ -3,9 +3,8 @@ export interface SecureClientSession {
   deviceId: string;
   expiresAt: string;
   lastActive: string;
-  // Add user info for efficient duplicate detection
+  // Only userId for identification, do not store username
   userId?: string;
-  username?: string;
 }
 
 export interface SecureStorageKeys {

package/src/node/index.ts

@@ -2,9 +2,6 @@
  * OxyHQServices Node.js Entry Point
  */
 
-// ------------- Polyfills -------------
-import '../utils/polyfills';
-
 // ------------- Core Imports -------------
 import { OxyServices, OXY_CLOUD_URL } from '../core'; // Adjusted path
 import { createAuth } from './createAuth';

package/src/ui/components/FollowButton.tsx

@@ -17,116 +17,23 @@ import Animated, {
   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';
+import { useFollow } from '../hooks/useFollow';
 
 export interface FollowButtonProps {
-  /**
-   * The user ID to follow/unfollow
-   */
   userId: string;
-
-  /**
-   * Initial follow state, if known
-   * @default false 
-   */
   initiallyFollowing?: boolean;
-
-  /**
-   * Button size
-   * @default 'medium'
-   */
   size?: 'small' | 'medium' | 'large';
-
-  /**
-   * Custom callback when follow/unfollow action happens
-   */
   onFollowChange?: (isFollowing: boolean) => void;
-
-  /**
-   * Additional styles for the button container
-   */
   style?: StyleProp<ViewStyle>;
-
-  /**
-   * Additional styles for the button text
-   */
   textStyle?: StyleProp<TextStyle>;
-
-  /**
-   * Whether to disable the button
-   * @default false
-   */
   disabled?: boolean;
-
-  /**
-   * Whether to show loading indicator during API calls
-   * @default true
-   */
   showLoadingState?: boolean;
-
-  /**
-   * Whether to prevent default action and stop event propagation
-   * Useful when the button is inside links or other pressable containers
-   * @default true
-   */
   preventParentActions?: boolean;
-
-  /**
-   * Custom onPress handler - if provided, will override default follow/unfollow behavior
-   * Event object is passed to allow for preventDefault/stopPropagation
-   */
-  onPress?: (event: any) => void;
 }
 
-/**
- * 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
- * // Basic usage
- * <FollowButton userId="123" />
- * 
- * // With custom styling
- * <FollowButton 
- *   userId="123" 
- *   initiallyFollowing={true}
- *   size="large"
- *   style={{ borderRadius: 12 }}
- *   onFollowChange={(isFollowing) => console.log(`User is now ${isFollowing ? 'followed' : 'unfollowed'}`)}
- * />
- * 
- * // Inside a pressable container (prevents parent actions)
- * <TouchableOpacity onPress={() => navigateToProfile()}>
- *   <View>
- *     <Text>User Profile</Text>
- *     <FollowButton 
- *       userId="123" 
- *       preventParentActions={true} // Default: true
- *     />
- *   </View>
- * </TouchableOpacity>
- * 
- * // Custom onPress handler
- * <FollowButton 
- *   userId="123" 
- *   onPress={(event) => {
- *     event.preventDefault(); // Custom preventDefault
- *     // Custom logic here
- *   }}
- * />
- * ```
- */
 const FollowButton: React.FC<FollowButtonProps> = ({
   userId,
   initiallyFollowing = false,
@@ -137,270 +44,141 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   disabled = false,
   showLoadingState = true,
   preventParentActions = true,
-  onPress,
 }) => {
-  const dispatch = useDispatch();
   const { oxyServices, isAuthenticated } = useOxy();
-
-  // 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;
+  const {
+    isFollowing,
+    isLoading,
+    error,
+    toggleFollow,
+    setFollowStatus,
+    fetchStatus,
+    clearError,
+  } = useFollow(userId);
 
   // Animation values
   const animationProgress = useSharedValue(isFollowing ? 1 : 0);
   const scale = useSharedValue(1);
 
-  // Initialize Redux state with initial value if not already set
+  // Initialize Zustand 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 }));
+    if (userId && !isFollowing && initiallyFollowing) {
+      setFollowStatus?.(initiallyFollowing);
     }
-  }, [userId, initiallyFollowing, isStatusKnown, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId, initiallyFollowing]);
 
   // 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 }));
+      fetchStatus?.();
     }
-  }, [userId, oxyServices, isAuthenticated, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId, oxyServices, isAuthenticated]);
 
-  // Update the animation value when isFollowing changes
+  // Animate button on follow/unfollow
   useEffect(() => {
-    animationProgress.value = withTiming(isFollowing ? 1 : 0, {
-      duration: 300,
-      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-    });
-  }, [isFollowing]); // Removed animationProgress from dependencies as it's stable
-
-  // Show error toast when error occurs
-  useEffect(() => {
-    if (error) {
-      toast.error(error);
-      dispatch(clearFollowError(userId));
+    animationProgress.value = withTiming(isFollowing ? 1 : 0, { duration: 300, easing: Easing.inOut(Easing.ease) });
+  }, [isFollowing, animationProgress]);
+
+  // Button press handler
+  const handlePress = useCallback(async (event: any) => {
+    if (preventParentActions && event && event.preventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
     }
-  }, [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();
-      }
-    }
-
-    // If custom onPress is provided, use it instead of default behavior
-    if (onPress) {
-      onPress(event);
-      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);
-    });
-
+    if (disabled || isLoading) return;
     try {
-      // Dispatch the async action to follow/unfollow
-      const result = await dispatch(toggleFollowUser({
-        userId,
-        oxyServices,
-        isCurrentlyFollowing: followState.isFollowing
-      })).unwrap();
-
-      // Call the callback if provided
-      if (onFollowChange) {
-        onFollowChange(result.isFollowing);
-      }
-
-      // Show success toast
-      toast.success(result.isFollowing ? 'Following user!' : 'Unfollowed user');
-    } catch (error: any) {
-      console.error('Follow action failed:', error);
-
-      // 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(() => {
-    const backgroundColor = interpolateColor(
-      animationProgress.value,
-      [0, 1],
-      ['#d169e5', '#FFFFFF']
-    );
-
-    const borderColor = interpolateColor(
-      animationProgress.value,
-      [0, 1],
-      ['#d169e5', '#d169e5']
-    );
-
-    // Add a slight scaling effect during the transition
-    const transitionScale = 1 + 0.05 * Math.sin(animationProgress.value * Math.PI);
-
-    return {
-      backgroundColor,
-      borderColor,
-      borderWidth: 1,
-      transform: [
-        { scale: scale.value * transitionScale },
-      ],
-    };
-  });
-
-  // Animated styles for the text
-  const animatedTextStyle = useAnimatedStyle(() => {
-    const color = interpolateColor(
-      animationProgress.value,
-      [0, 1],
-      ['#FFFFFF', '#d169e5']
-    );
-
-    return {
-      color,
-    };
-  });
-
-  // Get size-specific styles
-  const getSizeStyles = () => {
-    switch (size) {
-      case 'small':
-        return {
-          button: {
-            paddingVertical: 6,
-            paddingHorizontal: 12,
-          } as ViewStyle,
-          text: {
-            fontSize: 12,
-          } as TextStyle,
-        };
-      case 'large':
-        return {
-          button: {
-            paddingVertical: 12,
-            paddingHorizontal: 24,
-          } as ViewStyle,
-          text: {
-            fontSize: 18,
-          } as TextStyle,
-        };
-      default: // medium
-        return {
-          button: {
-            paddingVertical: 8,
-            paddingHorizontal: 16,
-          } as ViewStyle,
-          text: {
-            fontSize: 14,
-          } as TextStyle,
-        };
+      await toggleFollow?.();
+      if (onFollowChange) onFollowChange(!isFollowing);
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to update follow status');
     }
+  }, [disabled, isLoading, toggleFollow, onFollowChange, isFollowing, preventParentActions]);
+
+  // Button styles
+  const getButtonStyle = (): StyleProp<ViewStyle> => {
+    let baseStyle = styles.buttonMedium;
+    if (size === 'small') baseStyle = styles.buttonSmall;
+    if (size === 'large') baseStyle = styles.buttonLarge;
+    return [baseStyle, isFollowing ? styles.following : styles.notFollowing, style];
   };
 
-  const sizeStyles = getSizeStyles();
+  const getTextStyle = (): StyleProp<TextStyle> => {
+    let baseStyle = styles.textMedium;
+    if (size === 'small') baseStyle = styles.textSmall;
+    if (size === 'large') baseStyle = styles.textLarge;
+    return [baseStyle, isFollowing ? styles.textFollowing : styles.textNotFollowing, textStyle];
+  };
 
   return (
     <TouchableOpacity
-      activeOpacity={0.8}
+      style={getButtonStyle()}
       onPress={handlePress}
       disabled={disabled || isLoading}
+      activeOpacity={0.8}
     >
-      <Animated.View
-        style={[
-          styles.button,
-          sizeStyles.button,
-          animatedButtonStyle,
-          style,
-        ]}
-      >
-        {isLoading && showLoadingState ? (
-          <ActivityIndicator
-            size="small"
-            color={isFollowing ? '#d169e5' : '#FFFFFF'}
-          />
-        ) : (
-          <Animated.Text
-            style={[
-              styles.text,
-              sizeStyles.text,
-              animatedTextStyle,
-              textStyle,
-            ]}
-          >
-            {isFollowing ? 'Following' : 'Follow'}
-          </Animated.Text>
-        )}
-      </Animated.View>
+      {showLoadingState && isLoading ? (
+        <ActivityIndicator size={size === 'small' ? 'small' : 'large'} color={isFollowing ? '#fff' : '#007AFF'} />
+      ) : (
+        <Text style={getTextStyle()}>{isFollowing ? 'Following' : 'Follow'}</Text>
+      )}
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  button: {
+  buttonSmall: {
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    minWidth: 60,
+    alignItems: 'center',
     justifyContent: 'center',
+  },
+  buttonMedium: {
+    paddingVertical: 8,
+    paddingHorizontal: 20,
+    borderRadius: 20,
+    minWidth: 90,
     alignItems: 'center',
-    flexDirection: 'row',
-    borderRadius: 100,
+    justifyContent: 'center',
+  },
+  buttonLarge: {
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 24,
+    minWidth: 120,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  following: {
+    backgroundColor: '#007AFF',
+  },
+  notFollowing: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#007AFF',
+  },
+  textSmall: {
+    fontSize: 13,
+    fontFamily: fontFamilies.phuduMedium,
+  },
+  textMedium: {
+    fontSize: 15,
+    fontFamily: fontFamilies.phuduMedium,
+  },
+  textLarge: {
+    fontSize: 18,
+    fontFamily: fontFamilies.phuduMedium,
+  },
+  textFollowing: {
+    color: '#fff',
   },
-  text: {
-    fontFamily: Platform.select({
-      web: 'Phudu',
-      default: fontFamilies.phuduSemiBold,
-    }),
-    fontWeight: Platform.OS === 'web' ? '600' : undefined,
-    textAlign: 'center',
+  textNotFollowing: {
+    color: '#007AFF',
   },
 });
 
+export { FollowButton };
 export default FollowButton;