fix(bookings): fix console error and crash when enter in agenda/booki…

…ng (#595)
polito · Mar 3, 2025 · 1350029 · 1350029
1 parent 1ce8185
commit 1350029
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 deletions.
diff --git a/lib/ui/components/calendar/CalendarEvent.tsx b/lib/ui/components/calendar/CalendarEvent.tsx
@@ -81,8 +81,10 @@ export const CalendarEvent = <T extends ICalendarEventBase>({
     ],
   });
 
+  const key = `${event.start.toISO()}_${event.title}`;
+
   if (renderEvent) {
-    return renderEvent(event, touchableOpacityProps);
+    return renderEvent(event, touchableOpacityProps, key);
   }
 
   return (

diff --git a/lib/ui/hooks/calendar/useCalendarTouchableOpacityProps.ts b/lib/ui/hooks/calendar/useCalendarTouchableOpacityProps.ts
@@ -34,7 +34,6 @@ export function useCalendarTouchableOpacityProps<T extends ICalendarEventBase>({
 
   const touchableOpacityProps: CalendarTouchableOpacityProps = {
     delayPressIn: 20,
-    key: `${event.start.toISO()}_${event.title}`,
     style: [...injectedStyles, getEventStyle(event)],
     onPress: _onPress,
     disabled: !onPressEvent,

diff --git a/lib/ui/types/Calendar.ts b/lib/ui/types/Calendar.ts
@@ -18,7 +18,6 @@ export interface ICalendarEventBase {
 
 export type CalendarTouchableOpacityProps = {
   delayPressIn: number;
-  key: string;
   style: RecursiveArray<ViewStyle | undefined> | ViewStyle;
   onPress: () => void;
   disabled: boolean;
@@ -50,6 +49,7 @@ export type HorizontalDirection = 'RIGHT' | 'LEFT';
 export type EventRenderer<T extends ICalendarEventBase = ICalendarEventBase> = (
   event: T,
   touchableOpacityProps: CalendarTouchableOpacityProps,
+  key: string,
 ) => JSX.Element;
 
 export type HeaderRenderer = ComponentType<

diff --git a/src/features/agenda/screens/AgendaWeekScreen.tsx b/src/features/agenda/screens/AgendaWeekScreen.tsx
@@ -270,9 +270,10 @@ export const AgendaWeekScreen = ({ navigation, route }: Props) => {
             renderHeader={props => (
               <CalendarHeader {...props} cellHeight={-1} />
             )}
-            renderEvent={(item: AgendaItem, touchableOpacityProps) => {
+            renderEvent={(item: AgendaItem, touchableOpacityProps, key) => {
               return (
                 <TouchableOpacity
+                  key={key}
                   {...touchableOpacityProps}
                   style={[touchableOpacityProps.style, styles.event]}
                 >

diff --git a/src/features/bookings/screens/BookingSlotScreen.tsx b/src/features/bookings/screens/BookingSlotScreen.tsx
@@ -286,7 +286,7 @@ export const BookingSlotScreen = ({ route, navigation }: Props) => {
             events={calendarEvents}
             height={calendarHeight}
             startHour={currentTopic.startHour || 8}
-            renderEvent={(item, touchableOpacityProps) => {
+            renderEvent={(item, touchableOpacityProps, key) => {
               const isMini = item.duration <= 15;
               const { color, backgroundColor } = getBookingStyle(
                 item,
@@ -313,6 +313,7 @@ export const BookingSlotScreen = ({ route, navigation }: Props) => {
 
               return (
                 <Pressable
+                  key={key}
                   {...touchableOpacityProps}
                   style={[
                     touchableOpacityProps.style,

diff --git a/src/utils/bookings.ts b/src/utils/bookings.ts
@@ -123,7 +123,7 @@ export const getCalendarPropsFromTopic = (
   topicId?: string,
 ) => {
   const topicIndex = topics?.findIndex(topic => topic.id === topicId);
-  if (!!topicIndex && topicIndex > -1 && topics) {
+  if (topicIndex !== undefined && topicIndex > -1 && topics) {
     return topics[topicIndex];
   }
   const topicWithSubtopics = topics?.find(topic =>