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() {
|
export default function HomeScreen() {
|
||||||
const insets = useSafeAreaInsets();
|
const insets = useSafeAreaInsets();
|
||||||
const [todaysActivity, setTodaysActivity] = useState<ProgramActivity | null>(null);
|
const [todaysActivity, setTodaysActivity] = useState<ProgramActivity | null>(null);
|
||||||
|
const [nextDayActivity, setNextDayActivity] = useState<(ProgramActivity & { dateStr: string }) | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchAndSetActivities = async () => {
|
const fetchAndSetActivities = async () => {
|
||||||
@@ -31,7 +32,7 @@ export default function HomeScreen() {
|
|||||||
const todayStr = formatDate(now);
|
const todayStr = formatDate(now);
|
||||||
const todaysActivities = activities[todayStr] || [];
|
const todaysActivities = activities[todayStr] || [];
|
||||||
|
|
||||||
const nextActivity = todaysActivities.find(activity => {
|
const nextActivity = todaysActivities.find((activity) => {
|
||||||
if (!activity.time) return false;
|
if (!activity.time) return false;
|
||||||
const [hours, minutes] = activity.time.split(':').map(Number);
|
const [hours, minutes] = activity.time.split(':').map(Number);
|
||||||
const activityTime = new Date(now);
|
const activityTime = new Date(now);
|
||||||
@@ -40,6 +41,22 @@ export default function HomeScreen() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
setTodaysActivity(nextActivity || todaysActivities[0] || null);
|
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) {
|
} catch (error) {
|
||||||
console.error('Failed to load activities for home screen:', 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 />
|
<PrayerTimeCard />
|
||||||
|
|
||||||
{/* <ServicesGrid services={services} /> */}
|
{/* <ServicesGrid services={services} /> */}
|
||||||
|
|||||||
Reference in New Issue
Block a user