From a5c318cb5e4ac513d60bfd487c7c74b3199fb377 Mon Sep 17 00:00:00 2001
From: Luuc van der Zee <luuc_v_d_zee@hotmail.com>
Date: Thu, 22 Aug 2024 10:37:49 +0100
Subject: [PATCH] Only open modal for event references in success action

---
 .../EventAttendanceButton/ConfirmationModal.tsx    | 14 ++++++++------
 .../app/components/EventAttendanceButton/index.tsx | 13 ++++++++++---
 .../SuccessActions/actions/attendEvent.ts          | 14 ++++++--------
 front/app/hooks/useObserveEvent.ts                 | 11 +++++++----
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/front/app/components/EventAttendanceButton/ConfirmationModal.tsx b/front/app/components/EventAttendanceButton/ConfirmationModal.tsx
index e07b2466d2e6..0ebeafdc961b 100644
--- a/front/app/components/EventAttendanceButton/ConfirmationModal.tsx
+++ b/front/app/components/EventAttendanceButton/ConfirmationModal.tsx
@@ -2,20 +2,22 @@ import React from 'react';
 
 import { Box, Title, Text } from '@citizenlab/cl2-component-library';
 
+import { IEventData } from 'api/events/types';
+import useAuthUser from 'api/me/useAuthUser';
+
+import useLocalize from 'hooks/useLocalize';
+
 import EventSharingButtons from 'containers/EventsShowPage/components/EventSharingButtons';
 
 import { AddEventToCalendarButton } from 'components/AddEventToCalendarButton';
 import Modal from 'components/UI/Modal';
 
-import { EventModalConfetti } from './EventModalConfetti';
-import messages from './messages';
-
-import useAuthUser from 'api/me/useAuthUser';
 import { useIntl } from 'utils/cl-intl';
-import { IEventData } from 'api/events/types';
-import useLocalize from 'hooks/useLocalize';
 import { getEventDateString } from 'utils/dateUtils';
 
+import { EventModalConfetti } from './EventModalConfetti';
+import messages from './messages';
+
 interface Props {
   opened: boolean;
   event: IEventData;
diff --git a/front/app/components/EventAttendanceButton/index.tsx b/front/app/components/EventAttendanceButton/index.tsx
index 22250a47ebd7..93737cf565d8 100644
--- a/front/app/components/EventAttendanceButton/index.tsx
+++ b/front/app/components/EventAttendanceButton/index.tsx
@@ -63,9 +63,16 @@ const EventAttendanceButton = ({ event }: EventAttendanceButtonProps) => {
   const { data: phases } = usePhases(project?.data.id);
   const currentPhase = getCurrentPhase(phases?.data);
 
-  const handleEventAttendanceEvent = useCallback(() => {
-    setConfirmationModalVisible(true);
-  }, []);
+  const handleEventAttendanceEvent = useCallback(
+    (eventEmitterEvent) => {
+      const eventId = eventEmitterEvent.eventValue;
+
+      if (eventId === event.id) {
+        setConfirmationModalVisible(true);
+      }
+    },
+    [event.id]
+  );
 
   useObserveEvent('eventAttendance', handleEventAttendanceEvent);
 
diff --git a/front/app/containers/Authentication/SuccessActions/actions/attendEvent.ts b/front/app/containers/Authentication/SuccessActions/actions/attendEvent.ts
index bf6b86916a83..301748d7e6f4 100644
--- a/front/app/containers/Authentication/SuccessActions/actions/attendEvent.ts
+++ b/front/app/containers/Authentication/SuccessActions/actions/attendEvent.ts
@@ -1,14 +1,12 @@
-import { IEventData } from 'api/events/types';
-import { IUserData } from 'api/users/types';
-
 import { addEventAttendance } from 'api/event_attendance/useAddEventAttendance';
+import eventsKeys from 'api/events/keys';
+import { IEventData } from 'api/events/types';
 import { addFollower } from 'api/follow_unfollow/useAddFollower';
-import eventEmitter from 'utils/eventEmitter';
-import { queryClient } from 'utils/cl-react-query/queryClient';
-
 import projectsKeys from 'api/projects/keys';
+import { IUserData } from 'api/users/types';
 
-import eventsKeys from 'api/events/keys';
+import { queryClient } from 'utils/cl-react-query/queryClient';
+import eventEmitter from 'utils/eventEmitter';
 
 export interface AttendEventParams {
   event: IEventData;
@@ -35,6 +33,6 @@ export const attendEvent = ({ event }: AttendEventParams) => {
       queryKey: eventsKeys.list({ attendeeId }),
     });
 
-    eventEmitter.emit('eventAttendance');
+    eventEmitter.emit('eventAttendance', event.id);
   };
 };
diff --git a/front/app/hooks/useObserveEvent.ts b/front/app/hooks/useObserveEvent.ts
index 805c84d3cba5..cc2725cfb41a 100644
--- a/front/app/hooks/useObserveEvent.ts
+++ b/front/app/hooks/useObserveEvent.ts
@@ -1,15 +1,18 @@
 import { useEffect } from 'react';
 
-import eventEmitter from 'utils/eventEmitter';
+import eventEmitter, { IEventEmitterEvent } from 'utils/eventEmitter';
 
 // Hook
-export default (eventName: string | undefined, callBack: () => void) => {
+export default (
+  eventName: string | undefined,
+  callBack: (event: IEventEmitterEvent<unknown>) => void
+) => {
   useEffect(() => {
     if (eventName) {
       const subscription = eventEmitter
         .observeEvent(eventName)
-        .subscribe(() => {
-          callBack();
+        .subscribe((event) => {
+          callBack(event);
         });
 
       return () => subscription.unsubscribe();