api call optimized

apps/mobile/src/components/ActivityWidget.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import {
   View,
   Text,
@@ -8,10 +8,8 @@ import {
 } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { Ionicons } from "@expo/vector-icons";
-import { useUser } from "@clerk/clerk-expo";
 import { theme } from "../styles/theme";
-import { getUserStatistics } from "../api/statistics";
-import type { UserStatisticsResponse } from "../api/types";
+import { useStatistics } from "../contexts/StatisticsContext";
 
 const { width } = Dimensions.get("window");
 
@@ -26,28 +24,11 @@ export function ActivityWidget({
   calories,
   duration = 0,
 }: ActivityWidgetProps) {
-  const { user } = useUser();
-  const [statistics, setStatistics] = useState<UserStatisticsResponse | null>(
-    null,
-  );
-  const [loading, setLoading] = useState(true);
+  const { statistics, loading, refetchStatistics } = useStatistics();
 
   useEffect(() => {
-    const loadStatistics = async () => {
-      if (!user?.id) return;
-
-      try {
-        const stats = await getUserStatistics(user.id);
-        setStatistics(stats);
-      } catch (error) {
-        console.error("Failed to load statistics:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadStatistics();
-  }, [user?.id]);
+    refetchStatistics();
+  }, [refetchStatistics]);
 
   // Calculate weekly activity bars from weekly trend data
   const getWeeklyBars = () => {

apps/mobile/src/components/WeeklyProgressWidget.tsx

@@ -3,33 +3,24 @@ import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { Ionicons } from "@expo/vector-icons";
 import { theme } from "../styles/theme";
-import { useUser } from "@clerk/clerk-expo";
-import { getUserStatistics } from "../api/statistics";
+import { useStatistics } from "../contexts/StatisticsContext";
 import type { WeeklyTrendData } from "../api/types";
 
 export function WeeklyProgressWidget() {
-  const { user } = useUser();
+  const { statistics, loading, refetchStatistics } = useStatistics();
   const [weeklyData, setWeeklyData] = useState<WeeklyTrendData[]>([]);
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const loadWeeklyData = async () => {
-      if (!user?.id) return;
+    refetchStatistics();
+  }, [refetchStatistics]);
 
-      try {
-        const stats = await getUserStatistics(user.id);
-        // Get last 4 weeks for compact display
-        const last4Weeks = stats.weeklyTrend.slice(-4);
-        setWeeklyData(last4Weeks);
-      } catch (error) {
-        console.error("Failed to load weekly data:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadWeeklyData();
-  }, [user?.id]);
+  useEffect(() => {
+    if (statistics?.weeklyTrend) {
+      // Get last 4 weeks for compact display
+      const last4Weeks = statistics.weeklyTrend.slice(-4);
+      setWeeklyData(last4Weeks);
+    }
+  }, [statistics]);
 
   if (loading) {
     return (