Merge pull request #1313 from CruGlobal/MPDX-8449-delete-appeal-contact

MPDX-8449 - deleteAppealContact mutation FE fixes

Author: wjames111

src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContact.graphql

@@ -3,22 +3,3 @@ mutation DeleteAppealContact($input: AppealContactDeleteMutationInput!) {
     id
   }
 }
-
-query AppealContacts($appealId: ID!, $after: String) {
-  appealContacts(appealId: $appealId, first: 50, after: $after) {
-    nodes {
-      ...AppealContactsInfo
-    }
-    pageInfo {
-      hasNextPage
-      endCursor
-    }
-  }
-}
-
-fragment AppealContactsInfo on AppealContact {
-  id
-  contact {
-    id
-  }
-}

src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.test.tsx

@@ -188,25 +188,9 @@ describe('DeleteAppealContactModal', () => {
     expect(handleClose).toHaveBeenCalledTimes(2);
   });
 
-  it('fetches all the appealContacts and matches up the correct ID to send to the API', async () => {
+  it('should successfully delete a contact from an appeal', async () => {
     const { getByRole } = render(<Components />);
 
-    // Call AppealContacts 3 times getting all contacts.
-    await waitFor(() =>
-      expect(mutationSpy).toHaveGraphqlOperation('AppealContacts', {
-        after: 'endCursor2',
-        appealId: 'appealId',
-      }),
-    );
-    expect(mutationSpy).toHaveGraphqlOperation('AppealContacts', {
-      after: null,
-      appealId: 'appealId',
-    });
-    expect(mutationSpy).toHaveGraphqlOperation('AppealContacts', {
-      after: 'endCursor1',
-      appealId: 'appealId',
-    });
-
     userEvent.click(getByRole('button', { name: 'Yes' }));
 
     await waitFor(() => {
@@ -221,7 +205,8 @@ describe('DeleteAppealContactModal', () => {
     await waitFor(() => {
       expect(mutationSpy).toHaveGraphqlOperation('DeleteAppealContact', {
         input: {
-          id: 'appealContactId',
+          contactId: 'contact-1',
+          appealId: 'appealId',
         },
       });
     });

src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import {
   Box,
   CircularProgress,
@@ -19,11 +19,7 @@ import {
   AppealsType,
   TableViewModeEnum,
 } from '../../AppealsContext/AppealsContext';
-import {
-  AppealContactsInfoFragment,
-  useAppealContactsQuery,
-  useDeleteAppealContactMutation,
-} from './DeleteAppealContact.generated';
+import { useDeleteAppealContactMutation } from './DeleteAppealContact.generated';
 
 const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({
   margin: theme.spacing(0, 1, 0, 0),
@@ -44,48 +40,9 @@ export const DeleteAppealContactModal: React.FC<
   ) as AppealsType;
   const [deleteAppealContact, { loading: mutating }] =
     useDeleteAppealContactMutation();
-  const { data, fetchMore } = useAppealContactsQuery({
-    variables: {
-      appealId: appealId ?? '',
-    },
-  });
-  const [loading, setLoading] = useState(false);
-  const [appealContactsIds, setAppealContactsIds] = useState<
-    AppealContactsInfoFragment[]
-  >([]);
-
-  const loadAllAppealContacts = async () => {
-    let allContacts = data?.appealContacts.nodes ?? [];
-    let hasNextPage = true;
-    let cursor: string | null = null;
-
-    while (hasNextPage) {
-      const response = await fetchMore({
-        variables: {
-          after: cursor,
-        },
-      });
-
-      const newContacts = response.data.appealContacts.nodes;
-      allContacts = [...allContacts, ...newContacts];
-      hasNextPage = response.data.appealContacts.pageInfo.hasNextPage;
-      cursor = response.data.appealContacts.pageInfo.endCursor ?? null;
-    }
-
-    setAppealContactsIds(allContacts);
-    setLoading(false);
-    return allContacts;
-  };
-
-  useEffect(() => {
-    loadAllAppealContacts();
-  }, []);
 
   const handleRemoveContact = async () => {
-    const appealContactId = appealContactsIds.find(
-      (appealContact) => appealContact.contact.id === contactId,
-    )?.id;
-    if (!appealContactId) {
+    if (!appealId) {
       enqueueSnackbar('Error while removing contact from appeal.', {
         variant: 'error',
       });
@@ -94,7 +51,8 @@ export const DeleteAppealContactModal: React.FC<
     await deleteAppealContact({
       variables: {
         input: {
-          id: appealContactId,
+          contactId,
+          appealId,
         },
       },
       update: (cache) => {
@@ -136,13 +94,13 @@ export const DeleteAppealContactModal: React.FC<
         )}
       </DialogContent>
       <DialogActions>
-        <CancelButton onClick={onClickDecline} disabled={mutating || loading}>
+        <CancelButton onClick={onClickDecline} disabled={mutating}>
           {t('No')}
         </CancelButton>
         <SubmitButton
           type="button"
           onClick={handleRemoveContact}
-          disabled={mutating || loading}
+          disabled={mutating}
         >
           {t('Yes')}
         </SubmitButton>