fix: refresh profile context after enrolment mutations

Ensure profile UI state is updated after enrol/unenrol.

Refs: KK-1510

Author: tjgofore

src/domain/event/enrol/EnrolPage.tsx

@@ -26,6 +26,7 @@ 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';
 
 function containsAlreadyJoinedError(
   errors: ReadonlyArray<GraphQLFormattedError>
@@ -52,6 +53,7 @@ const EnrolPage = () => {
     i18n: { language },
   } = useTranslation();
   const dispatch = useDispatch();
+  const { refetchProfile } = useProfileContext();
   const params = useParams<{
     childId: string;
     eventId: string;
@@ -91,7 +93,8 @@ const EnrolPage = () => {
       childId,
       eventGroupId: data?.occurrence?.event?.eventGroup?.id,
     }),
-    onCompleted: (data) => {
+    awaitRefetchQueries: true,
+    onCompleted: async (data) => {
       if (data?.enrolOccurrence?.enrolment?.child?.occurrences?.edges) {
         dispatch(
           saveChildEvents({
@@ -111,6 +114,8 @@ const EnrolPage = () => {
         );
       }
 
+      await refetchProfile();
+
       goToOccurrence();
     },
     onError: (error) => {

src/domain/event/modal/UnenrolModal.tsx

@@ -17,6 +17,7 @@ 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';
 
 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,7 +50,7 @@ const UnenrolModal = ({
       eventGroupId,
     }),
     awaitRefetchQueries: true,
-    onCompleted: (data) => {
+    onCompleted: async (data) => {
       if (data.unenrolOccurrence?.child?.occurrences.edges) {
         dispatch(
           saveChildEvents({
@@ -57,6 +59,9 @@ const UnenrolModal = ({
           })
         );
       }
+
+      await refetchProfile();
+
       navigate(getPathname(`/profile/child/${childId}`), { replace: true });
     },
   });

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

src/domain/profile/ProfileProvider.tsx

@@ -18,12 +18,11 @@ export default function ProfileProvider({
     setProfileToContext,
   });
 
-  const refetchProfile = React.useCallback(() => {
-    refetch().then(({ data: refreshedData }) => {
-      setProfileToContext(refreshedData?.myProfile || null);
-      // eslint-disable-next-line no-console
-      console.info('ProfileContext', 'profile refetched');
-    });
+  const refetchProfile = React.useCallback(async () => {
+    const { data: refreshedData } = await refetch();
+    setProfileToContext(refreshedData?.myProfile || null);
+    // eslint-disable-next-line no-console
+    console.info('ProfileContext', 'profile refetched');
   }, [refetch]);
 
   const clearProfile = React.useCallback(() => {