MPDX-7955 Update Flows column results after change (#1033)

Update Flows column results after a mutation.
CruGlobal · Sep 6, 2024 · 191c853 · 191c853
1 parent 6aae705
commit 191c853
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 99 deletions.
diff --git a/src/components/Tool/Appeal/Flow/ContactFlow.tsx b/src/components/Tool/Appeal/Flow/ContactFlow.tsx
@@ -161,6 +161,7 @@ export const ContactFlow: React.FC<ContactFlowProps> = ({
                 },
               },
             },
+            refetchQueries: ['Contacts'],
             update: (_, data) => {
               const newStatus =
                 data.data?.updateAccountListPledge?.pledge.status;

diff --git a/src/components/Tool/Appeal/Modals/AddContactToAppealModal/AddContactToAppealModal.test.tsx b/src/components/Tool/Appeal/Modals/AddContactToAppealModal/AddContactToAppealModal.test.tsx
@@ -10,7 +10,10 @@ import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
 import { ContactOptionsQuery } from 'src/components/Task/Modal/Form/Inputs/ContactsAutocomplete/ContactsAutocomplete.generated';
 import theme from 'src/theme';
-import { AppealsContext } from '../../AppealsContext/AppealsContext';
+import {
+  AppealsContext,
+  AppealsType,
+} from '../../AppealsContext/AppealsContext';
 import { AddContactToAppealModal } from './AddContactToAppealModal';
 import { AppealQuery } from './AppealInfo.generated';
 
@@ -22,7 +25,6 @@ const router = {
 };
 const handleClose = jest.fn();
 const mutationSpy = jest.fn();
-const refetch = jest.fn();
 const mockEnqueue = jest.fn();
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -76,13 +78,12 @@ const Components = ({
           >
             <AppealsWrapper>
               <AppealsContext.Provider
-                value={{
-                  accountListId,
-                  appealId: appealId,
-                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore
-                  contactsQueryResult: { refetch },
-                }}
+                value={
+                  {
+                    accountListId,
+                    appealId: appealId,
+                  } as unknown as AppealsType
+                }
               >
                 <AddContactToAppealModal handleClose={handleClose} />
               </AppealsContext.Provider>
@@ -97,7 +98,6 @@ const Components = ({
 describe('AddContactToAppealModal', () => {
   beforeEach(() => {
     handleClose.mockClear();
-    refetch.mockClear();
     mockEnqueue.mockClear();
   });
   it('default', () => {
@@ -164,7 +164,5 @@ describe('AddContactToAppealModal', () => {
         },
       });
     });
-
-    expect(refetch).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/Tool/Appeal/Modals/AddContactToAppealModal/AddContactToAppealModal.tsx b/src/components/Tool/Appeal/Modals/AddContactToAppealModal/AddContactToAppealModal.tsx
@@ -35,7 +35,7 @@ export const AddContactToAppealModal: React.FC<
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
   const [assignContactsToAppeal] = useAssignContactsToAppealMutation();
-  const { accountListId, appealId, contactsQueryResult } = React.useContext(
+  const { accountListId, appealId } = React.useContext(
     AppealsContext,
   ) as AppealsType;
 
@@ -59,9 +59,7 @@ export const AddContactToAppealModal: React.FC<
           },
         },
       },
-      update: () => {
-        contactsQueryResult.refetch();
-      },
+      refetchQueries: ['Contacts'],
       onCompleted: () => {
         const successMessage =
           attributes.contactIds.length === 1

diff --git a/src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.test.tsx b/src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.test.tsx
@@ -11,7 +11,10 @@ import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import { AppealsContext } from '../../AppealsContext/AppealsContext';
+import {
+  AppealsContext,
+  AppealsType,
+} from '../../AppealsContext/AppealsContext';
 import { AppealQuery } from '../AddContactToAppealModal/AppealInfo.generated';
 import { AddExcludedContactModal } from './AddExcludedContactModal';
 
@@ -25,7 +28,6 @@ const router = {
 };
 const handleClose = jest.fn();
 const mutationSpy = jest.fn();
-const refetch = jest.fn();
 
 const mockEnqueue = jest.fn();
 jest.mock('notistack', () => ({
@@ -66,13 +68,12 @@ const Components = ({
             >
               <AppealsWrapper>
                 <AppealsContext.Provider
-                  value={{
-                    accountListId,
-                    appealId: appealId,
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    contactsQueryResult: { refetch },
-                  }}
+                  value={
+                    {
+                      accountListId,
+                      appealId: appealId,
+                    } as unknown as AppealsType
+                  }
                 >
                   <AddExcludedContactModal
                     handleClose={handleClose}
@@ -133,7 +134,6 @@ describe('AddExcludedContactModal', () => {
     const { getByRole } = render(<Components />);
 
     expect(mutationSpy).toHaveBeenCalledTimes(0);
-    expect(refetch).not.toHaveBeenCalled();
 
     await waitFor(() =>
       expect(getByRole('button', { name: 'Yes' })).not.toBeDisabled(),
@@ -153,8 +153,6 @@ describe('AddExcludedContactModal', () => {
       });
     });
 
-    expect(refetch).toHaveBeenCalledTimes(1);
-
     expect(mockEnqueue).toHaveBeenCalledWith(
       'Successfully added contact to appeal',
       {
@@ -167,7 +165,6 @@ describe('AddExcludedContactModal', () => {
     const { getByRole } = render(<Components contactIds={bulkContactIds} />);
 
     expect(mutationSpy).toHaveBeenCalledTimes(0);
-    expect(refetch).not.toHaveBeenCalled();
 
     await waitFor(() =>
       expect(getByRole('button', { name: 'Yes' })).not.toBeDisabled(),
@@ -187,8 +184,6 @@ describe('AddExcludedContactModal', () => {
       });
     });
 
-    expect(refetch).toHaveBeenCalledTimes(1);
-
     expect(mockEnqueue).toHaveBeenCalledWith(
       'Successfully added contacts to appeal',
       {

diff --git a/src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.tsx b/src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext } from 'react';
 import {
   Box,
   CircularProgress,
@@ -35,11 +35,9 @@ export const AddExcludedContactModal: React.FC<
 > = ({ contactIds, handleClose }) => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
-  const [assignContactsToAppeal] = useAssignContactsToAppealMutation();
-  const { accountListId, appealId, contactsQueryResult } = React.useContext(
-    AppealsContext,
-  ) as AppealsType;
-  const [mutating, setMutating] = useState(false);
+  const [assignContactsToAppeal, { loading: mutating }] =
+    useAssignContactsToAppealMutation();
+  const { accountListId, appealId } = useContext(AppealsContext) as AppealsType;
 
   const { data, loading } = useAppealQuery({
     variables: {
@@ -52,8 +50,6 @@ export const AddExcludedContactModal: React.FC<
   const addingManyContacts = contactIds.length > 1;
 
   const handleConfirm = async () => {
-    setMutating(true);
-
     if (!contactIds.length) {
       enqueueSnackbar(t('Failed to add contact(s) to appeal'), {
         variant: 'error',
@@ -71,9 +67,7 @@ export const AddExcludedContactModal: React.FC<
           },
         },
       },
-      update: () => {
-        contactsQueryResult.refetch();
-      },
+      refetchQueries: ['Contacts'],
       onCompleted: () => {
         enqueueSnackbar(
           addingManyContacts
@@ -96,7 +90,6 @@ export const AddExcludedContactModal: React.FC<
         );
       },
     });
-    setMutating(false);
   };
 
   const title = addingManyContacts ? t('Add Contacts') : t('Add Contact');

diff --git a/src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.test.tsx b/src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.test.tsx
@@ -11,8 +11,11 @@ import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import { AppealsContext } from '../../AppealsContext/AppealsContext';
-import { AppealContactInfoFragment } from '../../AppealsContext/contacts.generated';
+import {
+  AppealsContext,
+  AppealsType,
+  TableViewModeEnum,
+} from '../../AppealsContext/AppealsContext';
 import { DeleteAppealContactModal } from './DeleteAppealContactModal';
 
 const mockEnqueue = jest.fn();
@@ -37,13 +40,12 @@ const router = {
 };
 const handleClose = jest.fn();
 const mutationSpy = jest.fn();
-const refetch = jest.fn();
 
 interface ComponentsProps {
-  contact?: AppealContactInfoFragment;
+  viewMode?: TableViewModeEnum;
 }
 
-const Components = ({}: ComponentsProps) => {
+const Components = ({ viewMode = TableViewModeEnum.List }: ComponentsProps) => {
   let requestCount = 0;
   return (
     <I18nextProvider i18n={i18n}>
@@ -123,14 +125,14 @@ const Components = ({}: ComponentsProps) => {
                 >
                   <AppealsWrapper>
                     <AppealsContext.Provider
-                      value={{
-                        accountListId,
-                        appealId: appealId,
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        contactsQueryResult: { refetch },
-                        filterPanelOpen: false,
-                      }}
+                      value={
+                        {
+                          accountListId,
+                          appealId: appealId,
+                          filterPanelOpen: false,
+                          viewMode,
+                        } as unknown as AppealsType
+                      }
                     >
                       <DeleteAppealContactModal
                         handleClose={handleClose}
@@ -151,7 +153,6 @@ const Components = ({}: ComponentsProps) => {
 describe('DeleteAppealContactModal', () => {
   beforeEach(() => {
     handleClose.mockClear();
-    refetch.mockClear();
   });
   it('default', () => {
     const { getByRole } = render(<Components />);

diff --git a/src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.tsx b/src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.tsx
@@ -42,13 +42,13 @@ export const DeleteAppealContactModal: React.FC<
   const { appealId, viewMode } = React.useContext(
     AppealsContext,
   ) as AppealsType;
-  const [deleteAppealContact] = useDeleteAppealContactMutation();
+  const [deleteAppealContact, { loading: mutating }] =
+    useDeleteAppealContactMutation();
   const { data, fetchMore } = useAppealContactsQuery({
     variables: {
       appealId: appealId ?? '',
     },
   });
-  const [mutating, setMutating] = useState(false);
   const [loading, setLoading] = useState(false);
   const [appealContactsIds, setAppealContactsIds] = useState<
     AppealContactsInfoFragment[]
@@ -114,7 +114,6 @@ export const DeleteAppealContactModal: React.FC<
         });
       },
     });
-    setMutating(false);
   };
 
   const onClickDecline = () => {

diff --git a/src/components/Tool/Appeal/Modals/DeletePledgeModal/DeletePledgeModal.test.tsx b/src/components/Tool/Appeal/Modals/DeletePledgeModal/DeletePledgeModal.test.tsx
@@ -12,7 +12,11 @@ import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals
 import { PledgeStatusEnum } from 'src/graphql/types.generated';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import { AppealsContext } from '../../AppealsContext/AppealsContext';
+import {
+  AppealsContext,
+  AppealsType,
+  TableViewModeEnum,
+} from '../../AppealsContext/AppealsContext';
 import { DeletePledgeModal } from './DeletePledgeModal';
 
 const accountListId = 'abc';
@@ -23,7 +27,6 @@ const router = {
 };
 const handleClose = jest.fn();
 const mutationSpy = jest.fn();
-const refetch = jest.fn();
 const mockEnqueue = jest.fn();
 jest.mock('notistack', () => ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -46,8 +49,10 @@ const pledge = {
   expectedDate: '2020-01-01',
   status: PledgeStatusEnum.NotReceived,
 };
-
-const Components = () => (
+interface ComponentsProps {
+  viewMode?: TableViewModeEnum;
+}
+const Components = ({ viewMode = TableViewModeEnum.List }: ComponentsProps) => (
   <I18nextProvider i18n={i18n}>
     <LocalizationProvider dateAdapter={AdapterLuxon}>
       <SnackbarProvider>
@@ -56,13 +61,13 @@ const Components = () => (
             <GqlMockedProvider onCall={mutationSpy}>
               <AppealsWrapper>
                 <AppealsContext.Provider
-                  value={{
-                    accountListId,
-                    appealId: appealId,
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    contactsQueryResult: { refetch },
-                  }}
+                  value={
+                    {
+                      accountListId,
+                      appealId: appealId,
+                      viewMode,
+                    } as unknown as AppealsType
+                  }
                 >
                   <DeletePledgeModal
                     pledge={pledge}
@@ -81,7 +86,6 @@ const Components = () => (
 describe('DeletePledgeModal', () => {
   beforeEach(() => {
     handleClose.mockClear();
-    refetch.mockClear();
   });
   it('default', async () => {
     const { getByRole } = render(<Components />);
@@ -128,7 +132,5 @@ describe('DeletePledgeModal', () => {
         },
       });
     });
-
-    expect(refetch).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/Tool/Appeal/Modals/DeletePledgeModal/DeletePledgeModal.tsx b/src/components/Tool/Appeal/Modals/DeletePledgeModal/DeletePledgeModal.tsx
@@ -39,9 +39,7 @@ export const DeletePledgeModal: React.FC<DeletePledgeModalProps> = ({
   const { enqueueSnackbar } = useSnackbar();
   const [deleteAccountListPledge, { loading }] =
     useDeleteAccountListPledgeMutation();
-  const { contactsQueryResult, viewMode } = useContext(
-    AppealsContext,
-  ) as AppealsType;
+  const { viewMode } = useContext(AppealsContext) as AppealsType;
 
   const handleConfirm = async () => {
     await deleteAccountListPledge({
@@ -50,9 +48,7 @@ export const DeletePledgeModal: React.FC<DeletePledgeModalProps> = ({
           id: pledge.id,
         },
       },
-      update: () => {
-        contactsQueryResult.refetch();
-      },
+      refetchQueries: ['Contacts', 'Appeal'],
       onCompleted: () => {
         enqueueSnackbar(t('Successfully removed commitment from appeal'), {
           variant: 'success',