@oxyhq/services 5.8.1 → 5.8.3

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

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform, TouchableOpacity, TextInput, LayoutAnimation, UIManager } from 'react-native';
 import { BaseScreenProps } from '../../navigation/types';
 import { Ionicons } from '@expo/vector-icons';
+import { Header } from '../../components';
 
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -79,7 +80,14 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
     return (
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
-            <Text style={[styles.title, { color: themeStyles.textColor }]}>Karma FAQ</Text>
+            <Header
+                title="Karma FAQ"
+                subtitle="Frequently asked questions about karma"
+                subtitleVariant="muted"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             <View style={[styles.searchBar, { backgroundColor: themeStyles.inputBg, borderColor: themeStyles.inputBorder }]}>
                 <Ionicons name="search-outline" size={20} color={themeStyles.primaryColor} style={{ marginRight: 8 }} />
                 <TextInput
@@ -91,31 +99,37 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     returnKeyType="search"
                 />
             </View>
-            <ScrollView contentContainerStyle={styles.contentContainer} keyboardShouldPersistTaps="handled">
+            <ScrollView contentContainerStyle={styles.contentContainer}>
                 {filteredFaqs.length === 0 ? (
-                    <Text style={[styles.noResults, { color: themeStyles.textColor }]}>No results found.</Text>
+                    <Text style={[styles.noResults, { color: themeStyles.textColor }]}>
+                        No FAQ items found matching "{search}"
+                    </Text>
                 ) : (
-                    filteredFaqs.map((item, idx) => {
-                        const isOpen = expanded === idx;
-                        return (
-                            <TouchableOpacity
-                                key={idx}
-                                style={[styles.card, { backgroundColor: themeStyles.cardColor, shadowColor: themeStyles.isDarkTheme ? '#000' : '#d169e5' }]}
-                                activeOpacity={0.95}
-                                onPress={() => handleToggle(idx)}
-                            >
-                                <View style={styles.questionRow}>
-                                    <Ionicons name={isOpen ? 'chevron-down' : 'chevron-forward'} size={22} color={themeStyles.primaryColor} style={{ marginRight: 8 }} />
-                                    <Text style={[styles.question, { color: themeStyles.primaryColor }]}>{item.q}</Text>
-                                </View>
-                                {isOpen && (
-                                    <Text style={[styles.answer, { color: themeStyles.textColor }]}>{item.a}</Text>
-                                )}
-                            </TouchableOpacity>
-                        );
-                    })
+                    filteredFaqs.map((faq, idx) => (
+                        <TouchableOpacity
+                            key={idx}
+                            style={[styles.card, { backgroundColor: themeStyles.cardColor }]}
+                            onPress={() => handleToggle(idx)}
+                            activeOpacity={0.7}
+                        >
+                            <View style={styles.questionRow}>
+                                <Text style={[styles.question, { color: themeStyles.textColor }]}>
+                                    {faq.q}
+                                </Text>
+                                <Ionicons
+                                    name={expanded === idx ? 'chevron-up' : 'chevron-down'}
+                                    size={20}
+                                    color={themeStyles.primaryColor}
+                                />
+                            </View>
+                            {expanded === idx && (
+                                <Text style={[styles.answer, { color: themeStyles.textColor }]}>
+                                    {faq.a}
+                                </Text>
+                            )}
+                        </TouchableOpacity>
+                    ))
                 )}
-                <Text style={[styles.paragraph, { color: themeStyles.textColor, marginTop: 32, textAlign: 'center' }]}>Still have questions? Contact support!</Text>
             </ScrollView>
         </View>
     );
@@ -146,7 +160,7 @@ const styles = StyleSheet.create({
         fontSize: 16,
         height: 44,
     },
-    contentContainer: { padding: 24, paddingBottom: 40 },
+    contentContainer: { padding: 24, paddingTop: 20, paddingBottom: 40 },
     card: {
         borderRadius: 18,
         padding: 20,
@@ -159,11 +173,13 @@ const styles = StyleSheet.create({
     questionRow: {
         flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'space-between',
         marginBottom: 8,
     },
     question: {
         fontSize: 17,
         fontWeight: 'bold',
+        flex: 1,
     },
     answer: {
         fontSize: 16,

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

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity
 import { BaseScreenProps } from '../../navigation/types';
 import { useOxy } from '../../context/OxyContext';
 import Avatar from '../../components/Avatar';
+import { Header } from '../../components';
 
 const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
     const { oxyServices } = useOxy();
@@ -26,7 +27,13 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <Text style={[styles.title, { color: textColor }]}>Karma Leaderboard</Text>
+            <Header
+                title="Karma Leaderboard"
+                subtitle="Top contributors in the community"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             {isLoading ? (
                 <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
             ) : error ? (
@@ -58,8 +65,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
 
 const styles = StyleSheet.create({
     container: { flex: 1 },
-    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
-    listContainer: { paddingBottom: 40 },
+    listContainer: { paddingBottom: 40, paddingTop: 20 },
     row: {
         flexDirection: 'row',
         alignItems: 'center',

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
 import { BaseScreenProps } from '../../navigation/types';
+import { Header } from '../../components';
 
 const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const isDarkTheme = theme === 'dark';
@@ -11,7 +12,13 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     // Placeholder: In a real app, fetch rewards from API
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <Text style={[styles.title, { color: textColor }]}>Karma Rewards</Text>
+            <Header
+                title="Karma Rewards"
+                subtitle="Unlock special features and recognition"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             <ScrollView contentContainerStyle={styles.contentContainer}>
                 <Text style={[styles.paragraph, { color: textColor }]}>Unlock special features and recognition by earning karma!</Text>
                 <View style={styles.rewardBox}>
@@ -34,8 +41,7 @@ const KarmaRewardsScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
 const styles = StyleSheet.create({
     container: { flex: 1 },
-    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
-    contentContainer: { padding: 24 },
+    contentContainer: { padding: 24, paddingTop: 20 },
     rewardBox: {
         backgroundColor: '#f7eaff',
         borderRadius: 16,

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
 import { BaseScreenProps } from '../../navigation/types';
 import { useOxy } from '../../context/OxyContext';
+import { Header } from '../../components';
 
 const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { oxyServices } = useOxy();
@@ -25,7 +26,13 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <Text style={[styles.title, { color: textColor }]}>Karma Rules</Text>
+            <Header
+                title="Karma Rules"
+                subtitle="How to earn karma points"
+                theme={theme}
+                onBack={goBack}
+                elevation="subtle"
+            />
             {isLoading ? (
                 <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
             ) : error ? (
@@ -49,8 +56,7 @@ const KarmaRulesScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
 const styles = StyleSheet.create({
     container: { flex: 1 },
-    title: { fontSize: 24, fontWeight: 'bold', margin: 24, textAlign: 'center' },
-    listContainer: { paddingBottom: 40 },
+    listContainer: { paddingBottom: 40, paddingTop: 20 },
     ruleRow: {
         paddingVertical: 14,
         paddingHorizontal: 24,

package/src/ui/stores/authStore.ts

@@ -6,24 +6,39 @@ interface AuthState {
   isAuthenticated: boolean;
   isLoading: boolean;
   error: string | null;
+  lastUserFetch: number | null; // Timestamp of last user fetch for caching
   loginStart: () => void;
   loginSuccess: (user: User) => void;
   loginFailure: (error: string) => void;
   logout: () => void;
-  fetchUser: (oxyServices: any) => Promise<void>;
+  fetchUser: (oxyServices: any, forceRefresh?: boolean) => Promise<void>;
   updateUser: (updates: Partial<User>, oxyServices: any) => Promise<void>;
+  setUser: (user: User) => void; // Direct user setter for caching
 }
 
-export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>) => void) => ({
+export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>) => void, get: () => AuthState) => ({
   user: null,
   isAuthenticated: false,
   isLoading: false,
   error: null,
+  lastUserFetch: null,
   loginStart: () => set({ isLoading: true, error: null }),
-  loginSuccess: (user: User) => set({ isLoading: false, isAuthenticated: true, user }),
+  loginSuccess: (user: User) => set({ isLoading: false, isAuthenticated: true, user, lastUserFetch: Date.now() }),
   loginFailure: (error: string) => set({ isLoading: false, error }),
-  logout: () => set({ user: null, isAuthenticated: false }),
-  fetchUser: async (oxyServices) => {
+  logout: () => set({ user: null, isAuthenticated: false, lastUserFetch: null }),
+  setUser: (user: User) => set({ user, lastUserFetch: Date.now() }),
+  fetchUser: async (oxyServices, forceRefresh = false) => {
+    const state = get();
+    const now = Date.now();
+    const cacheAge = state.lastUserFetch ? now - state.lastUserFetch : Infinity;
+    const cacheValid = cacheAge < 5 * 60 * 1000; // 5 minutes cache
+
+    // Use cached data if available and not forcing refresh
+    if (!forceRefresh && state.user && cacheValid) {
+      console.log('AuthStore: Using cached user data (age:', cacheAge, 'ms)');
+      return;
+    }
+
     set({ isLoading: true, error: null });
     try {
       console.log('AuthStore: Fetching user data...');
@@ -34,7 +49,7 @@ export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>)
         userLinks: user?.links,
         userWebsite: user?.website
       });
-      set({ user, isLoading: false, isAuthenticated: true });
+      set({ user, isLoading: false, isAuthenticated: true, lastUserFetch: now });
     } catch (error: any) {
       console.error('AuthStore: Error fetching user:', error);
       set({ error: error.message || 'Failed to fetch user', isLoading: false });
@@ -47,7 +62,7 @@ export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>)
       await oxyServices.updateProfile(updates);
       console.log('AuthStore: Profile updated successfully');
       // Immediately fetch the latest user data after update
-      await useAuthStore.getState().fetchUser(oxyServices);
+      await useAuthStore.getState().fetchUser(oxyServices, true); // Force refresh
       console.log('AuthStore: User data refreshed');
     } catch (error: any) {
       console.error('AuthStore: Error updating user:', error);

package/src/ui/stores/followStore.ts

@@ -6,11 +6,21 @@ interface FollowState {
   loadingUsers: Record<string, boolean>;
   fetchingUsers: Record<string, boolean>;
   errors: Record<string, string | null>;
+  // Follower counts for each user
+  followerCounts: Record<string, number>;
+  followingCounts: Record<string, number>;
+  // Loading states for counts
+  loadingCounts: Record<string, boolean>;
   setFollowingStatus: (userId: string, isFollowing: boolean) => void;
   clearFollowError: (userId: string) => void;
   resetFollowState: () => void;
   fetchFollowStatus: (userId: string, oxyServices: OxyServices) => Promise<void>;
   toggleFollowUser: (userId: string, oxyServices: OxyServices, isCurrentlyFollowing: boolean) => Promise<void>;
+  // New methods for follower counts
+  setFollowerCount: (userId: string, count: number) => void;
+  setFollowingCount: (userId: string, count: number) => void;
+  updateCountsFromFollowAction: (targetUserId: string, action: 'follow' | 'unfollow', counts: { followers: number; following: number }, currentUserId?: string) => void;
+  fetchUserCounts: (userId: string, oxyServices: OxyServices) => Promise<void>;
 }
 
 export const useFollowStore = create<FollowState>((set: any, get: any) => ({
@@ -18,6 +28,9 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
   loadingUsers: {},
   fetchingUsers: {},
   errors: {},
+  followerCounts: {},
+  followingCounts: {},
+  loadingCounts: {},
   setFollowingStatus: (userId: string, isFollowing: boolean) => set((state: FollowState) => ({
     followingUsers: { ...state.followingUsers, [userId]: isFollowing },
     errors: { ...state.errors, [userId]: null },
@@ -30,6 +43,9 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
     loadingUsers: {},
     fetchingUsers: {},
     errors: {},
+    followerCounts: {},
+    followingCounts: {},
+    loadingCounts: {},
   }),
   fetchFollowStatus: async (userId: string, oxyServices: OxyServices) => {
     set((state: FollowState) => ({
@@ -56,7 +72,7 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
       errors: { ...state.errors, [userId]: null },
     }));
     try {
-      let response;
+      let response: any;
       let newFollowState;
       if (isCurrentlyFollowing) {
         response = await oxyServices.unfollowUser(userId);
@@ -65,11 +81,44 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
         response = await oxyServices.followUser(userId);
         newFollowState = true;
       }
+      
+      // Update follow status
       set((state: FollowState) => ({
         followingUsers: { ...state.followingUsers, [userId]: newFollowState },
         loadingUsers: { ...state.loadingUsers, [userId]: false },
         errors: { ...state.errors, [userId]: null },
       }));
+
+      // Update counts if the response includes them
+      // The API returns counts for both users:
+      // - followers: target user's follower count (the user being followed)
+      // - following: current user's following count (the user doing the following)
+      if (response && response.counts) {
+        const { counts } = response;
+        
+        // Get current user ID from oxyServices
+        const currentUserId = oxyServices.getCurrentUserId();
+        
+        set((state: FollowState) => {
+          const updates: any = {};
+          
+          // Update target user's follower count (the user being followed)
+          updates.followerCounts = { 
+            ...state.followerCounts, 
+            [userId]: counts.followers 
+          };
+          
+          // Update current user's following count (the user doing the following)
+          if (currentUserId) {
+            updates.followingCounts = { 
+              ...state.followingCounts, 
+              [currentUserId]: counts.following 
+            };
+          }
+          
+          return updates;
+        });
+      }
     } catch (error: any) {
       set((state: FollowState) => ({
         loadingUsers: { ...state.loadingUsers, [userId]: false },
@@ -77,4 +126,56 @@ export const useFollowStore = create<FollowState>((set: any, get: any) => ({
       }));
     }
   },
+  setFollowerCount: (userId: string, count: number) => set((state: FollowState) => ({
+    followerCounts: { ...state.followerCounts, [userId]: count },
+  })),
+  setFollowingCount: (userId: string, count: number) => set((state: FollowState) => ({
+    followingCounts: { ...state.followingCounts, [userId]: count },
+  })),
+  updateCountsFromFollowAction: (targetUserId: string, action: 'follow' | 'unfollow', counts: { followers: number; following: number }, currentUserId?: string) => {
+    set((state: FollowState) => {
+      const updates: any = {};
+      
+      // Update target user's follower count (the user being followed)
+      updates.followerCounts = { 
+        ...state.followerCounts, 
+        [targetUserId]: counts.followers 
+      };
+      
+      // Update current user's following count (the user doing the following)
+      if (currentUserId) {
+        updates.followingCounts = { 
+          ...state.followingCounts, 
+          [currentUserId]: counts.following 
+        };
+      }
+      
+      return updates;
+    });
+  },
+  fetchUserCounts: async (userId: string, oxyServices: OxyServices) => {
+    set((state: FollowState) => ({
+      loadingCounts: { ...state.loadingCounts, [userId]: true },
+    }));
+    try {
+      const user = await oxyServices.getUserById(userId);
+      if (user && user._count) {
+        set((state: FollowState) => ({
+          followerCounts: { 
+            ...state.followerCounts, 
+            [userId]: user._count.followers || 0 
+          },
+          followingCounts: { 
+            ...state.followingCounts, 
+            [userId]: user._count.following || 0 
+          },
+          loadingCounts: { ...state.loadingCounts, [userId]: false },
+        }));
+      }
+    } catch (error: any) {
+      set((state: FollowState) => ({
+        loadingCounts: { ...state.loadingCounts, [userId]: false },
+      }));
+    }
+  },
 }));