@oxyhq/services 5.4.8 → 5.5.1

package/src/ui/hooks/useAuthFetch.ts

@@ -0,0 +1,200 @@
+/**
+ * Zero Config Authenticated Fetch Hook
+ * 
+ * Simple hook that provides fetch-like API with automatic authentication
+ * Leverages the existing useOxy hook and OxyProvider infrastructure
+ * 
+ * Usage:
+ *   const authFetch = useAuthFetch();
+ *   const response = await authFetch('/api/protected');
+ *   const data = await authFetch.get('/api/users');
+ */
+
+import { useCallback } from 'react';
+import { useOxy } from '../context/OxyContext';
+
+export interface AuthFetchOptions extends Omit<RequestInit, 'body'> {
+  body?: any; // Allow any type for body, we'll JSON.stringify if needed
+}
+
+export interface AuthFetchAPI {
+  // Main fetch function (drop-in replacement)
+  (input: RequestInfo | URL, init?: AuthFetchOptions): Promise<Response>;
+  
+  // Convenience methods for JSON APIs
+  get: (endpoint: string, options?: AuthFetchOptions) => Promise<any>;
+  post: (endpoint: string, data?: any, options?: AuthFetchOptions) => Promise<any>;
+  put: (endpoint: string, data?: any, options?: AuthFetchOptions) => Promise<any>;
+  delete: (endpoint: string, options?: AuthFetchOptions) => Promise<any>;
+  
+  // Access to auth state and methods
+  isAuthenticated: boolean;
+  user: any;
+  login: (username: string, password: string) => Promise<any>;
+  logout: () => Promise<void>;
+  signUp: (username: string, email: string, password: string) => Promise<any>;
+}
+
+/**
+ * Hook that provides authenticated fetch functionality
+ * Uses the existing OxyServices instance from useOxy context
+ */
+export function useAuthFetch(): AuthFetchAPI {
+  const { oxyServices, isAuthenticated, user, login, logout, signUp } = useOxy();
+
+  // Main fetch function with automatic auth headers
+  const authFetch = useCallback(async (input: RequestInfo | URL, init?: AuthFetchOptions): Promise<Response> => {
+    const url = resolveURL(input, oxyServices.getBaseURL());
+    const options = await addAuthHeaders(init, oxyServices);
+
+    try {
+      let response = await fetch(url, options);
+
+      // Handle token expiry and automatic refresh
+      if (response.status === 401 && oxyServices.getCurrentUserId()) {
+        // Try to refresh token and retry
+        try {
+          await oxyServices.refreshTokens();
+          const retryOptions = await addAuthHeaders(init, oxyServices);
+          response = await fetch(url, retryOptions);
+        } catch (refreshError) {
+          // Refresh failed, user needs to login again
+          console.warn('Token refresh failed, user needs to re-authenticate');
+          throw new Error('Authentication expired. Please login again.');
+        }
+      }
+
+      return response;
+    } catch (error) {
+      console.error('AuthFetch error:', error);
+      throw error;
+    }
+  }, [oxyServices]);
+
+  // JSON convenience methods
+  const get = useCallback(async (endpoint: string, options?: AuthFetchOptions) => {
+    const response = await authFetch(endpoint, { ...options, method: 'GET' });
+    return handleJsonResponse(response);
+  }, [authFetch]);
+
+  const post = useCallback(async (endpoint: string, data?: any, options?: AuthFetchOptions) => {
+    const response = await authFetch(endpoint, {
+      ...options,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers
+      },
+      body: data ? JSON.stringify(data) : undefined
+    });
+    return handleJsonResponse(response);
+  }, [authFetch]);
+
+  const put = useCallback(async (endpoint: string, data?: any, options?: AuthFetchOptions) => {
+    const response = await authFetch(endpoint, {
+      ...options,
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers
+      },
+      body: data ? JSON.stringify(data) : undefined
+    });
+    return handleJsonResponse(response);
+  }, [authFetch]);
+
+  const del = useCallback(async (endpoint: string, options?: AuthFetchOptions) => {
+    const response = await authFetch(endpoint, { ...options, method: 'DELETE' });
+    return handleJsonResponse(response);
+  }, [authFetch]);
+
+  // Attach convenience methods and auth state to the main function
+  const fetchWithMethods = authFetch as AuthFetchAPI;
+  fetchWithMethods.get = get;
+  fetchWithMethods.post = post;
+  fetchWithMethods.put = put;
+  fetchWithMethods.delete = del;
+  fetchWithMethods.isAuthenticated = isAuthenticated;
+  fetchWithMethods.user = user;
+  fetchWithMethods.login = login;
+  fetchWithMethods.logout = logout;
+  fetchWithMethods.signUp = signUp;
+
+  return fetchWithMethods;
+}
+
+/**
+ * Helper functions
+ */
+
+function resolveURL(input: RequestInfo | URL, baseURL: string): string {
+  const url = input.toString();
+  
+  // If it's already a full URL, return as is
+  if (url.startsWith('http://') || url.startsWith('https://')) {
+    return url;
+  }
+  
+  // If it starts with /, it's relative to base URL
+  if (url.startsWith('/')) {
+    return `${baseURL}${url}`;
+  }
+  
+  // Otherwise, append to base URL with /
+  return `${baseURL}/${url}`;
+}
+
+async function addAuthHeaders(init?: AuthFetchOptions, oxyServices?: any): Promise<RequestInit> {
+  const headers = new Headers(init?.headers);
+  
+  // Add auth header if user is authenticated
+  if (oxyServices?.getCurrentUserId() && !headers.has('Authorization')) {
+    // Try to get current access token
+    try {
+      const accessToken = oxyServices.getAccessToken?.() || oxyServices.accessToken;
+      if (accessToken) {
+        headers.set('Authorization', `Bearer ${accessToken}`);
+      }
+    } catch (error) {
+      // Ignore auth header errors
+    }
+  }
+
+  const body = init?.body;
+  const processedBody = body && typeof body === 'object' && !(body instanceof FormData) && !(body instanceof URLSearchParams)
+    ? JSON.stringify(body)
+    : body;
+
+  return {
+    ...init,
+    headers,
+    body: processedBody
+  };
+}
+
+async function handleJsonResponse(response: Response): Promise<any> {
+  if (!response.ok) {
+    let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+    
+    try {
+      const errorData = await response.json();
+      errorMessage = errorData.message || errorData.error || errorMessage;
+    } catch {
+      // Ignore JSON parsing errors
+    }
+    
+    const error = new Error(errorMessage) as any;
+    error.status = response.status;
+    error.response = response;
+    throw error;
+  }
+
+  try {
+    return await response.json();
+  } catch {
+    // If response isn't JSON, return the response itself
+    return response;
+  }
+}
+
+export default useAuthFetch; 

package/src/ui/hooks/useFollow.ts

@@ -6,9 +6,9 @@ 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,
+  isFollowing: state.follow.followingUsers[userId] ?? false,
+  isLoading: state.follow.loadingUsers[userId] ?? false,
+  error: state.follow.errors[userId] ?? null,
 });
 
 // Memoized selector for multiple users
@@ -16,40 +16,20 @@ const createMultipleFollowSelector = (userIds: string[]) => (state: RootState) =
   const followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
   const followState = state.follow;
   
-  // Defensive check for follow state
-  if (!followState) {
-    // Return default values if follow state is not initialized
-    for (const userId of userIds) {
-      followData[userId] = {
-        isFollowing: false,
-        isLoading: false,
-        error: null,
-      };
-    }
-    
-    return {
-      followData,
-      isAnyLoading: false,
-      hasAnyError: false,
-      allFollowing: false,
-      allNotFollowing: true,
-    };
-  }
-  
   for (const userId of userIds) {
     followData[userId] = {
-      isFollowing: followState.followingUsers?.[userId] ?? false,
-      isLoading: followState.loadingUsers?.[userId] ?? false,
-      error: followState.errors?.[userId] ?? null,
+      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]),
+    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]),
   };
 };
 

package/src/ui/hooks/useOxyFollow.ts

@@ -0,0 +1,188 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback, useMemo } from 'react';
+import { 
+  toggleFollowUser, 
+  setFollowingStatus, 
+  clearFollowError, 
+  fetchFollowStatus,
+  followSelectors
+} from '../store/slices/followSlice';
+import type { FollowState } from '../store/slices/types';
+import { useOxy } from '../context/OxyContext';
+
+// Generic type for state that includes follow slice
+interface StateWithFollow {
+  follow: FollowState;
+}
+
+// Memoized selector to prevent unnecessary re-renders
+const createFollowSelector = (userId: string) => (state: StateWithFollow) => ({
+  isFollowing: followSelectors.selectIsUserFollowed(state, userId),
+  isLoading: followSelectors.selectIsUserLoading(state, userId),
+  error: followSelectors.selectUserError(state, userId),
+});
+
+// Memoized selector for multiple users
+const createMultipleFollowSelector = (userIds: string[]) => (state: StateWithFollow) => {
+  const followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+  
+  for (const userId of userIds) {
+    followData[userId] = {
+      isFollowing: followSelectors.selectIsUserFollowed(state, userId),
+      isLoading: followSelectors.selectIsUserLoading(state, userId),
+      error: followSelectors.selectUserError(state, userId),
+    };
+  }
+  
+  const followState = state.follow;
+  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
+ * Works with any Redux store that includes the Oxy follow reducer
+ * Optimized to prevent unnecessary re-renders
+ * Can handle both single user and multiple users
+ */
+export const useOxyFollow = (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,
+  };
+};
+
+// Backward compatibility alias
+export const useFollow = useOxyFollow;

package/src/ui/index.ts

@@ -21,7 +21,38 @@ export {
   OxyContextProviderProps
 } from './context/OxyContext';
 
-// Redux store exports
+// Redux store exports - NEW ARCHITECTURE
+export { 
+  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
+  AuthState,
+  FollowState,
+  initialAuthState,
+  initialFollowState
+} from './store';
+
+// Legacy store exports (deprecated)
 export { store } from './store';
 export type { RootState, AppDispatch } from './store';
 
@@ -32,7 +63,8 @@ export { fontFamilies, fontStyles } from './styles/fonts';
 export * from './navigation/types';
 
 // Hooks
-export { useFollow } from './hooks';
+export { useOxyFollow, useFollow } from './hooks';
+export { default as useAuthFetch } from './hooks/useAuthFetch';
 
 // Screens
 export { default as ProfileScreen } from './screens/ProfileScreen';

package/src/ui/navigation/types.ts

@@ -120,15 +120,35 @@ export interface OxyProviderProps {
   onAuthStateChange?: (user: User | null) => void;
 
   /**
-   * Prefix for keys in AsyncStorage
-   * @default "oxy"
+   * Storage key prefix for AsyncStorage
    */
   storageKeyPrefix?: string;
 
   /**
-   * Whether to show the internal toaster in the bottom sheet
-   * If false, only the provider's global toaster will be shown
+   * Whether to show the internal toaster
    * @default true
    */
   showInternalToaster?: boolean;
+
+  /**
+   * External Redux store to use instead of the internal store
+   * If provided, the store must include the Oxy reducers using setupOxyStore()
+   * @example
+   * ```ts
+   * const store = configureStore({
+   *   reducer: {
+   *     ...setupOxyStore(),
+   *     myAppReducer,
+   *   },
+   * });
+   * ```
+   */
+  store?: any;
+
+  /**
+   * Skip Redux Provider wrapper if store is managed externally
+   * Set to true if your app already has a Redux Provider higher in the component tree
+   * @default false
+   */
+  skipReduxProvider?: boolean;
 }

package/src/ui/screens/AccountCenterScreen.tsx

@@ -15,13 +15,11 @@ 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
-} from '../components';
+import ProfileCard from '../components/ProfileCard';
+import Section from '../components/Section';
+import QuickActions from '../components/QuickActions';
+import GroupedSection from '../components/GroupedSection';
+import GroupedItem from '../components/GroupedItem';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     onClose,

package/src/ui/screens/AppInfoScreen.tsx

@@ -69,15 +69,18 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
         // Check API connection on mount
         const checkConnection = async () => {
             setConnectionStatus('checking');
-
-            if (!oxyServices) {
-                setConnectionStatus('disconnected');
-                return;
-            }
-
+            const apiBaseUrl = oxyServices?.getBaseURL() || 'https://api.oxy.so';
             try {
-                await oxyServices.healthCheck();
-                setConnectionStatus('connected');
+                const response = await fetch(`${apiBaseUrl}/`, {
+                    method: 'GET',
+                    timeout: 3000,
+                } as any);
+
+                if (response.ok) {
+                    setConnectionStatus('connected');
+                } else {
+                    setConnectionStatus('disconnected');
+                }
             } catch (error) {
                 setConnectionStatus('disconnected');
             }
@@ -118,11 +121,22 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
             toast.info('Running system checks...', { duration: 2000 });
 
             try {
-                const data = await oxyServices.healthCheck();
-                checks.push('✅ API server is responding');
-                checks.push(`📊 Server stats: ${data.users || 0} users`);
-                checks.push(`🌐 API URL: ${apiBaseUrl}`);
-                setConnectionStatus('connected');
+                const response = await fetch(`${apiBaseUrl}/`, {
+                    method: 'GET',
+                    timeout: 5000,
+                } as any);
+
+                if (response.ok) {
+                    const data = await response.json();
+                    checks.push('✅ API server is responding');
+                    checks.push(`📊 Server stats: ${data.users || 0} users`);
+                    checks.push(`🌐 API URL: ${apiBaseUrl}`);
+                    setConnectionStatus('connected');
+                } else {
+                    checks.push('❌ API server returned error status');
+                    checks.push(`   Status: ${response.status} ${response.statusText}`);
+                    setConnectionStatus('disconnected');
+                }
             } catch (error) {
                 checks.push('❌ API server connection failed');
                 checks.push(`   Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -500,17 +514,20 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         }
                         onPress={async () => {
                             setConnectionStatus('checking');
-
-                            if (!oxyServices) {
-                                setConnectionStatus('disconnected');
-                                toast.error('OxyServices not initialized');
-                                return;
-                            }
-
+                            const apiBaseUrl = oxyServices?.getBaseURL() || 'https://api.oxy.so';
                             try {
-                                await oxyServices.healthCheck();
-                                setConnectionStatus('connected');
-                                toast.success('API connection successful');
+                                const response = await fetch(`${apiBaseUrl}/`, {
+                                    method: 'GET',
+                                    timeout: 3000,
+                                } as any);
+
+                                if (response.ok) {
+                                    setConnectionStatus('connected');
+                                    toast.success('API connection successful');
+                                } else {
+                                    setConnectionStatus('disconnected');
+                                    toast.error(`API server error: ${response.status}`);
+                                }
                             } catch (error) {
                                 setConnectionStatus('disconnected');
                                 toast.error('Failed to connect to API server');