Implement program fetching and loading state in Programs component

- Added asynchronous fetching of program activities using getPrograms.
- Introduced loading and error states to enhance user experience.
- Refactored activity rendering to handle dynamic data and improved icon rendering logic.

app/(tabs)/programs.tsx

@@ -1,60 +1,79 @@
 import { useState } from 'react';
-import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity, ScrollView, ActivityIndicator } from 'react-native';
 import Colors from '@/constants/Colors';
 import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getPrograms, ProgramActivities, ProgramActivity } from '@/utils/programs';
+import { useEffect } from 'react';
 
-type Activity = {
+const Icon = ({ iconSet, iconName }: { iconSet: ProgramActivity['iconSet']; iconName: ProgramActivity['iconName'] }) => {
-  time: string;
+  const color = "black";
-  title: string;
+  const size = 24;
-  description: string;
-  icon: React.ReactNode;
-  transport?: string;
-};
 
-type Activities = {
+  switch (iconSet) {
-  [key: string]: Activity[];
+    case 'FontAwesome':
+      return <FontAwesome name={iconName as any} size={size} color={color} />;
+    case 'FontAwesome5':
+      return <FontAwesome5 name={iconName as any} size={size} color={color} />;
+    default:
+      return null;
+  }
 };
 
 export default function Programs() {
   const colorScheme = 'dark';
-  const [activeDay, setActiveDay] = useState('Day 1');
+  const [activeDay, setActiveDay] = useState<string | null>(null);
   const insets = useSafeAreaInsets();
+  const [activities, setActivities] = useState<ProgramActivities>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const activities: Activities = {
+  useEffect(() => {
-    'Day 1': [
+    const fetchPrograms = async () => {
-      {
+      try {
-        time: '16:30 - 19:15',
+        const data = await getPrograms();
-        title: 'Depart for Mecca',
+        setActivities(data);
-        description: 'From your location to Mecca',
+        if (Object.keys(data).length > 0) {
-        icon: <FontAwesome name="plane" size={24} color="black" />,
+          const today = new Date();
-        transport: 'Transport to hotel',
+          const day = String(today.getDate()).padStart(2, '0');
-      },
+          const month = String(today.getMonth() + 1).padStart(2, '0');
-      {
+          const year = today.getFullYear();
-        time: '21:00 - 23:00',
+          const formattedDate = `${day}.${month}.${year}`;
-        title: 'Dinner at Al-Baik',
+
-        description: 'Masjid al-',
+          if (data[formattedDate]) {
-        icon: <FontAwesome name="cutlery" size={24} color="black" />,
+            setActiveDay(formattedDate);
-      },
+          } else {
-      {
+            setActiveDay(Object.keys(data)[0]);
-        time: '00:00 - 04:00',
+          }
-        title: 'Tawaf',
+        }
-        description: 'Kaaba',
+      } catch (e) {
-        icon: <FontAwesome5 name="kaaba" size={24} color="black" />,
+        setError('Failed to load program activities.');
-      },
+      } finally {
-    ],
+        setLoading(false);
-    'Day 2': [
+      }
-      {
-        time: '10:00 - 12:00',
-        title: 'Shopping',
-        description: 'Zamzam Tower',
-        icon: <FontAwesome name="shopping-bag" size={24} color="black" />,
-      },
-    ],
-    'Day 3': [],
-    'Day 4': [],
     };
 
+    fetchPrograms();
+  }, []);
+
+  const dayKeys = Object.keys(activities);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, styles.center]}>
+        <ActivityIndicator size="large" color={Colors[colorScheme].text} />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={[styles.container, styles.center]}>
+        <Text style={{ color: Colors[colorScheme].text }}>{error}</Text>
+      </View>
+    );
+  }
+
   return (
     <View style={[styles.container, { backgroundColor: Colors[colorScheme].background, paddingTop: insets.top }]}>
       <View style={styles.header}>
@@ -63,7 +82,7 @@ export default function Programs() {
 
       <View>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.daysScroll}>
-          {Object.keys(activities).map((day) => (
+          {dayKeys.map((day) => (
             <TouchableOpacity
               key={day}
               style={[styles.dayButton, activeDay === day && styles.activeDayButton]}
@@ -76,7 +95,8 @@ export default function Programs() {
       </View>
 
       <ScrollView style={styles.content}>
-        {activities[activeDay].map((activity, index) => (
+        {activeDay &&
+          activities[activeDay]?.map((activity, index) => (
             <View key={index}>
               <View style={styles.activityCard}>
                 <View style={styles.timeContainer}>
@@ -84,7 +104,9 @@ export default function Programs() {
                   <Text style={styles.activityTitle}>{activity.title}</Text>
                   <Text style={styles.activityDescription}>{activity.description}</Text>
                 </View>
-              <View style={styles.iconContainer}>{activity.icon}</View>
+                <View style={styles.iconContainer}>
+                  <Icon iconSet={activity.iconSet} iconName={activity.iconName} />
+                </View>
               </View>
               {activity.transport && (
                 <View style={styles.transportContainer}>
@@ -105,6 +127,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   header: {
     alignItems: 'center',
     paddingVertical: 10,

utils/programs.ts

@@ -0,0 +1,31 @@
+
+import { FontAwesome, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
+
+export type ProgramActivity = {
+  time: string;
+  title: string;
+  description: string;
+  iconSet: 'FontAwesome' | 'FontAwesome5' | 'MaterialCommunityIcons';
+  iconName: React.ComponentProps<typeof FontAwesome>['name'] | React.ComponentProps<typeof FontAwesome5>['name'] | React.ComponentProps<typeof MaterialCommunityIcons>['name'];
+  transport?: string;
+};
+
+export type ProgramActivities = {
+  [date: string]: ProgramActivity[];
+};
+
+const PROGRAMS_URL = 'http://kepilhyzmat.com/assets/programs.json';
+
+export const getPrograms = async (): Promise<ProgramActivities> => {
+  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;
+  } catch (error) {
+    console.error('Failed to fetch programs:', error);
+    throw error;
+  }
+};