I am currently utilizing the React Native Calendars library to develop an agenda-style application with React Native. To fetch the necessary data, I am leveraging the Firebase Firestore library.
The agenda functionality of this library relies on several properties to display appointment cards:
Here are my agenda settings:
<Agenda
items={agenda.items}
// Initially selected day
selected={date}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={today}
// Specify how each item should be rendered in agenda
renderItem={(item, firstItemInDay) => {
return <View>
<PlanningCard
style={styles.appointmentCard}
hour={String(moment.unix(item.date).format("H[h]mm"))}
></PlanningCard>
</View>;
}}
/>
This is the data returned from my function -->props
This is the function I invoke, and it's quite convoluted as I'm striving to gather all the information needed for both the calendar and agenda displays.
export const retrievePlanning = async (uid:string) => {
let getAppointments:any;
let appointments:any = {};
let markedDates:any = {};
let agendaItems:any = {};
let user:any;
let docDate:string;
let today:string = String(moment().format("YYYY-MM-DD"));
try{
getAppointments = await firestore()
.collection('appointments')
.where('marchand_id', '==', uid)
.get(); // Retrieve
getAppointments.forEach(async(doc:any) => { // Iterate through appointments
appointments[doc.id] = doc.data(); // Store appointments
docDate = moment.unix(doc.data().date).format("YYYY-MM-DD"); // Convert Unix timestamp to agenda date format
markedDates[docDate] = {marked: true, dotColor: 'deepskyblue'} // Track appointment dates (for calendar markers)
try {
user = await firestore()
.collection('users')
.doc(String(doc.data().customer_id))
.get(); // Obtain user associated with appointment
console.log("test, does this work??")
// HERE IS THE ISSUE !!!
agendaItems[docDate] = [doc.data(), user.data()] // Store appointment dates (to display them as agenda items)
} catch (error:any) {
console.log(error);
Alert.alert("Error", String(error.message));
}
});
//console.log(agendaItems)
//console.log(calendarDates)
//console.log(planning);
return {planning: appointments, dates: markedDates, items: agendaItems}
} catch (error:any) {
console.log(error);
Alert.alert("Error", String(error.message));
}
}
The issue arises within the appointments loop, where I aim to fetch multiple appointments with the same date but distinct hours.
I need to establish an object that holds three types of information:
- Formatted appointment dates (for calendar markers)
- Complete data from each individual appointment (to transmit as props to the next screen)
- Formatted appointment dates + appointments data + user data (for displaying agenda cards)
The predicament is that I am unable to append multiple values under the same index (the indexes being the dates). For instance, if there are two appointments on the same day, it should look like this:
{
"2022-01-24": [{appointment 1 data}],
"2022-01-24": [{appointment 2 data}],
"2022-01-28": [{some other appointment data}],
}
Instead, it appears like this:
{
"2022-01-24": [{appointment 2 data}],
"2022-01-28": [{some other appointment data}],
}
This means that only one appointment can be displayed per day. Is there a way to achieve the example above? Or is there any workaround or solution?
PS: English is not my first language, so please excuse any grammatical errors. Also, I am relatively new to programming, so this code may seem messy.