fixed auto updating and displaying logic

Author: sierrawelsch

frontend/app/(tabs)/profile.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   View,
   Text,

frontend/app/(tabs)/rank.tsx

@@ -16,6 +16,7 @@ import { volunteerService } from '@/services/volunteerService';
 import { useVolunteerProfileImage } from '@/hooks/useVolunteerProfileImage';
 import { useAuth } from '@/context/AuthContext';
 import { Volunteer } from '@/types/api/volunteer';
+import { useProfile } from '@/hooks/useProfile';
 
 interface LeaderboardEntry {
   rank: number;
@@ -26,26 +27,6 @@ interface LeaderboardEntry {
   volunteer: Volunteer;
 }
 
-// Calculate level from experience (same logic as useProfile)
-function calculateLevel(experience: number): number {
-  if (experience < 100) return 1;
-
-  let level = 1;
-  let totalXPNeeded = 0;
-
-  while (totalXPNeeded <= experience) {
-    const xpForNextLevel = level * 100 + (level - 1) * 50;
-    totalXPNeeded += xpForNextLevel;
-    if (totalXPNeeded <= experience) {
-      level++;
-    } else {
-      break;
-    }
-  }
-
-  return level;
-}
-
 function getVolunteerName(volunteer: Volunteer): string {
   if (volunteer.preferredName) {
     return volunteer.preferredName;
@@ -127,6 +108,7 @@ function Avatar({ volunteerId, size }: AvatarProps) {
 export default function LeaderboardScreen() {
   const { user } = useAuth();
   const router = useRouter();
+  const profile = useProfile();
   const [leaderboardData, setLeaderboardData] = useState<LeaderboardEntry[]>(
     []
   );
@@ -160,8 +142,7 @@ export default function LeaderboardScreen() {
             rank: index + 1,
             name: getVolunteerName(volunteer),
             experience: volunteer.experience,
-            level:
-              volunteer.currentLevel ?? calculateLevel(volunteer.experience),
+            level: volunteer.currentLevel,
             isCurrentUser: volunteerData?.id === volunteer.id,
             volunteer,
           })
@@ -177,7 +158,7 @@ export default function LeaderboardScreen() {
     };
 
     fetchLeaderboard();
-  }, [user?.entityId]);
+  }, [user?.entityId, profile.volunteer?.experience]);
 
   if (loading) {
     return (

frontend/app/(tabs)/shop.tsx

@@ -15,11 +15,14 @@ import { Fonts } from '@/constants/Fonts';
 import { Colors } from '@/constants/Colors';
 import { useRouter } from 'expo-router';
 import { useAuth } from '@/context/AuthContext';
+import { useProfile } from '@/hooks/useProfile';
 import { itemService } from '@/services/itemService';
+import { volunteerService } from '@/services/volunteerService';
 import { LoadingScreen } from '@/components/LoadingScreen';
 import SearchInputWithFilter from '@/components/SearchInputWithFilter';
 import ItemFilterDrawer from '@/components/drawers/ItemFilterDrawer';
 import { ShopItem } from '@/types/api/item';
+import { Volunteer } from '@/types/api/volunteer';
 
 export interface ItemFilters {
   priceRange: { min: number; max: number };
@@ -32,13 +35,17 @@ export default function StoreScreen() {
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const profile = useProfile();
   const [filters, setFilters] = useState<ItemFilters>({
     priceRange: { min: 0, max: 10000 },
     category: '',
   });
+  const [currentVolunteer, setCurrentVolunteer] = useState<Volunteer | null>(
+    null
+  );
 
   const router = useRouter();
-  const { volunteer, token } = useAuth();
+  const { user, token } = useAuth();
 
   const loadItems = useCallback(async () => {
     try {
@@ -71,8 +78,22 @@ export default function StoreScreen() {
   }, [token]);
 
   useEffect(() => {
-    loadItems();
-  }, [loadItems]);
+    // Fetch current volunteer if user is available (same approach as profile page)
+    const fetchVolunteer = async () => {
+      let volunteerData: Volunteer | null = null;
+      if (user?.entityId) {
+        try {
+          volunteerData = await volunteerService.getSelf();
+          setCurrentVolunteer(volunteerData);
+        } catch (err) {
+          console.error('Error fetching current volunteer:', err);
+        }
+      }
+
+      await loadItems();
+    };
+    fetchVolunteer();
+  }, [loadItems, profile.volunteer?.experience]);
 
   const filteredItems = useMemo(() => {
     return items.filter(item => {
@@ -113,6 +134,12 @@ export default function StoreScreen() {
     }
   }, [loadItems]);
 
+  // useFocusEffect(
+  //   useCallback(() => {
+  //     refreshProfile();  // pulls latest XP, coins, level
+  //   }, [])
+  // );
+
   if (loading) {
     return <LoadingScreen text="Loading items..." />;
   }
@@ -156,7 +183,7 @@ export default function StoreScreen() {
                   fontFamily: Fonts.medium_500,
                 }}
               >
-                Level {volunteer?.currentLevel ?? 0}
+                Level {currentVolunteer?.currentLevel ?? 0}
               </ThemedText>
 
               <ThemedText
@@ -167,7 +194,7 @@ export default function StoreScreen() {
                   fontFamily: Fonts.medium_500,
                 }}
               >
-                {volunteer?.coins ?? 0} coins
+                {currentVolunteer?.coins ?? 0} coins
               </ThemedText>
 
               <TouchableOpacity

frontend/hooks/useProfile.ts

@@ -7,7 +7,7 @@ import { Event } from '@/types/api/event';
 import { Volunteer } from '@/types/api/volunteer';
 import { useCurrentVolunteer } from '@/hooks/useCurrentVolunteer';
 
-// TODO: abstrac to backend asw
+// TODO: abstract to backend asw
 function calculateTotalHours(completedEvents: Event[]): number {
   return completedEvents.reduce((sum, event) => {
     const start = new Date(event.startDateTime);