Refactor HomeScreen activity state and update UI labels

- Changed state management for next day's activity to use 'dayLabel' instead of 'dateStr'. - Updated logic to determine the day label for next day's activity. - Modified badge text in HomeScreen to reflect the new label and improved localization for today's activity.
Update activity rendering and styles in Programs component
2025-09-20 14:24:33 +05:00 · 2025-09-20 14:09:33 +05:00 · 2025-09-20 13:42:06 +05:00 · 2025-09-20 13:39:40 +05:00 · 2025-09-20 13:23:55 +05:00 · 2025-09-20 13:21:20 +05:00
7 changed files with 326 additions and 114 deletions
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -4,6 +4,7 @@ import { useColorScheme, View } from 'react-native';

 import Colors from '@/constants/Colors';
 import i18n from '@/i18n';
+import { CityProvider } from '../../context/CityContext';

 /**
 * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
@@ -19,43 +20,45 @@ export default function TabLayout() {
  const colorScheme = 'dark'; // Force dark mode

  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme].tint,
-        tabBarStyle: {
-          backgroundColor: Colors[colorScheme].secondary,
-          borderTopColor: Colors[colorScheme].secondary,
-        },
-        headerShown: false, // hide header globally for tabs
-      }}>
-      <Tabs.Screen
-        name="home"
-        options={{
-          title: i18n.t('home'),
-          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="services"
-        options={{
-          title: i18n.t('services'),
-          tabBarIcon: ({ color }) => <TabBarIcon name="th-large" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: i18n.t('menuSalah'),
-          tabBarIcon: ({ color }) => <TabBarIcon name="moon-o" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="programs"
-        options={{
-          title: i18n.t('Programs'),
-          tabBarIcon: ({ color }) => <TabBarIcon name="calendar" color={color} />,
-        }}
-      />
-    </Tabs>
+    <CityProvider>
+      <Tabs
+        screenOptions={{
+          tabBarActiveTintColor: Colors[colorScheme].tint,
+          tabBarStyle: {
+            backgroundColor: Colors[colorScheme].secondary,
+            borderTopColor: Colors[colorScheme].secondary,
+          },
+          headerShown: false, // hide header globally for tabs
+        }}>
+        <Tabs.Screen
+          name="home"
+          options={{
+            title: i18n.t('home'),
+            tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="services"
+          options={{
+            title: i18n.t('services'),
+            tabBarIcon: ({ color }) => <TabBarIcon name="th-large" color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: i18n.t('menuSalah'),
+            tabBarIcon: ({ color }) => <TabBarIcon name="moon-o" color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="programs"
+          options={{
+            title: i18n.t('Programs'),
+            tabBarIcon: ({ color }) => <TabBarIcon name="calendar" color={color} />,
+          }}
+        />
+      </Tabs>
+    </CityProvider>
  );
 }
--- a/app/(tabs)/home.tsx
+++ b/app/(tabs)/home.tsx
@@ -7,12 +7,68 @@ import i18n from '@/i18n';
 import * as Updates from 'expo-updates';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Colors from '@/constants/Colors';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
+import { getPrograms, ProgramActivity } from '@/utils/programs';

 export default function HomeScreen() {
  const insets = useSafeAreaInsets();
+  const [todaysActivity, setTodaysActivity] = useState<ProgramActivity | null>(null);
+  const [nextDayActivity, setNextDayActivity] = useState<(ProgramActivity & { dayLabel: string }) | null>(null);
+
+  useEffect(() => {
+    const fetchAndSetActivities = async () => {
+      try {
+        const { activities } = await getPrograms();
+        const now = new Date();
+
+        const formatDate = (date: Date) => {
+          const day = String(date.getDate()).padStart(2, '0');
+          const month = String(date.getMonth() + 1).padStart(2, '0');
+          const year = date.getFullYear();
+          return `${day}.${month}.${year}`;
+        };
+
+        const todayStr = formatDate(now);
+        const todaysActivities = activities[todayStr] || [];
+
+        const nextActivity = todaysActivities.find((activity) => {
+          if (!activity.time) return false;
+          const [hours, minutes] = activity.time.split(':').map(Number);
+          const activityTime = new Date(now);
+          activityTime.setHours(hours, minutes, 0, 0);
+          return activityTime > now;
+        });
+
+        setTodaysActivity(nextActivity || todaysActivities[0] || null);
+
+        const sortedDates = Object.keys(activities).sort((a, b) => {
+          const dateA = new Date(a.split('.').reverse().join('-')).getTime();
+          const dateB = new Date(b.split('.').reverse().join('-')).getTime();
+          return dateA - dateB;
+        });
+
+        const todayDate = new Date(todayStr.split('.').reverse().join('-'));
+        const nextDateStr = sortedDates.find((dateStr) => {
+          const loopDate = new Date(dateStr.split('.').reverse().join('-'));
+          return loopDate > todayDate;
+        });
+
+        const tomorrow = new Date(now);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        const tomorrowStr = formatDate(tomorrow);
+
+        if (nextDateStr && activities[nextDateStr].length > 0) {
+          const dayLabel = nextDateStr === tomorrowStr ? 'Ertir' : nextDateStr;
+          setNextDayActivity({ ...activities[nextDateStr][0], dayLabel });
+        }
+      } catch (error) {
+        console.error('Failed to load activities for home screen:', error);
+      }
+    };
+
+    fetchAndSetActivities();
+  }, []);

  const changeLanguage = async (lang: 'en' | 'tk' | 'ru') => {
    if (!lang) return;
@@ -45,12 +101,23 @@ export default function HomeScreen() {

      <ScrollView>
        <View style={styles.innerContainer}>
-          {/* <FeatureCard
-            badgeText="Şu gün, 07:00"
-            title="Aýşe metjidi"
-            description="Oteldan ugraýar, 1-njy etazda garaşmaly"
-            image={require('@/assets/images/aisha.jpg')}
-          /> */}
+          {todaysActivity && (
+            <FeatureCard
+              badgeText={`Şu gün, ${todaysActivity.time}`}
+              title={todaysActivity.title}
+              description={todaysActivity.description}
+              image={require('@/assets/images/aisha.jpg')}
+            />
+          )}
+
+          {nextDayActivity && (
+            <FeatureCard
+              badgeText={`${nextDayActivity.dayLabel}, ${nextDayActivity.time}`}
+              title={nextDayActivity.title}
+              description={nextDayActivity.description}
+              image={require('@/assets/images/aisha.jpg')}
+            />
+          )}

          <PrayerTimeCard />

--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -5,6 +5,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getPrayerTimes, cities } from '../../utils/prayerTimeCalculator';
 import i18n from '../../i18n';
 import Colors from '../../constants/Colors';
+import { useCity } from '../../context/CityContext';

 type Prayer = {
  name: string;
@@ -16,7 +17,7 @@ type City = keyof typeof cities;
 export default function TabIndex() {
  const colorScheme = 'dark';
  const theme = Colors[colorScheme ?? 'light'];
-  const [selectedCity, setSelectedCity] = useState<City>('Makkah');
+  const { selectedCity, setSelectedCity } = useCity();
  const [prayerTimes, setPrayerTimes] = useState<Prayer[]>([]);
  const [nextPrayerName, setNextPrayerName] = useState<string | null>(null);
  const insets = useSafeAreaInsets();
--- a/app/(tabs)/programs.tsx
+++ b/app/(tabs)/programs.tsx
@@ -1,69 +1,96 @@
 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 = {
-  time: string;
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-  transport?: string;
-};
+const Icon = ({ iconSet, iconName }: { iconSet: ProgramActivity['iconSet']; iconName: ProgramActivity['iconName'] }) => {
+  const color = "black";
+  const size = 24;

-type Activities = {
-  [key: string]: Activity[];
+  switch (iconSet) {
+    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 [isStale, setIsStale] = useState(false);

-  const activities: Activities = {
-    'Day 1': [
-      {
-        time: '16:30 - 19:15',
-        title: 'Depart for Mecca',
-        description: 'From your location to Mecca',
-        icon: <FontAwesome name="plane" size={24} color="black" />,
-        transport: 'Transport to hotel',
-      },
-      {
-        time: '21:00 - 23:00',
-        title: 'Dinner at Al-Baik',
-        description: 'Masjid al-',
-        icon: <FontAwesome name="cutlery" size={24} color="black" />,
-      },
-      {
-        time: '00:00 - 04:00',
-        title: 'Tawaf',
-        description: 'Kaaba',
-        icon: <FontAwesome5 name="kaaba" size={24} color="black" />,
-      },
-    ],
-    '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': [],
-  };
+  useEffect(() => {
+    const fetchPrograms = async () => {
+      try {
+        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');
+          const month = String(today.getMonth() + 1).padStart(2, '0');
+          const year = today.getFullYear();
+          const formattedDate = `${day}.${month}.${year}`;
+
+          if (data[formattedDate]) {
+            setActiveDay(formattedDate);
+          } else {
+            setActiveDay(Object.keys(data)[0]);
+          }
+        }
+      } catch (e) {
+        setError('Failed to load program activities.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    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}>
-        <Text style={[styles.title, { color: Colors[colorScheme].text }]}>Umrah Pilgrimage</Text>
+        <Text style={[styles.title, { color: Colors[colorScheme].text }]}>Respisaniýa</Text>
      </View>

+      {isStale && (
+        <View style={styles.warningContainer}>
+          <Text style={styles.warningText}>Soňky maglumatlary almak başartmady. Saklanan çäreler görkezilýär.</Text>
+        </View>
+      )}
+
      <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,26 +103,29 @@ export default function Programs() {
      </View>

      <ScrollView style={styles.content}>
-        {activities[activeDay].map((activity, index) => (
-          <View key={index}>
-            <View style={styles.activityCard}>
-              <View style={styles.timeContainer}>
-                <Text style={styles.timeText}>{activity.time}</Text>
-                <Text style={styles.activityTitle}>{activity.title}</Text>
-                <Text style={styles.activityDescription}>{activity.description}</Text>
+        {activeDay &&
+          activities[activeDay]?.map((activity, index) => (
+            <View key={index}>
+              <View style={styles.activityCard}>
+                <View style={styles.timeContainer}>
+                  {activity.time && <Text style={styles.timeText}>{activity.time}</Text>}
+                  <Text style={styles.activityTitle}>{activity.title}</Text>
+                  <Text style={styles.activityDescription}>{activity.description}</Text>
+                </View>
+                <View style={styles.iconContainer}>
+                  <Icon iconSet={activity.iconSet} iconName={activity.iconName} />
+                </View>
              </View>
-              <View style={styles.iconContainer}>{activity.icon}</View>
+              {activity.transport && (
+                <View style={styles.transportContainer}>
+                  <View style={styles.dot} />
+                  <View style={styles.dot} />
+                  <View style={styles.dot} />
+                  <Text style={styles.transportText}>{activity.transport}</Text>
+                </View>
+              )}
            </View>
-            {activity.transport && (
-              <View style={styles.transportContainer}>
-                <View style={styles.dot} />
-                <View style={styles.dot} />
-                <View style={styles.dot} />
-                <Text style={styles.transportText}>{activity.transport}</Text>
-              </View>
-            )}
-          </View>
-        ))}
+          ))}
      </ScrollView>
    </View>
  );
@@ -105,11 +135,24 @@ const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
  header: {
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 20,
  },
+  warningContainer: {
+    backgroundColor: 'orange',
+    padding: 10,
+    alignItems: 'center',
+  },
+  warningText: {
+    color: 'white',
+    textAlign: 'center',
+  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
@@ -153,12 +196,13 @@ const styles = StyleSheet.create({
  timeText: {
    color: 'gray',
    fontSize: 14,
+    marginBottom: 4,
  },
  activityTitle: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
-    marginVertical: 4,
+    marginBottom: 4,
  },
  activityDescription: {
    color: 'gray',
--- a/components/PrayerTimeCard.tsx
+++ b/components/PrayerTimeCard.tsx
@@ -4,7 +4,7 @@ import Colors from '@/constants/Colors';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { getPrayerTimes, cities } from '@/utils/prayerTimeCalculator';
 import i18n from '@/i18n';
-import { createIconSetFromFontello } from 'react-native-vector-icons';
+import { useCity } from '../context/CityContext';

 type Prayer = {
  name: string;
@@ -25,7 +25,7 @@ export default function PrayerTimeCard() {
  const [prayerTimes, setPrayerTimes] = useState<Prayer[]>([]);
  const [nextPrayer, setNextPrayer] = useState<{ name: string; time: string } | null>(null);
  const [remainingTime, setRemainingTime] = useState('');
-  const [selectedCity, setSelectedCity] = useState<keyof typeof cities>('Makkah');
+  const { selectedCity, setSelectedCity } = useCity();

  useEffect(() => {
    const times = getPrayerTimes(selectedCity);
--- a/context/CityContext.tsx
+++ b/context/CityContext.tsx
@@ -0,0 +1,54 @@
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { cities } from '../utils/prayerTimeCalculator';
+
+type City = keyof typeof cities;
+
+interface CityContextType {
+  selectedCity: City;
+  setSelectedCity: (city: City) => void;
+}
+
+const CityContext = createContext<CityContextType | undefined>(undefined);
+
+export const CityProvider = ({ children }: { children: ReactNode }) => {
+  const [selectedCity, setSelectedCityState] = useState<City>('Makkah');
+
+  useEffect(() => {
+    const loadSelectedCity = async () => {
+      try {
+        const city = await AsyncStorage.getItem('selectedCity') as City;
+        if (city) {
+          setSelectedCityState(city);
+        }
+      } catch (error) {
+        console.error('Failed to load selected city:', error);
+      }
+    };
+
+    loadSelectedCity();
+  }, []);
+
+  const handleSetSelectedCity = async (city: City) => {
+    setSelectedCityState(city);
+    try {
+      await AsyncStorage.setItem('selectedCity', city);
+    } catch (error) {
+      console.error('Failed to save selected city:', error);
+    }
+  };
+
+  return (
+    <CityContext.Provider value={{ selectedCity, setSelectedCity: handleSetSelectedCity }}>
+      {children}
+    </CityContext.Provider>
+  );
+};
+
+export const useCity = () => {
+  const context = useContext(CityContext);
+  if (context === undefined) {
+    throw new Error('useCity must be used within a CityProvider');
+  }
+  return context;
+};
--- a/utils/programs.ts
+++ b/utils/programs.ts
@@ -0,0 +1,43 @@
+
+import { FontAwesome, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+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[];
+};
+
+export type ProgramData = {
+  activities: ProgramActivities;
+  isStale: boolean;
+};
+
+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();
+    await AsyncStorage.setItem(PROGRAMS_CACHE_KEY, JSON.stringify(data));
+    return { activities: data, isStale: false };
+  } catch (error) {
+    console.error('Failed to fetch programs:', 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.');
+  }
+};
Author	SHA1	Message	Date
Mekan1206	2c7884b9ff	Refactor HomeScreen activity state and update UI labels - Changed state management for next day's activity to use 'dayLabel' instead of 'dateStr'. - Updated logic to determine the day label for next day's activity. - Modified badge text in HomeScreen to reflect the new label and improved localization for today's activity.	2025-09-20 14:24:33 +05:00
Mekan1206	fa0465ee1a	Update activity rendering and styles in Programs component - Added conditional rendering for activity time to prevent displaying empty values. - Adjusted styles for time text and activity title to improve layout consistency.	2025-09-20 14:09:33 +05:00
Mekan1206	558698a058	Add next day activity fetching and display in HomeScreen - Introduced state management for next day's activity in HomeScreen. - Implemented logic to fetch and set the next day's activity based on sorted dates. - Updated the UI to conditionally render a FeatureCard for the next day's activity details.	2025-09-20 13:42:06 +05:00
Mekan1206	ae6ccd7f53	Implement activity fetching and display in HomeScreen - Added useEffect to fetch today's activities from the getPrograms function. - Introduced logic to determine the next activity based on current time. - Updated the HomeScreen to conditionally render the FeatureCard with today's activity details.	2025-09-20 13:39:40 +05:00
Mekan1206	a1871510a8	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.	2025-09-20 13:23:55 +05:00
Mekan1206	3ee7ec87be	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.	2025-09-20 13:21:20 +05:00
Mekan1206	803bbfc30f	Sync cities between prayers	2025-09-20 12:06:56 +05:00
Mekan1206	30dd67ecdf	Prayer city saved on click	2025-09-20 11:56:07 +05:00