Add stale data handling in Programs component

- Enhanced the getPrograms function to return a stale flag indicating if cached data is being used.
- Implemented a warning message in the Programs component to inform users when stale data is displayed.
- Updated styles for the warning message to improve visibility.

app/(tabs)/programs.tsx

@@ -27,12 +27,14 @@ export default function Programs() {
   const [activities, setActivities] = useState<ProgramActivities>({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isStale, setIsStale] = useState(false);
 
   useEffect(() => {
     const fetchPrograms = async () => {
       try {
-        const data = await getPrograms();
+        const { activities: data, isStale } = await getPrograms();
         setActivities(data);
+        setIsStale(isStale);
         if (Object.keys(data).length > 0) {
           const today = new Date();
           const day = String(today.getDate()).padStart(2, '0');
@@ -80,6 +82,12 @@ export default function Programs() {
         <Text style={[styles.title, { color: Colors[colorScheme].text }]}>Umrah Pilgrimage</Text>
       </View>
 
+      {isStale && (
+        <View style={styles.warningContainer}>
+          <Text style={styles.warningText}>Failed to fetch latest data. Showing cached activities.</Text>
+        </View>
+      )}
+
       <View>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.daysScroll}>
           {dayKeys.map((day) => (
@@ -136,6 +144,15 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 20,
   },
+  warningContainer: {
+    backgroundColor: 'orange',
+    padding: 10,
+    alignItems: 'center',
+  },
+  warningText: {
+    color: 'white',
+    textAlign: 'center',
+  },
   title: {
     fontSize: 24,
     fontWeight: 'bold',

utils/programs.ts

@@ -1,5 +1,6 @@
 
 import { FontAwesome, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export type ProgramActivity = {
   time: string;
@@ -14,18 +15,29 @@ export type ProgramActivities = {
   [date: string]: ProgramActivity[];
 };
 
-const PROGRAMS_URL = 'http://kepilhyzmat.com/assets/programs.json';
+export type ProgramData = {
+  activities: ProgramActivities;
+  isStale: boolean;
+};
 
-export const getPrograms = async (): Promise<ProgramActivities> => {
+const PROGRAMS_URL = 'http://kepilhyzmat.com/assets/programs.json';
+const PROGRAMS_CACHE_KEY = 'program_activities_cache';
+
+export const getPrograms = async (): Promise<ProgramData> => {
   try {
     const response = await fetch(PROGRAMS_URL);
     if (!response.ok) {
       throw new Error(`Request failed with status ${response.status}`);
     }
     const data: ProgramActivities = await response.json();
-    return data;
+    await AsyncStorage.setItem(PROGRAMS_CACHE_KEY, JSON.stringify(data));
+    return { activities: data, isStale: false };
   } catch (error) {
     console.error('Failed to fetch programs:', error);
-    throw error;
+    const cachedData = await AsyncStorage.getItem(PROGRAMS_CACHE_KEY);
+    if (cachedData) {
+      return { activities: JSON.parse(cachedData), isStale: true };
+    }
+    throw new Error('Failed to fetch programs and no cache available.');
   }
 };