Skip to content

MPDX-8449 - deleteAppealContact mutation FE fixes #1313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

MPDX-8449 - deleteAppealContact mutation FE fixes #1313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e5a3d89
Update mutation variables to use contactId and appealId.
wjames111 May 13, 2025
656f806
Remove unneaded code.
wjames111 May 13, 2025
d1e792b
Fix broken test.
wjames111 May 13, 2025
9802cab
Remove AppealContacts Query and Fragment as they are no longer needed.
dr-bizz May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 0 additions & 19 deletions src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContact.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
21 changes: 3 additions & 18 deletions src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -221,7 +205,8 @@ describe('DeleteAppealContactModal', () => {
await waitFor(() => {
expect(mutationSpy).toHaveGraphqlOperation('DeleteAppealContact', {
input: {
id: 'appealContactId',
contactId: 'contact-1',
appealId: 'appealId',
},
});
});
Expand Down
56 changes: 7 additions & 49 deletions src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import {
Box,
CircularProgress,
Expand All @@ -19,11 +19,7 @@
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),
Expand All @@ -44,48 +40,9 @@
) 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',
});
Expand All @@ -94,7 +51,8 @@
await deleteAppealContact({
variables: {
input: {
id: appealContactId,
contactId,

Check failure on line 54 in src/components/Tool/Appeal/Modals/DeleteAppealContact/DeleteAppealContactModal.tsx

View workflow job for this annotation

GitHub Actions / typescript 

Object literal may only specify known properties, and 'contactId' does not exist in type 'AppealContactDeleteMutationInput'.
appealId,
},
},
update: (cache) => {
Expand Down Expand Up @@ -136,13 +94,13 @@
)}
</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>
Expand Down
Loading