Merge pull request #8744 from CitizenLabDotCo/TAN-2515-event-confirma…

…tion

TAN-2515 Only open modal for event references in success action

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;

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);
 

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);
   };
 };

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();