i want to clarify that i'm not a native english speaker so don't kill me because of my grammar pls x). And also i'm junior so this code is horrible and a HUGE mess :S
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>; }} />In order to retrieve the agenda appointments, i get props from another screen that uses a function called retrievePlanning, inside this useEffect, i update the states that correspond to each type of data i get from props -> CalendarScreen.tsx props
const agenda = props.route.params;useEffect(() => { const unsubscribe = auth().onAuthStateChanged(async user => { if (!user) { navigation.replace("Login") } else { let userInfo:any = await handleUserInfo(uid); await setUserData(userInfo); // Retrieving user data await setPlanning(agenda.planning) // Storing appointments (to show as agenda cards) await setCalendarDates(agenda.date) // Storing appointment dates (for markers) //console.log(props.route.params) } }) return unsubscribe }, [isFocused])This is the function i call, it's a huge mess since i'm trying to figure out a way of getting every signle info i need to show on both the calendar and agenda.
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 informations :
- 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}],}Wich 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??
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)); }}Every single block of code from this post is from my PlanningScreen and Utils file.