From 1350029f8484898dc33aaac7165687bc32b95b39 Mon Sep 17 00:00:00 2001
From: ThatsMickey <28947074+miky41195@users.noreply.github.com>
Date: Mon, 3 Mar 2025 16:43:04 +0100
Subject: [PATCH] fix(bookings): fix console error and crash when enter in
 agenda/booking (#595)

---
 lib/ui/components/calendar/CalendarEvent.tsx              | 4 +++-
 lib/ui/hooks/calendar/useCalendarTouchableOpacityProps.ts | 1 -
 lib/ui/types/Calendar.ts                                  | 2 +-
 src/features/agenda/screens/AgendaWeekScreen.tsx          | 3 ++-
 src/features/bookings/screens/BookingSlotScreen.tsx       | 3 ++-
 src/utils/bookings.ts                                     | 2 +-
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/lib/ui/components/calendar/CalendarEvent.tsx b/lib/ui/components/calendar/CalendarEvent.tsx
index 2ccbc1af..acb2d8dd 100644
--- 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
index dc4d032a..8d37760e 100644
--- 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
index f6e3d0dd..e0bb62b7 100644
--- 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
index c2861bcb..4b5e34b4 100644
--- 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
index d1d0ffa7..591a657e 100644
--- 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
index 8d111ae1..0f0e012c 100644
--- 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 =>