@oxyhq/services 5.4.8 → 5.5.1

package/src/__tests__/ui/hooks/useOxyFollow.test.tsx

@@ -0,0 +1,92 @@
+import { renderHook } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { useOxyFollow } from '../../../ui/hooks/useOxyFollow';
+import { setupOxyStore } from '../../../ui/store/setupOxyStore';
+import { OxyContextProvider } from '../../../ui/context/OxyContext';
+import React from 'react';
+
+// Mock OxyServices
+const mockOxyServices = {
+  getFollowStatus: jest.fn(),
+  followUser: jest.fn(),
+  unfollowUser: jest.fn(),
+};
+
+const createTestStore = () => {
+  return configureStore({
+    reducer: {
+      ...setupOxyStore(),
+    },
+  });
+};
+
+const createWrapper = (store: ReturnType<typeof createTestStore>) => {
+  return ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>
+      <OxyContextProvider oxyServices={mockOxyServices}>
+        {children}
+      </OxyContextProvider>
+    </Provider>
+  );
+};
+
+describe('useOxyFollow', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should work with external store containing Oxy reducers', () => {
+    const store = createTestStore();
+    const wrapper = createWrapper(store);
+
+    const { result } = renderHook(() => useOxyFollow('user1'), { wrapper });
+
+    expect(result.current).toHaveProperty('isFollowing');
+    expect(result.current).toHaveProperty('isLoading');
+    expect(result.current).toHaveProperty('error');
+    expect(result.current).toHaveProperty('toggleFollow');
+    expect(result.current).toHaveProperty('setFollowStatus');
+    expect(result.current).toHaveProperty('fetchStatus');
+    expect(result.current).toHaveProperty('clearError');
+  });
+
+  test('should support multiple users mode', () => {
+    const store = createTestStore();
+    const wrapper = createWrapper(store);
+
+    const { result } = renderHook(() => useOxyFollow(['user1', 'user2']), { wrapper });
+
+    expect(result.current).toHaveProperty('followData');
+    expect(result.current).toHaveProperty('toggleFollowForUser');
+    expect(result.current).toHaveProperty('setFollowStatusForUser');
+    expect(result.current).toHaveProperty('fetchStatusForUser');
+    expect(result.current).toHaveProperty('fetchAllStatuses');
+    expect(result.current).toHaveProperty('clearErrorForUser');
+    expect(result.current).toHaveProperty('isAnyLoading');
+    expect(result.current).toHaveProperty('hasAnyError');
+    expect(result.current).toHaveProperty('allFollowing');
+    expect(result.current).toHaveProperty('allNotFollowing');
+  });
+
+  test('should integrate with custom app reducers', () => {
+    const store = configureStore({
+      reducer: {
+        ...setupOxyStore(),
+        customApp: (state = { feature: 'enabled' }) => state,
+      },
+    });
+
+    const wrapper = createWrapper(store);
+
+    const { result } = renderHook(() => useOxyFollow('user1'), { wrapper });
+
+    // Should still work with Oxy features
+    expect(result.current.isFollowing).toBe(false);
+    expect(result.current.isLoading).toBe(false);
+
+    // Custom app state should also be accessible in the store
+    const state = store.getState();
+    expect(state.customApp.feature).toBe('enabled');
+  });
+});

package/src/__tests__/ui/store/setupOxyStore.test.ts

@@ -0,0 +1,50 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { setupOxyStore, oxyReducers } from '../../../ui/store/setupOxyStore';
+import { authSlice, followSlice } from '../../../ui/store/slices';
+
+describe('setupOxyStore', () => {
+  test('should return all Oxy reducers', () => {
+    const reducers = setupOxyStore();
+    
+    expect(reducers).toHaveProperty('auth');
+    expect(reducers).toHaveProperty('follow');
+    expect(reducers.auth).toBe(authSlice.reducer);
+    expect(reducers.follow).toBe(followSlice.reducer);
+  });
+
+  test('should work with configureStore', () => {
+    const store = configureStore({
+      reducer: {
+        ...setupOxyStore(),
+        customReducer: (state = { test: true }) => state,
+      },
+    });
+
+    const state = store.getState();
+    expect(state).toHaveProperty('auth');
+    expect(state).toHaveProperty('follow');
+    expect(state).toHaveProperty('customReducer');
+    expect(state.customReducer.test).toBe(true);
+  });
+
+  test('should support tree-shaking with pick method', () => {
+    const authOnly = setupOxyStore.pick('auth');
+    expect(authOnly).toHaveProperty('auth');
+    expect(authOnly).not.toHaveProperty('follow');
+
+    const followOnly = setupOxyStore.pick('follow');
+    expect(followOnly).toHaveProperty('follow');
+    expect(followOnly).not.toHaveProperty('auth');
+
+    const both = setupOxyStore.pick('auth', 'follow');
+    expect(both).toHaveProperty('auth');
+    expect(both).toHaveProperty('follow');
+  });
+
+  test('should export individual reducers', () => {
+    expect(oxyReducers).toHaveProperty('auth');
+    expect(oxyReducers).toHaveProperty('follow');
+    expect(oxyReducers.auth).toBe(authSlice.reducer);
+    expect(oxyReducers.follow).toBe(followSlice.reducer);
+  });
+});

package/src/__tests__/validate-structure.js

@@ -0,0 +1,91 @@
+/**
+ * Simple file structure validation for the new Redux architecture
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const requiredFiles = [
+  'src/ui/store/setupOxyStore.ts',
+  'src/ui/store/slices/authSlice.ts',
+  'src/ui/store/slices/followSlice.ts',
+  'src/ui/store/slices/types.ts',
+  'src/ui/store/slices/index.ts',
+  'src/ui/hooks/useOxyFollow.ts',
+  'docs/redux-integration.md',
+  'docs/migration-guide-redux.md',
+];
+
+const requiredExports = [
+  'setupOxyStore',
+  'authSlice',
+  'followSlice',
+  'authReducer',
+  'followReducer',
+  'useOxyFollow',
+];
+
+console.log('🔍 Validating new Redux architecture...\n');
+
+// Check required files exist
+let filesValid = true;
+for (const file of requiredFiles) {
+  const fullPath = path.join(__dirname, '..', '..', file);
+  if (fs.existsSync(fullPath)) {
+    console.log(`✅ ${file}`);
+  } else {
+    console.log(`❌ ${file} - MISSING`);
+    filesValid = false;
+  }
+}
+
+// Check key exports in files
+const setupOxyStoreFile = path.join(__dirname, '..', 'ui', 'store', 'setupOxyStore.ts');
+if (fs.existsSync(setupOxyStoreFile)) {
+  const content = fs.readFileSync(setupOxyStoreFile, 'utf8');
+  if (content.includes('export function setupOxyStore')) {
+    console.log('✅ setupOxyStore function exported');
+  } else {
+    console.log('❌ setupOxyStore function not found');
+    filesValid = false;
+  }
+}
+
+const indexFile = path.join(__dirname, '..', 'ui', 'index.ts');
+if (fs.existsSync(indexFile)) {
+  const content = fs.readFileSync(indexFile, 'utf8');
+  const exportsFound = requiredExports.filter(exp => content.includes(exp));
+  console.log(`✅ Exports found in ui/index.ts: ${exportsFound.join(', ')}`);
+  
+  if (exportsFound.length < requiredExports.length) {
+    const missing = requiredExports.filter(exp => !exportsFound.includes(exp));
+    console.log(`⚠️  Missing exports: ${missing.join(', ')}`);
+  }
+}
+
+// Check main index file
+const mainIndexFile = path.join(__dirname, '..', 'index.ts');
+if (fs.existsSync(mainIndexFile)) {
+  const content = fs.readFileSync(mainIndexFile, 'utf8');
+  if (content.includes('setupOxyStore')) {
+    console.log('✅ setupOxyStore exported from main index');
+  } else {
+    console.log('❌ setupOxyStore not exported from main index');
+    filesValid = false;
+  }
+}
+
+console.log('\n' + '='.repeat(50));
+if (filesValid) {
+  console.log('🎉 All validations passed! New Redux architecture is properly implemented.');
+  console.log('\nKey features:');
+  console.log('- ✅ Framework-agnostic Redux integration');
+  console.log('- ✅ Tree-shakable with setupOxyStore.pick()');
+  console.log('- ✅ Individual slice exports');
+  console.log('- ✅ External store support');
+  console.log('- ✅ Backward compatibility');
+  console.log('- ✅ Comprehensive documentation');
+} else {
+  console.log('❌ Some validations failed. Please check the missing files/exports.');
+  process.exit(1);
+}

package/src/__tests__/validation.js

@@ -0,0 +1,42 @@
+/**
+ * Simple validation test for the new Redux architecture
+ * This test can be run to ensure the refactoring works correctly
+ */
+
+import { configureStore } from '@reduxjs/toolkit';
+
+// Test that setupOxyStore can be imported and used
+try {
+  const { setupOxyStore } = require('../ui/store/setupOxyStore');
+  
+  console.log('✅ setupOxyStore imported successfully');
+  
+  // Test basic usage
+  const reducers = setupOxyStore();
+  console.log('✅ setupOxyStore() returns reducers:', Object.keys(reducers));
+  
+  // Test tree-shaking
+  const authOnly = setupOxyStore.pick('auth');
+  console.log('✅ Tree-shaking works:', Object.keys(authOnly));
+  
+  // Test with configureStore
+  const store = configureStore({
+    reducer: {
+      ...setupOxyStore(),
+      custom: (state = { test: true }) => state,
+    },
+  });
+  
+  const state = store.getState();
+  console.log('✅ Store integration works:', Object.keys(state));
+  
+  // Test individual exports
+  const { authSlice, followSlice } = require('../ui/store/slices');
+  console.log('✅ Individual slices exported:', authSlice.name, followSlice.name);
+  
+  console.log('\n🎉 All tests passed! The new Redux architecture is working correctly.');
+  
+} catch (error) {
+  console.error('❌ Test failed:', error);
+  process.exit(1);
+}

package/src/core/index.ts

@@ -1676,72 +1676,6 @@ 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

@@ -18,6 +18,7 @@ import {
   OxyProvider, 
   OxyContextProvider, 
   useOxy,
+  useAuthFetch,
   
   // Components
   OxySignInButton,
@@ -39,9 +40,8 @@ import { OxyContextState, OxyContextProviderProps } from './ui/context/OxyContex
 import * as Models from './models/interfaces';
 
 // ------------- Core Exports -------------
-export default OxyCore; // Default export for backward compatibility
-export { OxyServices };
-export * from './core';
+export { OxyCore, OxyServices };
+export default OxyServices;  // Default export for backward compatibility
 
 // ------------- Utility Exports -------------
 export { DeviceManager } from './utils';
@@ -57,6 +57,7 @@ export {
   OxyProvider, 
   OxyContextProvider, 
   useOxy,
+  useAuthFetch,
   
   // Components
   OxySignInButton,
@@ -68,10 +69,41 @@ 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';
 
 // ------------- Type Exports -------------
 export { OxyContextState, OxyContextProviderProps };

package/src/ui/components/FollowButton.tsx

@@ -142,31 +142,17 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   const dispatch = useDispatch();
   const { oxyServices, isAuthenticated } = useOxy();
 
-  // 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);
-  });
+  // 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;
 

package/src/ui/components/OxyProvider.tsx

@@ -32,55 +32,70 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
         onAuthStateChange,
         storageKeyPrefix,
         showInternalToaster = true,
+        store: externalStore,
+        skipReduxProvider = false,
         ...bottomSheetProps
     } = props;
 
     // Create internal bottom sheet ref
     const internalBottomSheetRef = useRef<BottomSheetModalRef>(null);
 
-    // If contextOnly is true, we just provide the context without the bottom sheet UI
-    if (contextOnly) {
+    // Determine which store to use
+    const storeToUse = externalStore || store;
+
+    // Helper function to wrap content with Redux Provider if needed
+    const wrapWithReduxProvider = (content: React.ReactNode) => {
+        if (skipReduxProvider) {
+            // App manages Redux Provider externally
+            return content;
+        }
+
         return (
-            <Provider store={store}>
-                <OxyContextProvider
-                    oxyServices={oxyServices}
-                    storageKeyPrefix={storageKeyPrefix}
-                    onAuthStateChange={onAuthStateChange}
-                >
-                    {children}
-                </OxyContextProvider>
+            <Provider store={storeToUse}>
+                {content}
             </Provider>
         );
-    }
+    };
 
-    // Otherwise, provide both the context and the bottom sheet UI
-    return (
-        <Provider store={store}>
+    // If contextOnly is true, we just provide the context without the bottom sheet UI
+    if (contextOnly) {
+        return wrapWithReduxProvider(
             <OxyContextProvider
                 oxyServices={oxyServices}
                 storageKeyPrefix={storageKeyPrefix}
                 onAuthStateChange={onAuthStateChange}
-                bottomSheetRef={internalBottomSheetRef}
             >
-                <FontLoader>
-                    <GestureHandlerRootView style={styles.gestureHandlerRoot}>
-                        <BottomSheetModalProvider>
-                            <StatusBar translucent backgroundColor="transparent" />
-                            <SafeAreaProvider>
-                                <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
-                                {children}
-                            </SafeAreaProvider>
-                        </BottomSheetModalProvider>
-                        {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
-                        {!showInternalToaster && (
-                            <View style={styles.toasterContainer}>
-                                <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
-                            </View>
-                        )}
-                    </GestureHandlerRootView>
-                </FontLoader>
+                {children}
             </OxyContextProvider>
-        </Provider>
+        );
+    }
+
+    // Otherwise, provide both the context and the bottom sheet UI
+    return wrapWithReduxProvider(
+        <OxyContextProvider
+            oxyServices={oxyServices}
+            storageKeyPrefix={storageKeyPrefix}
+            onAuthStateChange={onAuthStateChange}
+            bottomSheetRef={internalBottomSheetRef}
+        >
+            <FontLoader>
+                <GestureHandlerRootView style={styles.gestureHandlerRoot}>
+                    <BottomSheetModalProvider>
+                        <StatusBar translucent backgroundColor="transparent" />
+                        <SafeAreaProvider>
+                            <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
+                            {children}
+                        </SafeAreaProvider>
+                    </BottomSheetModalProvider>
+                    {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
+                    {!showInternalToaster && (
+                        <View style={styles.toasterContainer}>
+                            <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
+                        </View>
+                    )}
+                </GestureHandlerRootView>
+            </FontLoader>
+        </OxyContextProvider>
     );
 };
 

package/src/ui/components/OxySignInButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, ViewStyle, TextStyle, StyleProp, Platform } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
-import { fontFamilies } from '../styles/fonts';
+import { fontFamilies, shadows } from '../styles';
 
 export interface OxySignInButtonProps {
     /**
@@ -168,11 +168,7 @@ const styles = StyleSheet.create({
         backgroundColor: '#FFFFFF',
         borderWidth: 1,
         borderColor: '#DDDDDD',
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 2,
+        ...shadows.button,
     },
     buttonOutline: {
         backgroundColor: 'transparent',

package/src/ui/hooks/index.ts

@@ -1 +1,2 @@
-export { useFollow } from './useFollow'; 
+export { useOxyFollow, useFollow } from './useOxyFollow';
+export { useAuthFetch } from './useAuthFetch';