diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx index 3a89cc9bc9..0ee17dac21 100644 --- a/apps/web/components/booking/BookingListItem.tsx +++ b/apps/web/components/booking/BookingListItem.tsx @@ -176,11 +176,12 @@ function BookingListItem(booking: BookingItemProps) { setLocationMutation.mutate({ bookingId: booking.id, newLocation }); }; - // Extract recurring dates is intensive to run, so use useMemo. - // Calculate the booking date(s) and setup recurring event data to show - // @FIXME: This is importing the RRULE library which is already heavy. Find out a more optimal way do this. - const [recurringStrings, recurringDates] = useMemo(() => { - if (booking.recurringBookings !== undefined && booking.eventType.recurringEvent?.freq !== undefined) { + const [, recurringDates] = useMemo(() => { + if ( + booking.recurringBookings !== undefined && + booking.eventType.recurringEvent?.freq !== undefined && + booking.recurringEventId + ) { return extractRecurringDates(booking, user?.timeZone, i18n); } return [[], []]; @@ -275,13 +276,11 @@ function BookingListItem(booking: BookingItemProps) { attendees={booking.attendees} /> - {isPending && ( {t("unconfirmed")} )} - {booking.eventType?.team && ( {booking.eventType.team.name} @@ -292,7 +291,6 @@ function BookingListItem(booking: BookingItemProps) { {t("pending_payment")} )} -
diff --git a/apps/web/lib/parseDate.ts b/apps/web/lib/parseDate.ts index ee9ab30342..291e34b045 100644 --- a/apps/web/lib/parseDate.ts +++ b/apps/web/lib/parseDate.ts @@ -75,11 +75,16 @@ export const extractRecurringDates = ( const recurringInfo = booking.recurringBookings.find( (val) => val.recurringEventId === booking.recurringEventId ); + if (!recurringInfo) { + // something went wrong, fail here before RRule. + return [[], []]; + } const allDates = new RRule({ ...rest, count: recurringInfo?._count.recurringEventId, dtstart: recurringInfo?._min.startTime, }).all(); + const utcOffset = dayjs(recurringInfo?._min.startTime).tz(timeZone).utcOffset(); const dateStrings = allDates.map((r) => { return processDate(dayjs.utc(r).utcOffset(utcOffset), i18n);