fix: children list should update from CRUD-operations

KK-1151
City-of-Helsinki · May 17, 2024 · c4a2a36 · c4a2a36
1 parent 1dd7c92
commit c4a2a36
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 29 deletions.
diff --git a/src/domain/profile/ProfileProvider.tsx b/src/domain/profile/ProfileProvider.tsx
@@ -40,8 +40,8 @@ export default function ProfileProvider({
 
   const refetchProfile = React.useCallback(() => {
     if (refetch && data?.myProfile)
-      refetch().then(() => {
-        setProfileToContext(data?.myProfile || null);
+      refetch().then(({ data: refreshedData }) => {
+        setProfileToContext(refreshedData?.myProfile || null);
       });
   }, [data?.myProfile, refetch]);
 

diff --git a/src/domain/profile/children/ProfileChildrenList.tsx b/src/domain/profile/children/ProfileChildrenList.tsx
@@ -6,15 +6,17 @@ import * as Sentry from '@sentry/browser';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
 import { IconPlus } from 'hds-react';
 
-import { UpdateChildMutationInput } from '../../api/generatedTypes/graphql';
+import {
+  ProfileQueryDocument,
+  UpdateChildMutationInput,
+} from '../../api/generatedTypes/graphql';
 import Button from '../../../common/components/button/Button';
 import LoadingSpinner from '../../../common/components/spinner/LoadingSpinner';
 import Text from '../../../common/components/text/Text';
 import List from '../../../common/components/list/List';
 import AddNewChildFormModal from '../../registration/modal/AddNewChildFormModal';
 import { addChildMutation } from '../../child/mutation/ChildMutation';
 import { getSupportedChildData } from '../../child/ChildUtils';
-import profileQuery from '../queries/ProfileQuery';
 import { getProjectsFromProfileQuery } from '../ProfileUtil';
 import ProfileChild from './child/ProfileChild';
 import styles from './profileChildrenList.module.scss';
@@ -28,7 +30,10 @@ const ProfileChildrenList = () => {
   const [addChild, { loading: mutationLoading }] = useMutation(
     addChildMutation,
     {
-      refetchQueries: [{ query: profileQuery }],
+      refetchQueries: [{ query: ProfileQueryDocument }],
+      onCompleted: () => {
+        refetchProfile();
+      },
     }
   );
   const { trackEvent } = useMatomo();
@@ -47,7 +52,6 @@ const ProfileChildrenList = () => {
             addChild({ variables: { input: supportedChildData } })
               .then(() => {
                 trackEvent({ category: 'action', action: 'Add child' });
-                refetchProfile();
               })
               .catch((error) => {
                 toast.error(t('profile.addChildMutation.errorMessage'));

diff --git a/src/domain/profile/children/child/ProfileChildDetail.tsx b/src/domain/profile/children/child/ProfileChildDetail.tsx
@@ -11,6 +11,7 @@ import {
   ChildByIdQuery,
   UpdateChildMutationPayloadFieldsFragment,
   DeleteChildMutationPayloadFieldsFragment,
+  ProfileQueryDocument,
 } from '../../../api/generatedTypes/graphql';
 import GiveFeedbackButton from '../../../../common/components/giveFeedbackButton/GiveFeedbackButton';
 import ErrorMessage from '../../../../common/components/error/Error';
@@ -26,11 +27,11 @@ import { childByIdQuery } from '../../../child/queries/ChildQueries';
 import ChildEnrolmentCount from '../../../child/ChildEnrolmentCount';
 import ListPageLayout from '../../../app/layout/ListPageLayout';
 import ProfileEvents from '../../events/ProfileEvents';
-import profileQuery from '../../queries/ProfileQuery';
 import ProfileChildDetailEditModal from './modal/ProfileChildDetailEditModal';
 import styles from './profileChildDetail.module.scss';
 import useAppRouteHref from '../../../app/useAppRouteHref';
 import { useIsFullyLoggedIn } from '../../../auth/useIsFullyLoggedIn';
+import { useProfileContext } from '../../hooks/useProfileContext';
 
 export type ChildDetailEditModalPayload = Omit<UpdateChildMutationInput, 'id'>;
 
@@ -47,6 +48,7 @@ export const useChildRouteGoBackTo = () => {
 const ProfileChildDetail = () => {
   const { t } = useTranslation();
   const params = useParams<{ childId: string }>();
+  const { refetchProfile } = useProfileContext();
   const navigate = useNavigate();
   const goBackTo = useProfileRouteGoBackTo();
   const [isLoginReady] = useIsFullyLoggedIn();
@@ -65,7 +67,10 @@ const ProfileChildDetail = () => {
   const [deleteChild] = useMutation<DeleteChildMutationPayloadFieldsFragment>(
     deleteChildMutation,
     {
-      refetchQueries: [{ query: profileQuery }],
+      refetchQueries: [{ query: ProfileQueryDocument }],
+      onCompleted: () => {
+        refetchProfile();
+      },
     }
   );
 
@@ -75,6 +80,9 @@ const ProfileChildDetail = () => {
       refetchQueries: [
         { query: childByIdQuery, variables: { id: params.childId } },
       ],
+      onCompleted: () => {
+        refetchProfile();
+      },
     }
   );
 

diff --git a/src/domain/profile/hooks/useProfile.ts b/src/domain/profile/hooks/useProfile.ts
@@ -7,9 +7,11 @@ import {
 import { useDispatch } from 'react-redux';
 import * as Sentry from '@sentry/browser';
 
-import { ProfileQuery } from '../../api/generatedTypes/graphql';
+import {
+  ProfileQuery,
+  ProfileQueryDocument,
+} from '../../api/generatedTypes/graphql';
 import { clearEvent, saveChildrenEvents } from '../../event/state/EventActions';
-import profileQuery from '../queries/ProfileQuery';
 import { clearProfile, saveProfile } from '../state/ProfileActions';
 import { defaultProfileData } from '../state/ProfileReducers';
 import { MyProfile } from '../types/ProfileQueryTypes';
@@ -26,25 +28,28 @@ function useProfile({
 ] {
   const dispatch = useDispatch();
 
-  const [fetchProfile, queryResult] = useLazyQuery<ProfileQuery>(profileQuery, {
-    onCompleted: (data) => {
-      setLoading && setLoading(false);
-      setProfileToContext(data?.myProfile || null);
-      // Sync data to redux. Note that the redux state won't be updated
-      // when apollo re-fetches queries based on refetchQueries. It's
-      // better to source data from Apollo instead.
-      dispatch(saveProfile(data?.myProfile || defaultProfileData));
-      dispatch(clearEvent());
-      dispatch(saveChildrenEvents(data?.myProfile?.children || undefined));
-    },
-    onError: (error) => {
-      // eslint-disable-next-line no-console
-      console.error(error);
-      setProfileToContext(null);
-      dispatch(clearProfile());
-      Sentry.captureException(error);
-    },
-  });
+  const [fetchProfile, queryResult] = useLazyQuery<ProfileQuery>(
+    ProfileQueryDocument,
+    {
+      onCompleted: (data) => {
+        setLoading && setLoading(false);
+        setProfileToContext(data?.myProfile || null);
+        // Sync data to redux. Note that the redux state won't be updated
+        // when apollo re-fetches queries based on refetchQueries. It's
+        // better to source data from Apollo instead.
+        dispatch(saveProfile(data?.myProfile || defaultProfileData));
+        dispatch(clearEvent());
+        dispatch(saveChildrenEvents(data?.myProfile?.children || undefined));
+      },
+      onError: (error) => {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        setProfileToContext(null);
+        dispatch(clearProfile());
+        Sentry.captureException(error);
+      },
+    }
+  );
 
   return [fetchProfile, queryResult];
 }

diff --git a/src/domain/registration/form/RegistrationForm.tsx b/src/domain/registration/form/RegistrationForm.tsx
@@ -110,6 +110,7 @@ const RegistrationForm = () => {
     profile,
     clearProfile: clearProfileFromContext,
     updateProfile,
+    refetchProfile,
   } = useProfileContext();
   const { loading, error, data } = useQuery<ProfileQuery>(profileQuery);
   const [submitChildrenAndGuardian] =
@@ -118,6 +119,9 @@ const RegistrationForm = () => {
       {
         awaitRefetchQueries: true,
         refetchQueries: [{ query: profileQuery }],
+        onCompleted: () => {
+          refetchProfile();
+        },
       }
     );
   // For new users preferLanguage defaults to their chosen UI language.