fix: refresh profile context after enrolment mutations

tjgofore · tjgofore · commit 622545c00e14 · 2026-04-23T15:13:45.000+03:00
Ensure profile UI state is updated after enrol/unenrol.

Refs: KK-1510
diff --git a/src/domain/event/enrol/EnrolPage.tsx b/src/domain/event/enrol/EnrolPage.tsx
@@ -17,15 +17,14 @@ import {
 } from '../../api/generatedTypes/graphql';
 import LoadingSpinner from '../../../common/components/spinner/LoadingSpinner';
 import enrolOccurrenceMutation from '../mutations/enrolOccurrenceMutation';
-import { saveChildEvents } from '../state/EventActions';
 import ErrorMessage from '../../../common/components/error/Error';
 import getEventOrEventGroupOccurrenceRefetchQueries from '../getEventOrEventGroupOccurrenceRefetchQueries';
 import { GQLErrors } from './EnrolConstants';
 import Enrol from './Enrol';
 import useGetPathname from '../../../common/route/utils/useGetPathname';
-import { publicSvgIconPaths } from '../../../public_files';
-import Icon from '../../../common/components/icon/Icon';
 import graphqlClient from '../../api/client';
+import { useProfileContext } from '../../profile/hooks/useProfileContext';
+import { handleEnrolCompleted } from './handleEnrolCompleted';
 
 function containsAlreadyJoinedError(
   errors: ReadonlyArray<GraphQLFormattedError>
@@ -52,6 +51,7 @@ const EnrolPage = () => {
     i18n: { language },
   } = useTranslation();
   const dispatch = useDispatch();
+  const { refetchProfile } = useProfileContext();
   const params = useParams<{
     childId: string;
     eventId: string;
@@ -91,28 +91,15 @@ const EnrolPage = () => {
       childId,
       eventGroupId: data?.occurrence?.event?.eventGroup?.id,
     }),
-    onCompleted: (data) => {
-      if (data?.enrolOccurrence?.enrolment?.child?.occurrences?.edges) {
-        dispatch(
-          saveChildEvents({
-            childId,
-            occurrences: data.enrolOccurrence.enrolment.child.occurrences,
-          })
-        );
-        toast.success(
-          <div>
-            <Icon
-              src={publicSvgIconPaths['tada']}
-              className={styles.tadaIcon}
-            />
-            <h1>{t('enrollment.successToast.heading')}</h1>
-            <p>{t('enrollment.successToast.paragraph')}</p>
-          </div>
-        );
-      }
-
-      goToOccurrence();
-    },
+    awaitRefetchQueries: true,
+    onCompleted: async (data) =>
+      handleEnrolCompleted(data, {
+        childId,
+        dispatch,
+        refetchProfile,
+        goToOccurrence,
+        t,
+      }),
     onError: (error) => {
       if (containsAlreadyJoinedError(error.graphQLErrors)) {
         goToOccurrence();
diff --git a/src/domain/event/enrol/__tests__/EnrolPage.test.tsx b/src/domain/event/enrol/__tests__/EnrolPage.test.tsx
@@ -0,0 +1,77 @@
+import { toast } from 'react-toastify';
+
+import { handleEnrolCompleted } from '../handleEnrolCompleted';
+
+vi.mock('react-toastify', () => ({
+  toast: {
+    success: vi.fn(),
+  },
+}));
+
+describe('handleEnrolCompleted', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('dispatches and shows success toast when occurrences exist', async () => {
+    const dispatch = vi.fn();
+    const refetchProfile = vi.fn().mockResolvedValue(undefined);
+    const goToOccurrence = vi.fn();
+
+    await handleEnrolCompleted(
+      {
+        enrolOccurrence: {
+          enrolment: {
+            child: {
+              occurrences: {
+                edges: [{ node: { id: 'o1' } }],
+              },
+            },
+          },
+        },
+      } as any,
+      {
+        childId: 'child-1',
+        dispatch,
+        refetchProfile,
+        goToOccurrence,
+        t: (key) => key,
+      }
+    );
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(toast.success).toHaveBeenCalledTimes(1);
+    expect(refetchProfile).toHaveBeenCalledTimes(1);
+    expect(goToOccurrence).toHaveBeenCalledTimes(1);
+  });
+
+  it('refetches and navigates even without occurrences', async () => {
+    const dispatch = vi.fn();
+    const refetchProfile = vi.fn().mockResolvedValue(undefined);
+    const goToOccurrence = vi.fn();
+
+    await handleEnrolCompleted(
+      {
+        enrolOccurrence: {
+          enrolment: {
+            child: {
+              occurrences: null,
+            },
+          },
+        },
+      } as any,
+      {
+        childId: 'child-1',
+        dispatch,
+        refetchProfile,
+        goToOccurrence,
+        t: (key) => key,
+      }
+    );
+
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(toast.success).not.toHaveBeenCalled();
+    expect(refetchProfile).toHaveBeenCalledTimes(1);
+    expect(goToOccurrence).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/domain/event/enrol/handleEnrolCompleted.tsx b/src/domain/event/enrol/handleEnrolCompleted.tsx
@@ -0,0 +1,40 @@
+import { toast } from 'react-toastify';
+import type { UnknownAction } from 'redux';
+
+import Icon from '../../../common/components/icon/Icon';
+import { publicSvgIconPaths } from '../../../public_files';
+import styles from './enrol.module.scss';
+import { EnrolOccurrenceMutation } from '../../api/generatedTypes/graphql';
+import { saveChildEvents } from '../state/EventActions';
+
+type EnrolCompletedDeps = {
+  childId: string;
+  dispatch: (action: UnknownAction) => void;
+  refetchProfile: () => Promise<void>;
+  goToOccurrence: () => void;
+  t: (key: string) => string;
+};
+
+export async function handleEnrolCompleted(
+  data: EnrolOccurrenceMutation | null | undefined,
+  { childId, dispatch, refetchProfile, goToOccurrence, t }: EnrolCompletedDeps
+) {
+  if (data?.enrolOccurrence?.enrolment?.child?.occurrences?.edges) {
+    dispatch(
+      saveChildEvents({
+        childId,
+        occurrences: data.enrolOccurrence.enrolment.child.occurrences,
+      })
+    );
+    toast.success(
+      <div>
+        <Icon src={publicSvgIconPaths['tada']} className={styles.tadaIcon} />
+        <h1>{t('enrollment.successToast.heading')}</h1>
+        <p>{t('enrollment.successToast.paragraph')}</p>
+      </div>
+    );
+  }
+
+  await refetchProfile();
+  goToOccurrence();
+}
diff --git a/src/domain/event/modal/UnenrolModal.tsx b/src/domain/event/modal/UnenrolModal.tsx
@@ -13,10 +13,11 @@ import {
   UnenrolOccurrenceMutationVariables,
 } from '../../api/generatedTypes/graphql';
 import ConfirmModal from '../../../common/components/confirm/ConfirmModal';
-import { saveChildEvents } from '../state/EventActions';
 import getEventOrEventGroupOccurrenceRefetchQueries from '../getEventOrEventGroupOccurrenceRefetchQueries';
 import AppConfig from '../../app/AppConfig';
 import graphqlClient from '../../api/client';
+import { useProfileContext } from '../../profile/hooks/useProfileContext';
+import { handleUnenrolCompleted } from './handleUnenrolCompleted';
 
 interface UnenrolModalProps {
   isOpen: boolean;
@@ -37,6 +38,7 @@ const UnenrolModal = ({
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const getPathname = useGetPathname();
+  const { refetchProfile } = useProfileContext();
 
   const [unenrolOccurrence] = useMutation<
     UnenrolOccurrenceMutation,
@@ -48,17 +50,14 @@ const UnenrolModal = ({
       eventGroupId,
     }),
     awaitRefetchQueries: true,
-    onCompleted: (data) => {
-      if (data.unenrolOccurrence?.child?.occurrences.edges) {
-        dispatch(
-          saveChildEvents({
-            childId: data.unenrolOccurrence.child.id,
-            occurrences: data.unenrolOccurrence.child.occurrences,
-          })
-        );
-      }
-      navigate(getPathname(`/profile/child/${childId}`), { replace: true });
-    },
+    onCompleted: async (data) =>
+      handleUnenrolCompleted(data, {
+        dispatch,
+        refetchProfile,
+        navigateToProfile: () => {
+          navigate(getPathname(`/profile/child/${childId}`), { replace: true });
+        },
+      }),
   });
 
   const unenrol = async () => {
diff --git a/src/domain/event/modal/__tests__/UnenrolModal.test.tsx b/src/domain/event/modal/__tests__/UnenrolModal.test.tsx
@@ -0,0 +1,63 @@
+import { handleUnenrolCompleted } from '../handleUnenrolCompleted';
+
+describe('handleUnenrolCompleted', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('dispatches when occurrences exist', async () => {
+    const dispatch = vi.fn();
+    const refetchProfile = vi.fn().mockResolvedValue(undefined);
+    const navigateToProfile = vi.fn();
+
+    await handleUnenrolCompleted(
+      {
+        unenrolOccurrence: {
+          child: {
+            id: 'child-1',
+            occurrences: {
+              edges: [{ node: { id: 'o1' } }],
+            },
+          },
+        },
+      } as any,
+      {
+        dispatch,
+        refetchProfile,
+        navigateToProfile,
+      }
+    );
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(refetchProfile).toHaveBeenCalledTimes(1);
+    expect(navigateToProfile).toHaveBeenCalledTimes(1);
+  });
+
+  it('still refetches and navigates when occurrences are empty', async () => {
+    const dispatch = vi.fn();
+    const refetchProfile = vi.fn().mockResolvedValue(undefined);
+    const navigateToProfile = vi.fn();
+
+    await handleUnenrolCompleted(
+      {
+        unenrolOccurrence: {
+          child: {
+            id: 'child-1',
+            occurrences: {
+              edges: null,
+            },
+          },
+        },
+      } as any,
+      {
+        dispatch,
+        refetchProfile,
+        navigateToProfile,
+      }
+    );
+
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(refetchProfile).toHaveBeenCalledTimes(1);
+    expect(navigateToProfile).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/domain/event/modal/handleUnenrolCompleted.ts b/src/domain/event/modal/handleUnenrolCompleted.ts
@@ -0,0 +1,27 @@
+import type { UnknownAction } from 'redux';
+
+import { UnenrolOccurrenceMutation } from '../../api/generatedTypes/graphql';
+import { saveChildEvents } from '../state/EventActions';
+
+type UnenrolCompletedDeps = {
+  dispatch: (action: UnknownAction) => void;
+  refetchProfile: () => Promise<void>;
+  navigateToProfile: () => void;
+};
+
+export async function handleUnenrolCompleted(
+  data: UnenrolOccurrenceMutation | null | undefined,
+  { dispatch, refetchProfile, navigateToProfile }: UnenrolCompletedDeps
+) {
+  if (data?.unenrolOccurrence?.child?.occurrences?.edges) {
+    dispatch(
+      saveChildEvents({
+        childId: data.unenrolOccurrence.child.id,
+        occurrences: data.unenrolOccurrence.child.occurrences,
+      })
+    );
+  }
+
+  await refetchProfile();
+  navigateToProfile();
+}
diff --git a/src/domain/profile/ProfileContext.tsx b/src/domain/profile/ProfileContext.tsx
@@ -11,7 +11,7 @@ export type ProfileContextType = {
   profile: ProfileType;
   clearProfile: () => void;
   updateProfile: UpdateProfileType;
-  refetchProfile: () => void;
+  refetchProfile: () => Promise<void>;
   isLoading: boolean;
   isFetchCalled: boolean;
 };
@@ -26,7 +26,7 @@ const defaultContext: ProfileContextType = {
   updateProfile: () => {
     throw new Error('Not implemented');
   },
-  refetchProfile: () => {
+  refetchProfile: async () => {
     throw new Error('Not implemented');
   },
 };
diff --git a/src/domain/profile/ProfileProvider.tsx b/src/domain/profile/ProfileProvider.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import * as Sentry from '@sentry/browser';
 
 import { ProfileContext, ProfileType } from './ProfileContext';
 import useProfileFetcher from './hooks/useProfileFetcher';
@@ -18,12 +19,17 @@ export default function ProfileProvider({
     setProfileToContext,
   });
 
-  const refetchProfile = React.useCallback(() => {
-    refetch().then(({ data: refreshedData }) => {
+  const refetchProfile = React.useCallback(async () => {
+    try {
+      const { data: refreshedData } = await refetch();
       setProfileToContext(refreshedData?.myProfile || null);
       // eslint-disable-next-line no-console
       console.info('ProfileContext', 'profile refetched');
-    });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      Sentry.captureException(error);
+    }
   }, [refetch]);
 
   const clearProfile = React.useCallback(() => {
diff --git a/src/domain/profile/__tests__/ProfileProvider.test.tsx b/src/domain/profile/__tests__/ProfileProvider.test.tsx
