@oxyhq/services 10.2.11 → 10.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "10.2.11",
+  "version": "10.3.1",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -161,7 +161,7 @@
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@oxyhq/bloom": ">=0.5.0",
-    "@oxyhq/core": "^3.4.17",
+    "@oxyhq/core": "^3.5.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@tanstack/query-async-storage-persister": "^5.100",
     "@tanstack/query-sync-storage-persister": "^5.100",

package/src/index.ts

@@ -193,6 +193,7 @@ export { OxyAuthPrompt } from './ui/components/OxyAuthPrompt';
 export type { OxyAuthPromptProps } from './ui/components/OxyAuthPrompt';
 export { default as OxyLogo } from './ui/components/OxyLogo';
 export { default as FollowButton } from './ui/components/FollowButton';
+export type { FollowButtonProps, SingleFollowButtonProps, MultiFollowButtonProps } from './ui/components/FollowButton';
 export { LogoIcon } from './ui/components/logo/LogoIcon';
 export { LogoText } from './ui/components/logo/LogoText';
 

package/src/ui/components/FollowButton.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, memo } from 'react';
+import React, { useEffect, useCallback, useMemo, useState, memo } from 'react';
 import {
   TouchableOpacity,
   Text,
@@ -10,23 +10,51 @@ import {
 } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import { toast } from '@oxyhq/bloom';
-import { useFollowForButton } from '../hooks/useFollow';
+import { useFollow, useFollowForButton } from '../hooks/useFollow';
 import { useTheme } from '@oxyhq/bloom/theme';
-import type { OxyServices } from '@oxyhq/core';
+import type { OxyServices, BulkFollowResult } from '@oxyhq/core';
 
-export interface FollowButtonProps {
-  userId: string;
-  initiallyFollowing?: boolean;
+const DEFAULT_FOLLOW_ALL_LABEL = 'Follow all';
+const DEFAULT_FOLLOWED_ALL_LABEL = 'Following';
+
+/** Props shared by both single- and multi-user follow modes. */
+interface FollowButtonBaseProps {
   size?: 'small' | 'medium' | 'large';
-  onFollowChange?: (isFollowing: boolean) => void;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   disabled?: boolean;
   showLoadingState?: boolean;
   preventParentActions?: boolean;
   theme?: 'light' | 'dark';
+  onFollowChange?: (isFollowing: boolean) => void;
 }
 
+/** Single-user mode — follows/unfollows one user (existing behavior). */
+export interface SingleFollowButtonProps extends FollowButtonBaseProps {
+  userId: string;
+  initiallyFollowing?: boolean;
+  userIds?: never;
+}
+
+/** Multi-user mode — follows MANY users in one "Follow all" action (follow-only). */
+export interface MultiFollowButtonProps extends FollowButtonBaseProps {
+  userIds: string[];
+  initiallyAllFollowing?: boolean;
+  followAllLabel?: string;
+  followedAllLabel?: string;
+  onBulkFollow?: (result: BulkFollowResult) => void;
+  userId?: never;
+}
+
+/**
+ * FollowButton accepts EITHER single-user mode (`userId`) or multi-user mode
+ * (`userIds`), never both. Existing `{ userId, ... }` callers remain valid.
+ */
+export type FollowButtonProps = SingleFollowButtonProps | MultiFollowButtonProps;
+
+const isMultiMode = (props: FollowButtonProps): props is MultiFollowButtonProps =>
+  'userIds' in props && Array.isArray(props.userIds);
+
 const FollowButtonInner = memo(function FollowButtonInner({
   userId,
   oxyServices,
@@ -38,7 +66,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
   disabled = false,
   showLoadingState = true,
   preventParentActions = true,
-}: FollowButtonProps & { oxyServices: OxyServices }) {
+}: SingleFollowButtonProps & { oxyServices: OxyServices }) {
   const { colors } = useTheme();
 
   const {
@@ -107,13 +135,129 @@ const FollowButtonInner = memo(function FollowButtonInner({
   );
 });
 
+const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
+  userIds,
+  initiallyAllFollowing = false,
+  size = 'medium',
+  followAllLabel = DEFAULT_FOLLOW_ALL_LABEL,
+  followedAllLabel = DEFAULT_FOLLOWED_ALL_LABEL,
+  onFollowChange,
+  onBulkFollow,
+  style,
+  textStyle,
+  disabled = false,
+  showLoadingState = true,
+  preventParentActions = true,
+}: MultiFollowButtonProps) {
+  const { colors } = useTheme();
+  const follow = useFollow(userIds);
+  const followAllUsers = 'followAllUsers' in follow ? follow.followAllUsers : undefined;
+  const isAnyLoading = 'isAnyLoading' in follow ? follow.isAnyLoading : false;
+
+  const [allFollowing, setAllFollowing] = useState(initiallyAllFollowing);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const isLoading = isSubmitting || isAnyLoading;
+
+  const handlePress = useCallback(async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
+    if (preventParentActions && event?.preventDefault) {
+      event.preventDefault();
+      event.stopPropagation?.();
+    }
+    if (disabled || isLoading || allFollowing || !followAllUsers) return;
+
+    setIsSubmitting(true);
+    try {
+      const result = await followAllUsers();
+      const allAlreadyFollowing = result.followedCount === 0
+        && result.results.length > 0
+        && result.results.every((entry) => entry.alreadyFollowing);
+      const anyFollowed = result.followedCount > 0
+        || result.results.some((entry) => entry.success || entry.alreadyFollowing);
+
+      if (allAlreadyFollowing || anyFollowed) {
+        setAllFollowing(true);
+        onFollowChange?.(true);
+      }
+      onBulkFollow?.(result);
+    } catch (err: unknown) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      toast.error(error.message || 'Failed to update follow status');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [disabled, isLoading, allFollowing, followAllUsers, onFollowChange, onBulkFollow, preventParentActions]);
+
+  const baseButtonStyle = getBaseButtonStyle(size, style);
+  const baseTextStyle = getBaseTextStyle(size, textStyle);
+
+  return (
+    <TouchableOpacity
+      className={allFollowing
+        ? 'bg-background border-border'
+        : 'bg-primary border-primary'
+      }
+      style={baseButtonStyle}
+      onPress={handlePress}
+      disabled={disabled || isLoading || allFollowing}
+      activeOpacity={0.8}
+    >
+      {showLoadingState && isLoading ? (
+        <ActivityIndicator
+          size="small"
+          color={allFollowing ? colors.text : colors.negativeForeground}
+        />
+      ) : (
+        <Text
+          className={allFollowing ? 'text-foreground' : 'text-primary-foreground'}
+          style={baseTextStyle}
+        >
+          {allFollowing ? followedAllLabel : followAllLabel}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+});
+
 const FollowButton: React.FC<FollowButtonProps> = (props) => {
   const { oxyServices, canUsePrivateApi, user: currentUser } = useOxy();
 
   const currentUserId = currentUser?.id ? String(currentUser.id).trim() : '';
-  const targetUserId = props.userId ? String(props.userId).trim() : '';
 
-  if (!canUsePrivateApi || !targetUserId || (currentUserId && currentUserId === targetUserId)) {
+  const rawUserIds = isMultiMode(props) ? props.userIds : null;
+
+  // Multi-user mode: dedupe, trim, drop the current user, and bail if empty.
+  const multiUserIds = useMemo(() => {
+    if (!rawUserIds) return [];
+    const seen = new Set<string>();
+    const cleaned: string[] = [];
+    for (const raw of rawUserIds) {
+      const id = raw ? String(raw).trim() : '';
+      if (!id || id === currentUserId || seen.has(id)) continue;
+      seen.add(id);
+      cleaned.push(id);
+    }
+    return cleaned;
+  }, [rawUserIds, currentUserId]);
+
+  if (!canUsePrivateApi) {
+    return null;
+  }
+
+  if (isMultiMode(props)) {
+    if (multiUserIds.length === 0) {
+      return null;
+    }
+    return (
+      <FollowButtonMultiInner
+        {...props}
+        userIds={multiUserIds}
+      />
+    );
+  }
+
+  const targetUserId = props.userId ? String(props.userId).trim() : '';
+  if (!targetUserId || (currentUserId && currentUserId === targetUserId)) {
     return null;
   }
 

package/src/ui/hooks/useFollow.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useEffect } from 'react';
 import { useFollowStore } from '../stores/followStore';
 import { useOxy } from '../context/OxyContext';
-import { logger as loggerUtil, type OxyServices } from '@oxyhq/core';
+import { logger as loggerUtil, type OxyServices, type BulkFollowResult } from '@oxyhq/core';
 import { useShallow } from 'zustand/react/shallow';
 
 /**
@@ -42,22 +42,39 @@ export const useFollow = (userId?: string | string[]) => {
     useCallback((s) => (isSingleUser && userId ? s.loadingCounts[userId] ?? false : false), [isSingleUser, userId])
   );
 
-  // For multi-user mode, use shallow comparison to avoid re-renders when unrelated users change
-  const followData = useFollowStore(
+  // For multi-user mode, subscribe to a FLAT snapshot of the per-user fields.
+  // `useShallow` only compares one level deep, so the selector must NOT return a
+  // nested object — a freshly allocated `{ isFollowing, isLoading, error }` per
+  // user would never shallow-compare equal, making `useSyncExternalStore`
+  // resubscribe every render and loop until React throws "Maximum update depth
+  // exceeded". Keeping the snapshot flat lets the shallow compare cache it; the
+  // nested `followData` shape is then assembled in a `useMemo` below.
+  const followFlat = useFollowStore(
     useShallow((s) => {
-      if (isSingleUser) return {};
-      const data: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+      if (isSingleUser) return {} as Record<string, boolean | string | null>;
+      const flat: Record<string, boolean | string | null> = {};
       for (const uid of userIds) {
-        data[uid] = {
-          isFollowing: s.followingUsers[uid] ?? false,
-          isLoading: s.loadingUsers[uid] ?? false,
-          error: s.errors[uid] ?? null,
-        };
+        flat[`${uid}:isFollowing`] = s.followingUsers[uid] ?? false;
+        flat[`${uid}:isLoading`] = s.loadingUsers[uid] ?? false;
+        flat[`${uid}:error`] = s.errors[uid] ?? null;
       }
-      return data;
+      return flat;
     })
   );
 
+  const followData = useMemo(() => {
+    const data: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+    if (isSingleUser) return data;
+    for (const uid of userIds) {
+      data[uid] = {
+        isFollowing: Boolean(followFlat[`${uid}:isFollowing`]),
+        isLoading: Boolean(followFlat[`${uid}:isLoading`]),
+        error: (followFlat[`${uid}:error`] as string | null) ?? null,
+      };
+    }
+    return data;
+  }, [isSingleUser, userIds, followFlat]);
+
   // Multi-user aggregate selectors
   const multiUserLoadingState = useFollowStore(
     useShallow((s) => {
@@ -144,6 +161,12 @@ export const useFollow = (userId?: string | string[]) => {
     await Promise.all(userIds.map(uid => store.fetchFollowStatus(uid, oxyServices)));
   }, [canUsePrivateApi, userIds, oxyServices]);
 
+  // Bulk follow — follows ALL users in ONE network call (never unfollows).
+  const followAllUsers = useCallback(async (): Promise<BulkFollowResult> => {
+    if (!canUsePrivateApi) throw new Error('Authentication is required to follow users');
+    return useFollowStore.getState().followManyUsers(userIds, oxyServices);
+  }, [canUsePrivateApi, userIds, oxyServices]);
+
   const clearErrorForUser = useCallback((targetUserId: string) => {
     useFollowStore.getState().clearFollowError(targetUserId);
   }, []);
@@ -177,6 +200,7 @@ export const useFollow = (userId?: string | string[]) => {
     setFollowStatusForUser,
     fetchStatusForUser,
     fetchAllStatuses,
+    followAllUsers,
     clearErrorForUser,
     isAnyLoading: multiUserLoadingState.isAnyLoading,
     hasAnyError: multiUserLoadingState.hasAnyError,

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

@@ -1,6 +1,8 @@
 // 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.
 
+import type { BulkFollowResult } from '@oxyhq/core';
+
 export type SingleFollowResult = {
   isFollowing: boolean;
   isLoading: boolean;
@@ -23,6 +25,7 @@ export type MultiFollowResult = {
   setFollowStatusForUser: (userId: string, following: boolean) => void;
   fetchStatusForUser: (userId: string) => Promise<void>;
   fetchAllStatuses: () => Promise<void>;
+  followAllUsers: () => Promise<BulkFollowResult>;
   clearErrorForUser: (userId: string) => void;
   isAnyLoading: boolean;
   hasAnyError: boolean;

package/src/ui/stores/followStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import type { OxyServices } from '@oxyhq/core';
+import type { OxyServices, BulkFollowResult } from '@oxyhq/core';
 
 interface FollowState {
   followingUsers: Record<string, boolean>;
@@ -16,6 +16,8 @@ interface FollowState {
   resetFollowState: () => void;
   fetchFollowStatus: (userId: string, oxyServices: OxyServices) => Promise<void>;
   toggleFollowUser: (userId: string, oxyServices: OxyServices, isCurrentlyFollowing: boolean) => Promise<void>;
+  // Bulk follow — follows MANY users in one network call; never unfollows.
+  followManyUsers: (userIds: string[], oxyServices: OxyServices) => Promise<BulkFollowResult>;
   // New methods for follower counts
   setFollowerCount: (userId: string, count: number) => void;
   setFollowingCount: (userId: string, count: number) => void;
@@ -126,6 +128,50 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
       }));
     }
   },
+  followManyUsers: async (userIds: string[], oxyServices: OxyServices): Promise<BulkFollowResult> => {
+    set((state: FollowState) => {
+      const loadingUsers = { ...state.loadingUsers };
+      const errors = { ...state.errors };
+      for (const uid of userIds) {
+        loadingUsers[uid] = true;
+        errors[uid] = null;
+      }
+      return { loadingUsers, errors };
+    });
+    try {
+      const result = await oxyServices.followUsers(userIds);
+      set((state: FollowState) => {
+        const followingUsers = { ...state.followingUsers };
+        const loadingUsers = { ...state.loadingUsers };
+        const errors = { ...state.errors };
+        for (const uid of userIds) {
+          loadingUsers[uid] = false;
+        }
+        for (const entry of result.results) {
+          if (entry.success || entry.alreadyFollowing) {
+            followingUsers[entry.userId] = true;
+            errors[entry.userId] = null;
+          } else {
+            errors[entry.userId] = 'Failed to update follow status';
+          }
+        }
+        return { followingUsers, loadingUsers, errors };
+      });
+      return result;
+    } catch (error: unknown) {
+      const message = (error instanceof Error ? error.message : null) || 'Failed to update follow status';
+      set((state: FollowState) => {
+        const loadingUsers = { ...state.loadingUsers };
+        const errors = { ...state.errors };
+        for (const uid of userIds) {
+          loadingUsers[uid] = false;
+          errors[uid] = message;
+        }
+        return { loadingUsers, errors };
+      });
+      throw error;
+    }
+  },
   setFollowerCount: (userId: string, count: number) => set((state: FollowState) => ({
     followerCounts: { ...state.followerCounts, [userId]: count },
   })),