React native calendars agenda not showing items with same date

Question

I'm currently using React Native Calendars library to build an agenda-like app on React Native, to get the data I need, I use Firebase Firestore library.

This library's agenda uses a few properties in order to show appointment cards:

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 I get from my function -> props

This is the function I call, it's a huge mess since I'm trying to figure out a way of getting every single info I need to show on both the calendar and agenda.

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(); // Recup
        
        getAppointments.forEach(async(doc:any) => { // Loop on appointments

            appointments[doc.id] = doc.data(); // Storing appointments
            docDate = moment.unix(doc.data().date).format("YYYY-MM-DD"); // Unix timestamp to agenda's date format
            markedDates[docDate] = {marked: true, dotColor: 'deepskyblue'} // Storing appointment dates (for calendar markers)

            try {
                user = await firestore()
                            .collection('users')
                            .doc(String(doc.data().customer_id))
                            .get(); // User who the appointment belongs to
                
                console.log("test, does this work??")

                // HERE IS THE ISSUE !!!
                            
                agendaItems[docDate] = [doc.data(), user.data()] // Storing appointment dates (to show 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 occurs inside the appointments loop, where I want to get multiple appointments that have the same date but different hours.

I need to create an object that stores 3 types of information:

formatted appointment dates (for calendar markers)
full data from every single appointment (to pass as props to the next screen)
formatted appointment dates + appointments data + user data (to show the agenda cards)

The problem is that I can't append multiple same index values (the index are the dates), for example, let's say I have 2 appointments 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}],
}

But instead it looks like this:

{ 
  "2022-01-24": [{appointment 2 data}],
  "2022-01-28": [{some other appointment data}],
}

Which means that I can only show 1 appointment per day. Is there any way to make that example above possible? Or is there anything I can do, a workaround for this maybe?

PS: I'm not a native English speaker so don't kill me because of my grammar please. And also I'm junior so this code is a HUGE mess.

score 0 · Accepted Answer · edited Mar 19 '22 at 17:19

Do something like this:

Iterate over all ur appointments and initialise each key to an empty array
Iterate again over all ur appoints and push the appointments against each date

i.e.,

Step1:

 for(appointment of appointments){
   items[formatDate(appointment.date,'YYYY-MM-DD')] = []; 
 }

Step2:

 for(appointment of appointments){
   items[formatDate(appointment.date,'YYYY-MM-DD')].push({
      // Your agenda item
    }) 
 }

React native calendars agenda not showing items with same date

1 Answers1