@oxyhq/services 5.4.3 → 5.4.5

package/src/ui/context/OxyContext.tsx

@@ -11,7 +11,7 @@ export interface OxyContextState {
   minimalUser: MinimalUserData | null; // Minimal user data for UI
   sessions: SecureClientSession[]; // All active sessions
   activeSessionId: string | null;
-  isAuthenticated: boolean;
+  isAuthenticated: boolean; // Single source of truth for authentication - use this instead of service methods
   isLoading: boolean;
   error: string | null;
 
@@ -640,13 +640,23 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [bottomSheetRef]);
 
+  // Compute comprehensive authentication status
+  // This is the single source of truth for authentication across the entire app
+  const isAuthenticated = useMemo(() => {
+    // User is authenticated if:
+    // 1. We have a full user object loaded, OR
+    // 2. We have an active session with a valid token
+    // This covers both the loaded state and the loading-but-authenticated state
+    return !!user || (!!activeSessionId && !!oxyServices?.getCurrentUserId());
+  }, [user, activeSessionId, oxyServices]);
+
   // Context value
   const contextValue: OxyContextState = {
     user,
     minimalUser,
     sessions,
     activeSessionId,
-    isAuthenticated: !!user,
+    isAuthenticated,
     isLoading,
     error,
     login,

package/src/ui/hooks/index.ts

@@ -0,0 +1 @@
+export { useFollow } from './useFollow'; 

package/src/ui/hooks/useFollow.ts

@@ -0,0 +1,173 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useCallback, useMemo } from 'react';
+import { toggleFollowUser, setFollowingStatus, clearFollowError, fetchFollowStatus } from '../store';
+import type { RootState } from '../store';
+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,
+});
+
+// Memoized selector for multiple users
+const createMultipleFollowSelector = (userIds: string[]) => (state: RootState) => {
+  const followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+  const followState = state.follow;
+  
+  for (const userId of userIds) {
+    followData[userId] = {
+      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]),
+  };
+};
+
+/**
+ * Custom hook for managing follow/unfollow functionality
+ * Optimized to prevent unnecessary re-renders
+ * Can handle both single user and multiple users
+ */
+export const useFollow = (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,
+  };
+}; 

package/src/ui/index.ts

@@ -14,15 +14,28 @@ export { FontLoader, setupFonts } from './components/FontLoader';
 export { OxyIcon } from './components/icon';
 export type { IconProps } from './components/icon';
 
-export { 
-  OxyContextProvider, 
+export {
+  OxyContextProvider,
   useOxy,
   OxyContextState,
   OxyContextProviderProps
 } from './context/OxyContext';
 
+// Redux store exports
+export { store } from './store';
+export type { RootState, AppDispatch } from './store';
+
 // Export styles
 export { fontFamilies, fontStyles } from './styles/fonts';
 
 // Export types for navigation (internal use)
 export * from './navigation/types';
+
+// Hooks
+export { useFollow } from './hooks';
+
+// Screens
+export { default as ProfileScreen } from './screens/ProfileScreen';
+
+// Navigation
+export { default as OxyRouter } from './navigation/OxyRouter';

package/src/ui/navigation/OxyRouter.tsx

@@ -13,6 +13,7 @@ import AccountSettingsScreen from '../screens/AccountSettingsScreen';
 import PremiumSubscriptionScreen from '../screens/PremiumSubscriptionScreen';
 import BillingManagementScreen from '../screens/BillingManagementScreen';
 import AppInfoScreen from '../screens/AppInfoScreen';
+import FeedbackScreen from '../screens/FeedbackScreen';
 import KarmaCenterScreen from '../screens/karma/KarmaCenterScreen';
 import KarmaLeaderboardScreen from '../screens/karma/KarmaLeaderboardScreen';
 import KarmaRulesScreen from '../screens/karma/KarmaRulesScreen';
@@ -67,6 +68,10 @@ const routes: Record<string, RouteConfig> = {
         component: AppInfoScreen,
         snapPoints: ['60%', '90%'],
     },
+    Feedback: {
+        component: FeedbackScreen,
+        snapPoints: ['70%', '100%'],
+    },
     KarmaCenter: {
         component: KarmaCenterScreen,
         snapPoints: ['60%', '100%'],
@@ -138,7 +143,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         if (navigationRef) {
             navigationRef.current = navigate;
         }
-        
+
         return () => {
             if (navigationRef) {
                 navigationRef.current = null;
@@ -166,7 +171,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 
         // For React Native - check for global navigation events
         let intervalId: any = null;
-        
+
         if (typeof document !== 'undefined') {
             // Web - use custom event listener
             document.addEventListener('oxy:navigate', handleNavigationEvent);
@@ -214,7 +219,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
     // Render the current screen component
     const renderScreen = () => {
         const CurrentScreen = routes[currentScreen]?.component;
-        
+
         console.log('[OxyRouter] Rendering screen:', currentScreen);
         console.log('[OxyRouter] Available routes:', Object.keys(routes));
         console.log('[OxyRouter] Current screen component found:', !!CurrentScreen);

package/src/ui/screens/AccountCenterScreen.tsx

@@ -15,12 +15,12 @@ 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 
+import {
+    ProfileCard,
+    Section,
+    QuickActions,
+    GroupedSection,
+    GroupedItem
 } from '../components';
 
 const AccountCenterScreen: React.FC<BaseScreenProps> = ({
@@ -28,7 +28,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, sessions } = useOxy();
+    const { user, logout, isLoading, sessions, isAuthenticated } = useOxy();
 
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
@@ -69,7 +69,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    if (!user) {
+    if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor }]}>
                 <Text style={[styles.message, { color: textColor }]}>Not signed in</Text>
@@ -88,13 +88,15 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     return (
         <View style={[styles.container, { backgroundColor }]}>
             {/* Header with user profile */}
-            <ProfileCard
-                user={user}
-                theme={theme}
-                onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
-                onClosePress={onClose}
-                showCloseButton={!!onClose}
-            />
+            {user && (
+                <ProfileCard
+                    user={user}
+                    theme={theme}
+                    onEditPress={() => navigate('AccountSettings', { activeTab: 'profile' })}
+                    onClosePress={onClose}
+                    showCloseButton={!!onClose}
+                />
+            )}
 
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
                 {/* Quick Actions */}

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -34,7 +34,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, sessions, activeSessionId, oxyServices } = useOxy();
+    const { user, logout, isLoading, sessions, activeSessionId, oxyServices, isAuthenticated } = useOxy();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
@@ -55,8 +55,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     }, [theme]);
 
     // Memoize additional accounts filtering to prevent recalculation on every render
-    const additionalAccounts = useMemo(() => 
-        sessions.filter(session => 
+    const additionalAccounts = useMemo(() =>
+        sessions.filter(session =>
             session.sessionId !== activeSessionId && session.userId !== user?.id
         ), [sessions, activeSessionId, user?.id]
     );
@@ -170,7 +170,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         );
     }, [handleLogout]);
 
-    if (!user) {
+    if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
                 <Text style={[styles.message, { color: themeStyles.textColor }]}>Not signed in</Text>
@@ -202,7 +202,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* User Profile Section */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Profile</Text>
-                    
+
                     <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
                         <View style={styles.userIcon}>
                             <Avatar
@@ -215,9 +215,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <View style={styles.settingInfo}>
                             <View>
                                 <Text style={styles.settingLabel}>
-                                    {typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username}
+                                    {user ? (typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username) : 'Loading...'}
                                 </Text>
-                                <Text style={styles.settingDescription}>{user.email || user.username}</Text>
+                                <Text style={styles.settingDescription}>{user ? (user.email || user.username) : 'Loading...'}</Text>
                             </View>
                         </View>
                         <TouchableOpacity
@@ -232,8 +232,8 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Account Settings */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Account Settings</Text>
-                    
-                    <TouchableOpacity 
+
+                    <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'profile' })}
                     >
@@ -247,7 +247,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={styles.settingItem}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'password' })}
                     >
@@ -261,7 +261,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={styles.settingItem}
                         onPress={() => navigate?.('AccountSettings', { activeTab: 'notifications' })}
                     >
@@ -275,7 +275,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={[styles.settingItem]}
                         onPress={() => navigate?.('PremiumSubscription')}
                     >
@@ -283,14 +283,14 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             <OxyIcon name="star" size={20} color="#FFD700" style={styles.settingIcon} />
                             <View>
                                 <Text style={styles.settingLabel}>Oxy+ Subscriptions</Text>
-                                <Text style={styles.settingDescription}>{user.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'}</Text>
+                                <Text style={styles.settingDescription}>{user?.isPremium ? 'Manage your premium plan' : 'Upgrade to premium features'}</Text>
                             </View>
                         </View>
                         <OxyIcon name="chevron-forward" size={16} color="#ccc" />
                     </TouchableOpacity>
 
-                    {user.isPremium && (
-                        <TouchableOpacity 
+                    {user?.isPremium && (
+                        <TouchableOpacity
                             style={[styles.settingItem, styles.lastSettingItem]}
                             onPress={() => navigate?.('BillingManagement')}
                         >
@@ -310,7 +310,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {showMoreAccounts && (
                     <View style={styles.section}>
                         <Text style={styles.sectionTitle}>Additional Accounts{additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}</Text>
-                        
+
                         {loadingAdditionalAccounts ? (
                             <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem]}>
                                 <View style={styles.loadingContainer}>
@@ -324,7 +324,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     <TouchableOpacity
                                         key={account.id}
                                         style={[
-                                            styles.settingItem, 
+                                            styles.settingItem,
                                             index === 0 && styles.firstSettingItem,
                                             index === additionalAccountsData.length - 1 && styles.lastSettingItem
                                         ]}
@@ -348,7 +348,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         <View style={styles.settingInfo}>
                                             <View>
                                                 <Text style={styles.settingLabel}>
-                                                    {typeof account.name === 'object' 
+                                                    {typeof account.name === 'object'
                                                         ? account.name?.full || account.name?.first || account.username
                                                         : account.name || account.username
                                                     }
@@ -378,7 +378,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {showMoreAccounts && (
                     <View style={styles.section}>
                         <Text style={styles.sectionTitle}>Account Management</Text>
-                        
+
                         <TouchableOpacity
                             style={[styles.settingItem, styles.firstSettingItem]}
                             onPress={handleAddAccount}
@@ -412,7 +412,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Quick Actions */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Quick Actions</Text>
-                    
+
                     <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => setShowMoreAccounts(!showMoreAccounts)}
@@ -424,9 +424,9 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     {showMoreAccounts ? 'Hide' : 'Show'} Account Switcher
                                 </Text>
                                 <Text style={styles.settingDescription}>
-                                    {showMoreAccounts 
-                                        ? 'Hide account switcher' 
-                                        : additionalAccountsData.length > 0 
+                                    {showMoreAccounts
+                                        ? 'Hide account switcher'
+                                        : additionalAccountsData.length > 0
                                             ? `Switch between ${additionalAccountsData.length + 1} accounts`
                                             : loadingAdditionalAccounts
                                                 ? 'Loading additional accounts...'
@@ -470,7 +470,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 {/* Support & Settings */}
                 <View style={styles.section}>
                     <Text style={styles.sectionTitle}>Support & Settings</Text>
-                    
+
                     <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem]}
                         onPress={() => toast.info('Account preferences coming soon!')}
@@ -544,7 +544,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
                 {/* Sign Out */}
                 <View style={styles.section}>
-                    <TouchableOpacity 
+                    <TouchableOpacity
                         style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.signOutButton]}
                         onPress={confirmLogout}
                     >