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:
@@ -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} /> */}
|
||||
|
||||
Reference in New Issue
Block a user