apps/mobile/src/contexts/StatisticsContext.tsx

@@ -4,7 +4,6 @@ import React, {
   useState,
   useCallback,
   useEffect,
-  useRef,
 } from "react";
 import { useUser, useAuth } from "@clerk/clerk-expo";
 import { getUserStatistics } from "../api/statistics";
@@ -37,9 +36,6 @@ export function StatisticsProvider({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const [lastFetchTime, setLastFetchTime] = useState<number>(0);
-  const statisticsRef = useRef<UserStatisticsResponse | null>(null);
-  const lastFetchTimeRef = useRef<number>(0);
-  const fetchInProgressRef = useRef(false);
 
   // Cache statistics for 30 seconds to avoid duplicate calls
   const CACHE_DURATION = 30000; // 30 seconds
@@ -47,49 +43,48 @@ export function StatisticsProvider({
   const refetchStatistics = useCallback(async () => {
     if (!user?.id) return;
 
-    if (fetchInProgressRef.current) {
-      return;
-    }
-
     // Check if we have recent cached data
     const now = Date.now();
-    if (
+    if (statistics && now - lastFetchTime < CACHE_DURATION) {
-      statisticsRef.current &&
+      log.debug("Using cached statistics", {
-      now - lastFetchTimeRef.current < CACHE_DURATION
+        age: now - lastFetchTime,
-    ) {
+        cacheRemaining: CACHE_DURATION - (now - lastFetchTime),
+      });
       return;
     }
 
     try {
-      fetchInProgressRef.current = true;
       setLoading(true);
       setError(null);
+      log.debug("Fetching fresh statistics", { userId: user.id });
 
       const token = await getToken();
       const stats = await getUserStatistics(user.id, token);
 
       setStatistics(stats);
-      statisticsRef.current = stats;
       setLastFetchTime(now);
-      lastFetchTimeRef.current = now;
+      log.debug("Statistics fetched and cached", {
+        userId: user.id,
+        hasWeeklyTrend: !!stats.weeklyTrend,
+        weeklyTrendLength: stats.weeklyTrend?.length || 0,
+        weeklyTrendSample: stats.weeklyTrend?.[0],
+        stats,
+      });
     } catch (err) {
       const error = err instanceof Error ? err : new Error(String(err));
       log.error("Failed to fetch statistics", error);
       setError(error);
     } finally {
       setLoading(false);
-      fetchInProgressRef.current = false;
     }
-  }, [user?.id, getToken]);
+  }, [user?.id, getToken, statistics, lastFetchTime]);
 
   const clearCache = useCallback(() => {
     setStatistics(null);
-    statisticsRef.current = null;
     setLoading(false);
     setLastFetchTime(0);
-    lastFetchTimeRef.current = 0;
     setError(null);
-    fetchInProgressRef.current = false;
+    log.debug("Statistics cache cleared");
   }, []);
 
   useEffect(() => {
@@ -105,25 +100,28 @@ export function StatisticsProvider({
     if (!user?.id) return;
 
     try {
-      fetchInProgressRef.current = true;
       setLoading(true);
       setError(null);
+      log.debug("Force fetching statistics", { userId: user.id });
 
       const token = await getToken();
       const stats = await getUserStatistics(user.id, token);
 
       setStatistics(stats);
-      statisticsRef.current = stats;
+      setLastFetchTime(Date.now());
-      const now = Date.now();
+      log.debug("Statistics force fetched and cached", {
-      setLastFetchTime(now);
+        userId: user.id,
-      lastFetchTimeRef.current = now;
+        hasWeeklyTrend: !!stats.weeklyTrend,
+        weeklyTrendLength: stats.weeklyTrend?.length || 0,
+        weeklyTrendSample: stats.weeklyTrend?.[0],
+        stats,
+      });
     } catch (err) {
       const error = err instanceof Error ? err : new Error(String(err));
       log.error("Failed to force fetch statistics", error);
       setError(error);
     } finally {
       setLoading(false);
-      fetchInProgressRef.current = false;
     }
   }, [user?.id, getToken]);