@oxyhq/services 5.4.8 → 5.5.1

package/src/ui/screens/karma/KarmaRewardsScreen.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, ScrollView } from 'react-native';
 import { BaseScreenProps } from '../../navigation/types';
+import { shadows } from '../../styles';
 
 const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const isDarkTheme = theme === 'dark';
@@ -41,11 +42,7 @@ const styles = StyleSheet.create({
         borderRadius: 16,
         padding: 18,
         marginBottom: 18,
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
-        shadowOffset: { width: 0, height: 1 },
-        shadowRadius: 4,
-        elevation: 1,
+        ...shadows.small,
     },
     rewardTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 6 },
     rewardDesc: { fontSize: 15 },

package/src/ui/store/index.ts

@@ -1,250 +1,36 @@
-import { configureStore, createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
-import type { User } from '../../models/interfaces';
-
-interface AuthState {
-  user: User | null;
-  isAuthenticated: boolean;
-  isLoading: boolean;
-  error: string | null;
-}
-
-interface FollowState {
-  // Track follow status for each user ID
-  followingUsers: Record<string, boolean>;
-  // Track loading state for each user ID
-  loadingUsers: Record<string, boolean>;
-  // Track which user IDs are currently being fetched (to prevent duplicate requests)
-  fetchingUsers: Record<string, boolean>;
-  // Track any follow/unfollow errors
-  errors: Record<string, string | null>;
-}
-
-const initialAuthState: AuthState = {
-  user: null,
-  isAuthenticated: false,
-  isLoading: false,
-  error: null,
-};
-
-const initialFollowState: FollowState = {
-  followingUsers: {},
-  loadingUsers: {},
-  fetchingUsers: {},
-  errors: {},
-};
-
-// Async thunk for fetching follow status from backend with deduplication
-export const fetchFollowStatus = createAsyncThunk(
-  'follow/fetchFollowStatus',
-  async ({ userId, oxyServices }: { userId: string; oxyServices: any }, { rejectWithValue }) => {
-    try {
-      // Use the proper core service method
-      const response = await oxyServices.getFollowStatus(userId);
-      return { userId, isFollowing: response.isFollowing };
-    } catch (error: any) {
-      // Ignore authentication errors when user isn't signed in - don't update state
-      if (error?.status === 401 || error?.message?.includes('Authentication')) {
-        return rejectWithValue('Not authenticated');
-      }
-      // Log other failures and reject to not update state
-      console.warn(`Failed to fetch follow status for user ${userId}:`, error);
-      return rejectWithValue(error?.message || 'Failed to fetch follow status');
-    }
-  },
-  {
-    // Prevent duplicate requests for the same user ID
-    condition: ({ userId }, { getState }) => {
-      const state = getState() as RootState;
-      // Defensive check for follow state
-      if (!state.follow?.fetchingUsers) {
-        return true; // Allow request if state not initialized
-      }
-      
-      const isAlreadyFetching = state.follow.fetchingUsers[userId];
-      
-      if (isAlreadyFetching) {
-        console.log(`⚡ Deduplicating fetch request for user ${userId} - already in progress`);
-        return false; // Cancel this request
-      }
-      
-      return true; // Allow this request
-    }
-  }
-);
-
-// Async thunk for following/unfollowing users using core services
-export const toggleFollowUser = createAsyncThunk(
-  'follow/toggleFollowUser',
-  async ({ userId, oxyServices, isCurrentlyFollowing }: { 
-    userId: string; 
-    oxyServices: any; 
-    isCurrentlyFollowing: boolean; 
-  }, { rejectWithValue, dispatch }) => {
-    try {
-      let response: { success?: boolean; message?: string; action?: string };
-      let newFollowState: boolean;
-
-      if (isCurrentlyFollowing) {
-        // Use the core service to unfollow user
-        response = await oxyServices.unfollowUser(userId);
-        newFollowState = false;
-      } else {
-        // Use the core service to follow user
-        response = await oxyServices.followUser(userId);
-        newFollowState = true;
-      }
-
-      // Check if the response indicates success (different APIs might return different formats)
-      const isSuccess = response.success !== false && response.action !== 'error';
-      
-      if (isSuccess) {
-        return { 
-          userId, 
-          isFollowing: newFollowState, 
-          message: response.message || `Successfully ${newFollowState ? 'followed' : 'unfollowed'} user` 
-        };
-      } else {
-        return rejectWithValue(response.message || `Failed to ${newFollowState ? 'follow' : 'unfollow'} user`);
-      }
-    } catch (error: any) {
-      // Enhanced error handling with state mismatch detection
-      let errorMessage = 'Network error occurred';
-      
-      if (error?.message) {
-        errorMessage = error.message;
-      } else if (error?.response?.data?.message) {
-        errorMessage = error.response.data.message;
-      } else if (error?.data?.message) {
-        errorMessage = error.data.message;
-      }
-
-      // Handle state mismatch errors by syncing with backend
-      if (errorMessage.includes('Not following this user') && isCurrentlyFollowing) {
-        console.warn(`State mismatch detected for user ${userId}: Frontend thinks following, backend says not following. Syncing state...`);
-        // Auto-sync with backend state
-        try {
-          const actualStatus = await oxyServices.getFollowStatus(userId);
-          dispatch({ type: 'follow/setFollowingStatus', payload: { userId, isFollowing: actualStatus.isFollowing } });
-          return rejectWithValue('State synced with backend. Please try again.');
-        } catch (syncError) {
-          console.error('Failed to sync state with backend:', syncError);
-        }
-      } else if (errorMessage.includes('Already following this user') && !isCurrentlyFollowing) {
-        console.warn(`State mismatch detected for user ${userId}: Frontend thinks not following, backend says following. Syncing state...`);
-        // Auto-sync with backend state
-        try {
-          const actualStatus = await oxyServices.getFollowStatus(userId);
-          dispatch({ type: 'follow/setFollowingStatus', payload: { userId, isFollowing: actualStatus.isFollowing } });
-          return rejectWithValue('State synced with backend. Please try again.');
-        } catch (syncError) {
-          console.error('Failed to sync state with backend:', syncError);
-        }
-      }
-      
-      return rejectWithValue(errorMessage);
-    }
-  }
-);
-
-const authSlice = createSlice({
-  name: 'auth',
-  initialState: initialAuthState,
-  reducers: {
-    loginStart(state: AuthState) {
-      state.isLoading = true;
-      state.error = null;
-    },
-    loginSuccess(state: AuthState, action: PayloadAction<User>) {
-      state.isLoading = false;
-      state.isAuthenticated = true;
-      state.user = action.payload;
-    },
-    loginFailure(state: AuthState, action: PayloadAction<string>) {
-      state.isLoading = false;
-      state.error = action.payload;
-    },
-    logout(state: AuthState) {
-      state.user = null;
-      state.isAuthenticated = false;
-    },
-  },
-});
-
-const followSlice = createSlice({
-  name: 'follow',
-  initialState: initialFollowState,
-  reducers: {
-    setFollowingStatus(state: FollowState, action: PayloadAction<{ userId: string; isFollowing: boolean }>) {
-      const { userId, isFollowing } = action.payload;
-      state.followingUsers[userId] = isFollowing;
-      state.errors[userId] = null;
-    },
-    clearFollowError(state: FollowState, action: PayloadAction<string>) {
-      const userId = action.payload;
-      state.errors[userId] = null;
-    },
-    resetFollowState(state: FollowState) {
-      state.followingUsers = {};
-      state.loadingUsers = {};
-      state.fetchingUsers = {};
-      state.errors = {};
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      // Handle fetchFollowStatus
-      .addCase(fetchFollowStatus.pending, (state, action) => {
-        const { userId } = action.meta.arg;
-        state.fetchingUsers[userId] = true;
-        state.errors[userId] = null;
-      })
-      .addCase(fetchFollowStatus.fulfilled, (state, action) => {
-        const { userId, isFollowing } = action.payload;
-        state.followingUsers[userId] = isFollowing;
-        state.fetchingUsers[userId] = false;
-        state.errors[userId] = null;
-      })
-      .addCase(fetchFollowStatus.rejected, (state, action) => {
-        const { userId } = action.meta.arg;
-        state.fetchingUsers[userId] = false;
-        // Don't update follow state on fetch errors - preserve existing/initial state
-        if (action.payload !== 'Not authenticated') {
-          console.warn(`Failed to fetch follow status for user ${userId}:`, action.payload);
-        }
-      })
-      // Handle toggleFollowUser
-      .addCase(toggleFollowUser.pending, (state, action) => {
-        const { userId } = action.meta.arg;
-        state.loadingUsers[userId] = true;
-        state.errors[userId] = null;
-      })
-      .addCase(toggleFollowUser.fulfilled, (state, action) => {
-        const { userId, isFollowing } = action.payload;
-        state.followingUsers[userId] = isFollowing;
-        state.loadingUsers[userId] = false;
-        state.errors[userId] = null;
-      })
-      .addCase(toggleFollowUser.rejected, (state, action) => {
-        const { userId } = action.meta.arg;
-        state.loadingUsers[userId] = false;
-        state.errors[userId] = action.error.message || 'Failed to update follow status';
-      });
-  },
-});
-
-export const { loginStart, loginSuccess, loginFailure, logout } = authSlice.actions;
-export const { setFollowingStatus, clearFollowError, resetFollowState } = followSlice.actions;
-
-// Selectors for follow state
-export const selectIsUserBeingFetched = (state: RootState, userId: string) => 
-  state.follow?.fetchingUsers?.[userId] ?? false;
-
+/**
+ * OxyHQ Services Redux Store
+ * Framework-agnostic, tree-shakable Redux integration
+ * 
+ * This module exports individual slices, reducers, actions, selectors, and helpers
+ * for easy integration into any Redux store without internal dependencies.
+ */
+
+// Export individual slices and their components
+export * from './slices';
+
+// Export setup helper for easy integration
+export { setupOxyStore, oxyReducers } from './setupOxyStore';
+
+// Export types for external store integration
+export type { AuthState, FollowState } from './slices/types';
+
+// For backward compatibility: create a legacy store instance
+// This will be deprecated in favor of setupOxyStore()
+import { configureStore } from '@reduxjs/toolkit';
+import { setupOxyStore } from './setupOxyStore';
+
+/**
+ * @deprecated Use setupOxyStore() instead to integrate with your app's store
+ * This internal store will be removed in a future version
+ */
 export const store = configureStore({
-  reducer: {
-    auth: authSlice.reducer,
-    follow: followSlice.reducer,
-  },
+  reducer: setupOxyStore(),
 });
 
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
+
+// Legacy selector (deprecated)
+export const selectIsUserBeingFetched = (state: RootState, userId: string) => 
+  state.follow.fetchingUsers[userId] ?? false;

package/src/ui/store/setupOxyStore.ts

@@ -0,0 +1,58 @@
+import { authReducer } from './slices/authSlice';
+import { followReducer } from './slices/followSlice';
+
+/**
+ * Setup helper for Oxy Store
+ * Returns all Oxy reducers ready to be spread into a host app's Redux store
+ * 
+ * Usage:
+ * ```ts
+ * const store = configureStore({
+ *   reducer: {
+ *     ...setupOxyStore(),
+ *     appSpecificReducer,
+ *   },
+ * });
+ * ```
+ */
+export function setupOxyStore() {
+  return {
+    auth: authReducer,
+    follow: followReducer,
+  };
+}
+
+/**
+ * Tree-shakable version where you can pick specific reducers
+ * 
+ * Usage:
+ * ```ts
+ * const store = configureStore({
+ *   reducer: {
+ *     ...setupOxyStore.pick('auth'), // Only include auth
+ *     // or
+ *     ...setupOxyStore.pick('auth', 'follow'), // Include both
+ *     appSpecificReducer,
+ *   },
+ * });
+ * ```
+ */
+setupOxyStore.pick = function(...keys: Array<'auth' | 'follow'>) {
+  const allReducers = setupOxyStore();
+  const pickedReducers = {} as Partial<ReturnType<typeof setupOxyStore>>;
+  
+  for (const key of keys) {
+    if (key in allReducers) {
+      // Use bracket notation with explicit typing
+      (pickedReducers as Record<string, any>)[key] = allReducers[key];
+    }
+  }
+  
+  return pickedReducers;
+};
+
+// Export individual reducers for maximum flexibility
+export const oxyReducers = {
+  auth: authReducer,
+  follow: followReducer,
+};

package/src/ui/store/slices/authSlice.ts

@@ -0,0 +1,43 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { User } from '../../../models/interfaces';
+import type { AuthState } from './types';
+import { initialAuthState } from './types';
+
+export const authSlice = createSlice({
+  name: 'auth',
+  initialState: initialAuthState,
+  reducers: {
+    loginStart(state: AuthState) {
+      state.isLoading = true;
+      state.error = null;
+    },
+    loginSuccess(state: AuthState, action: PayloadAction<User>) {
+      state.isLoading = false;
+      state.isAuthenticated = true;
+      state.user = action.payload;
+    },
+    loginFailure(state: AuthState, action: PayloadAction<string>) {
+      state.isLoading = false;
+      state.error = action.payload;
+    },
+    logout(state: AuthState) {
+      state.user = null;
+      state.isAuthenticated = false;
+    },
+  },
+});
+
+// Export actions
+export const authActions = authSlice.actions;
+export const { loginStart, loginSuccess, loginFailure, logout } = authSlice.actions;
+
+// Export selectors
+export const authSelectors = {
+  selectUser: (state: { auth: AuthState }) => state.auth.user,
+  selectIsAuthenticated: (state: { auth: AuthState }) => state.auth.isAuthenticated,
+  selectIsLoading: (state: { auth: AuthState }) => state.auth.isLoading,
+  selectError: (state: { auth: AuthState }) => state.auth.error,
+};
+
+// Export reducer
+export const authReducer = authSlice.reducer;

package/src/ui/store/slices/followSlice.ts

@@ -0,0 +1,207 @@
+import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
+import type { FollowState } from './types';
+import { initialFollowState } from './types';
+
+// Define thunk state interface for dependency injection
+interface RootState {
+  follow: FollowState;
+}
+
+// Async thunk for fetching follow status from backend with deduplication
+export const fetchFollowStatus = createAsyncThunk(
+  'follow/fetchFollowStatus',
+  async ({ userId, oxyServices }: { userId: string; oxyServices: any }, { rejectWithValue }) => {
+    try {
+      // Use the proper core service method
+      const response = await oxyServices.getFollowStatus(userId);
+      return { userId, isFollowing: response.isFollowing };
+    } catch (error: any) {
+      // Ignore authentication errors when user isn't signed in - don't update state
+      if (error?.status === 401 || error?.message?.includes('Authentication')) {
+        return rejectWithValue('Not authenticated');
+      }
+      // Log other failures and reject to not update state
+      console.warn(`Failed to fetch follow status for user ${userId}:`, error);
+      return rejectWithValue(error?.message || 'Failed to fetch follow status');
+    }
+  },
+  {
+    // Prevent duplicate requests for the same user ID
+    condition: ({ userId }, { getState }) => {
+      const state = getState() as RootState;
+      const isAlreadyFetching = state.follow.fetchingUsers[userId];
+      
+      if (isAlreadyFetching) {
+        console.log(`⚡ Deduplicating fetch request for user ${userId} - already in progress`);
+        return false; // Cancel this request
+      }
+      
+      return true; // Allow this request
+    }
+  }
+);
+
+// Async thunk for following/unfollowing users using core services
+export const toggleFollowUser = createAsyncThunk(
+  'follow/toggleFollowUser',
+  async ({ userId, oxyServices, isCurrentlyFollowing }: { 
+    userId: string; 
+    oxyServices: any; 
+    isCurrentlyFollowing: boolean; 
+  }, { rejectWithValue, dispatch }) => {
+    try {
+      let response: { success?: boolean; message?: string; action?: string };
+      let newFollowState: boolean;
+
+      if (isCurrentlyFollowing) {
+        // Use the core service to unfollow user
+        response = await oxyServices.unfollowUser(userId);
+        newFollowState = false;
+      } else {
+        // Use the core service to follow user
+        response = await oxyServices.followUser(userId);
+        newFollowState = true;
+      }
+
+      // Check if the response indicates success (different APIs might return different formats)
+      const isSuccess = response.success !== false && response.action !== 'error';
+      
+      if (isSuccess) {
+        return { 
+          userId, 
+          isFollowing: newFollowState, 
+          message: response.message || `Successfully ${newFollowState ? 'followed' : 'unfollowed'} user` 
+        };
+      } else {
+        return rejectWithValue(response.message || `Failed to ${newFollowState ? 'follow' : 'unfollow'} user`);
+      }
+    } catch (error: any) {
+      // Enhanced error handling with state mismatch detection
+      let errorMessage = 'Network error occurred';
+      
+      if (error?.message) {
+        errorMessage = error.message;
+      } else if (error?.response?.data?.message) {
+        errorMessage = error.response.data.message;
+      } else if (error?.data?.message) {
+        errorMessage = error.data.message;
+      }
+
+      // Handle state mismatch errors by syncing with backend
+      if (errorMessage.includes('Not following this user') && isCurrentlyFollowing) {
+        console.warn(`State mismatch detected for user ${userId}: Frontend thinks following, backend says not following. Syncing state...`);
+        // Auto-sync with backend state
+        try {
+          const actualStatus = await oxyServices.getFollowStatus(userId);
+          dispatch({ type: 'follow/setFollowingStatus', payload: { userId, isFollowing: actualStatus.isFollowing } });
+          return rejectWithValue('State synced with backend. Please try again.');
+        } catch (syncError) {
+          console.error('Failed to sync state with backend:', syncError);
+        }
+      } else if (errorMessage.includes('Already following this user') && !isCurrentlyFollowing) {
+        console.warn(`State mismatch detected for user ${userId}: Frontend thinks not following, backend says following. Syncing state...`);
+        // Auto-sync with backend state
+        try {
+          const actualStatus = await oxyServices.getFollowStatus(userId);
+          dispatch({ type: 'follow/setFollowingStatus', payload: { userId, isFollowing: actualStatus.isFollowing } });
+          return rejectWithValue('State synced with backend. Please try again.');
+        } catch (syncError) {
+          console.error('Failed to sync state with backend:', syncError);
+        }
+      }
+      
+      return rejectWithValue(errorMessage);
+    }
+  }
+);
+
+export const followSlice = createSlice({
+  name: 'follow',
+  initialState: initialFollowState,
+  reducers: {
+    setFollowingStatus(state: FollowState, action: PayloadAction<{ userId: string; isFollowing: boolean }>) {
+      const { userId, isFollowing } = action.payload;
+      state.followingUsers[userId] = isFollowing;
+      state.errors[userId] = null;
+    },
+    clearFollowError(state: FollowState, action: PayloadAction<string>) {
+      const userId = action.payload;
+      state.errors[userId] = null;
+    },
+    resetFollowState(state: FollowState) {
+      state.followingUsers = {};
+      state.loadingUsers = {};
+      state.fetchingUsers = {};
+      state.errors = {};
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      // Handle fetchFollowStatus
+      .addCase(fetchFollowStatus.pending, (state, action) => {
+        const { userId } = action.meta.arg;
+        state.fetchingUsers[userId] = true;
+        state.errors[userId] = null;
+      })
+      .addCase(fetchFollowStatus.fulfilled, (state, action) => {
+        const { userId, isFollowing } = action.payload;
+        state.followingUsers[userId] = isFollowing;
+        state.fetchingUsers[userId] = false;
+        state.errors[userId] = null;
+      })
+      .addCase(fetchFollowStatus.rejected, (state, action) => {
+        const { userId } = action.meta.arg;
+        state.fetchingUsers[userId] = false;
+        // Don't update follow state on fetch errors - preserve existing/initial state
+        if (action.payload !== 'Not authenticated') {
+          console.warn(`Failed to fetch follow status for user ${userId}:`, action.payload);
+        }
+      })
+      // Handle toggleFollowUser
+      .addCase(toggleFollowUser.pending, (state, action) => {
+        const { userId } = action.meta.arg;
+        state.loadingUsers[userId] = true;
+        state.errors[userId] = null;
+      })
+      .addCase(toggleFollowUser.fulfilled, (state, action) => {
+        const { userId, isFollowing } = action.payload;
+        state.followingUsers[userId] = isFollowing;
+        state.loadingUsers[userId] = false;
+        state.errors[userId] = null;
+      })
+      .addCase(toggleFollowUser.rejected, (state, action) => {
+        const { userId } = action.meta.arg;
+        state.loadingUsers[userId] = false;
+        state.errors[userId] = action.error.message || 'Failed to update follow status';
+      });
+  },
+});
+
+// Export actions
+export const followActions = followSlice.actions;
+export const { setFollowingStatus, clearFollowError, resetFollowState } = followSlice.actions;
+
+// Export thunks
+export const followThunks = {
+  fetchFollowStatus,
+  toggleFollowUser,
+};
+
+// Export selectors
+export const followSelectors = {
+  selectFollowingUsers: (state: { follow: FollowState }) => state.follow.followingUsers,
+  selectLoadingUsers: (state: { follow: FollowState }) => state.follow.loadingUsers,
+  selectFetchingUsers: (state: { follow: FollowState }) => state.follow.fetchingUsers,
+  selectFollowErrors: (state: { follow: FollowState }) => state.follow.errors,
+  selectIsUserFollowed: (state: { follow: FollowState }, userId: string) => 
+    state.follow.followingUsers[userId] ?? false,
+  selectIsUserLoading: (state: { follow: FollowState }, userId: string) => 
+    state.follow.loadingUsers[userId] ?? false,
+  selectIsUserBeingFetched: (state: { follow: FollowState }, userId: string) => 
+    state.follow.fetchingUsers[userId] ?? false,
+  selectUserError: (state: { follow: FollowState }, userId: string) => 
+    state.follow.errors[userId] ?? null,
+};
+
+// Export reducer
+export const followReducer = followSlice.reducer;

package/src/ui/store/slices/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Redux slices exports
+ * This file exports individual slices and their components for tree-shaking
+ */
+
+export { 
+  authSlice, 
+  authActions, 
+  authSelectors, 
+  authReducer,
+  loginStart,
+  loginSuccess, 
+  loginFailure,
+  logout 
+} from './authSlice';  
+
+export { 
+  followSlice, 
+  followActions, 
+  followSelectors, 
+  followThunks,
+  followReducer,
+  setFollowingStatus,
+  clearFollowError,
+  resetFollowState,
+  fetchFollowStatus,
+  toggleFollowUser
+} from './followSlice';
+
+export type { AuthState, FollowState } from './types';
+export { initialAuthState, initialFollowState } from './types';

package/src/ui/store/slices/types.ts

@@ -0,0 +1,33 @@
+import type { User } from '../../../models/interfaces';
+
+export interface AuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export interface FollowState {
+  // Track follow status for each user ID
+  followingUsers: Record<string, boolean>;
+  // Track loading state for each user ID
+  loadingUsers: Record<string, boolean>;
+  // Track which user IDs are currently being fetched (to prevent duplicate requests)
+  fetchingUsers: Record<string, boolean>;
+  // Track any follow/unfollow errors
+  errors: Record<string, string | null>;
+}
+
+export const initialAuthState: AuthState = {
+  user: null,
+  isAuthenticated: false,
+  isLoading: false,
+  error: null,
+};
+
+export const initialFollowState: FollowState = {
+  followingUsers: {},
+  loadingUsers: {},
+  fetchingUsers: {},
+  errors: {},
+};

package/src/ui/styles/index.ts

@@ -1,2 +1,3 @@
 export * from './fonts';
 export * from './theme';
+export * from './shadows';