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.
This commit is contained in:
Mekan1206
2025-09-20 13:42:06 +05:00
parent ae6ccd7f53
commit 558698a058

View File

@@ -14,6 +14,7 @@ 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 & { dateStr: string }) | null>(null);
useEffect(() => {
const fetchAndSetActivities = async () => {
@@ -31,7 +32,7 @@ export default function HomeScreen() {
const todayStr = formatDate(now);
const todaysActivities = activities[todayStr] || [];
const nextActivity = todaysActivities.find(activity => {
const nextActivity = todaysActivities.find((activity) => {
if (!activity.time) return false;
const [hours, minutes] = activity.time.split(':').map(Number);
const activityTime = new Date(now);
@@ -40,6 +41,22 @@ export default function HomeScreen() {
});
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;
});
if (nextDateStr && activities[nextDateStr].length > 0) {
setNextDayActivity({ ...activities[nextDateStr][0], dateStr: nextDateStr });
}
} catch (error) {
console.error('Failed to load activities for home screen:', error);
}
@@ -88,6 +105,15 @@ export default function HomeScreen() {
/>
)}
{nextDayActivity && (
<FeatureCard
badgeText={`${nextDayActivity.dateStr}, ${nextDayActivity.time || 'All Day'}`}
title={nextDayActivity.title}
description={nextDayActivity.description}
image={require('@/assets/images/aisha.jpg')}
/>
)}
<PrayerTimeCard />
{/* <ServicesGrid services={services} /> */}