From db1a35a1894bbce4863fd15389ed812f031ab703 Mon Sep 17 00:00:00 2001 From: Collin Pastika Date: Tue, 9 Jul 2024 15:19:53 -0400 Subject: [PATCH] added onSubmit function and started on cacheing new data --- .../FixEmailAddresses/AddEmailAddress.graphql | 2 +- .../FixEmailAddressPerson.tsx | 101 ++++++++++++++---- .../FixEmailAddresses.test.tsx | 2 +- .../FixEmailAddresses/FixEmailAddresses.tsx | 4 +- .../FixEmailAddresses/GetPersonIds.graphql | 7 ++ ....graphql => InvalidEmailAddresses.graphql} | 0 6 files changed, 91 insertions(+), 25 deletions(-) create mode 100644 src/components/Tool/FixEmailAddresses/GetPersonIds.graphql rename src/components/Tool/FixEmailAddresses/{GetInvalidEmailAddresses.graphql => InvalidEmailAddresses.graphql} (100%) diff --git a/src/components/Tool/FixEmailAddresses/AddEmailAddress.graphql b/src/components/Tool/FixEmailAddresses/AddEmailAddress.graphql index e6fabd887c..c0eedcfce0 100644 --- a/src/components/Tool/FixEmailAddresses/AddEmailAddress.graphql +++ b/src/components/Tool/FixEmailAddresses/AddEmailAddress.graphql @@ -3,7 +3,7 @@ mutation EmailAddresses($input: PersonUpdateMutationInput!) { person { emailAddresses { nodes { - email + ...PersonEmailAddress } } } diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.tsx index a77b578b47..b2c845d6dd 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.tsx +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson.tsx @@ -23,12 +23,18 @@ import { makeStyles } from 'tss-react/mui'; import * as Yup from 'yup'; import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper'; import { PersonEmailAddressInput } from 'src/graphql/types.generated'; +import { useAccountListId } from 'src/hooks/useAccountListId'; import { useLocale } from 'src/hooks/useLocale'; import { dateFormatShort } from 'src/lib/intlFormat'; import theme from '../../../theme'; import { ConfirmButtonIcon } from '../ConfirmButtonIcon'; +import { useEmailAddressesMutation } from './AddEmailAddress.generated'; import { EmailAddressData } from './FixEmailAddresses'; -// import { useEmailAddressesMutation } from './FixEmailAddresses.generated'; +import { + GetInvalidEmailAddressesDocument, + GetInvalidEmailAddressesQuery, +} from './InvalidEmailAddresses.generated'; +// import { contactId } from './FixEmailAddressesMocks'; const ContactInputField = styled(TextField, { shouldForwardProp: (prop) => prop !== 'destroyed', @@ -102,7 +108,6 @@ const useStyles = makeStyles()((theme: Theme) => ({ height: theme.spacing(7), }, })); - interface FixEmailAddressPersonProps { name: string; emailAddress?: EmailAddressData[]; @@ -132,12 +137,10 @@ interface EmailValidationFormEmail { interface EmailValidationFormProps { emails?: EmailValidationFormEmail; index: number; - personId?: string; - handleAdd?: (personId: string, email: string) => void; + personId: string; + handleAdd: (personId: string, accountListId: string) => void; } -const onSubmit = () => {}; - // const [handleAdd] = useEmailAddressesMutation(); // const email = ''; @@ -157,8 +160,11 @@ const EmailValidationForm = ({ personId: '', isValid: false, }, + personId, }: EmailValidationFormProps) => { const { enqueueSnackbar } = useSnackbar(); + const accountListId = useAccountListId(); + const [emailAddressesMutation] = useEmailAddressesMutation(); const validationSchema = Yup.object().shape({ email: Yup.string().email(' ').required(' '), @@ -173,6 +179,63 @@ const EmailValidationForm = ({ } }; + const onSubmit = (attributes: { email: string }) => { + emailAddressesMutation({ + variables: { + input: { + attributes: { + id: personId, + emailAddresses: [ + { + email: attributes.email, + }, + ], + }, + accountListId: accountListId || '', + }, + }, + update: (cache, dataFromServer) => { + const query = { + query: GetInvalidEmailAddressesDocument, + variables: { + accountListId: accountListId, + }, + }; + const dataFromCache = + cache.readQuery(query); + + if (dataFromCache) { + const peopleWithNewEmail = dataFromCache.people.nodes.map( + (person) => { + if ( + person.id === personId && + dataFromServer.data?.updatePerson?.person.emailAddresses + ) { + return { + ...person, + emailAddresses: + dataFromServer.data?.updatePerson?.person.emailAddresses, + }; + } else { + return person; + } + }, + ); + + const data = { + ...dataFromCache, + people: { + ...dataFromCache.people, + nodes: peopleWithNewEmail, + }, + }; + + cache.writeQuery({ ...query, data }); + } + }, + }); + }; + //TODO: Add button functionality to add email using graphql mutation // const handleButtonClick = (email) => { @@ -181,18 +244,11 @@ const EmailValidationForm = ({ return ( - {({ values, handleChange, isValid }) => ( + {({ values: { email }, handleChange, isValid }) => (
@@ -201,16 +257,15 @@ const EmailValidationForm = ({ label={t('New Email Address')} type="email" name="email" - value={values.email} + value={email} onChange={handleChange} - onBlur={() => handleValidation(isValid, values.email)} + onBlur={() => handleValidation(isValid, email)} /> handleButtonClick(values.email)} + disabled={!isValid || email === ''} + data-testid={`addButton-${personId}`} > @@ -411,7 +466,11 @@ export const FixEmailAddressPerson: React.FC = ({ { //index will need to be mapped to the correct personId } - + diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx index b68904534f..74b90d59cc 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx @@ -12,7 +12,7 @@ import { contactId, mockInvalidEmailAddressesResponse, } from './FixEmailAddressesMocks'; -import { GetInvalidEmailAddressesQuery } from './GetInvalidEmailAddresses.generated'; +import { GetInvalidEmailAddressesQuery } from './InvalidEmailAddresses.generated'; const accountListId = 'test121'; const router = { diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx index 2eac152914..0bf94b91cc 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx @@ -18,7 +18,7 @@ import NoData from '../NoData'; import { StyledInput } from '../StyledInput'; import DeleteModal from './DeleteModal'; import { FixEmailAddressPerson } from './FixEmailAddressPerson'; -import { useGetInvalidEmailAddressesQuery } from './GetInvalidEmailAddresses.generated'; +import { useGetInvalidEmailAddressesQuery } from './InvalidEmailAddresses.generated'; const Container = styled(Box)(() => ({ padding: theme.spacing(3), @@ -206,7 +206,7 @@ export const FixEmailAddresses: React.FC = ({ handleDeleteModalClose(); }; - // Add a new email address to the state + // // Add a new email address to the state const handleAdd = (personId: string, email: string): void => { const temp = { ...dataState }; temp[personId].emailAddresses.push({ diff --git a/src/components/Tool/FixEmailAddresses/GetPersonIds.graphql b/src/components/Tool/FixEmailAddresses/GetPersonIds.graphql new file mode 100644 index 0000000000..4d736d353a --- /dev/null +++ b/src/components/Tool/FixEmailAddresses/GetPersonIds.graphql @@ -0,0 +1,7 @@ +query People($accountListId: ID!, $peopleFilter: PersonFilterSetInput) { + people(accountListId: $accountListId, peopleFilter: $peopleFilter) { + nodes { + id + } + } +} diff --git a/src/components/Tool/FixEmailAddresses/GetInvalidEmailAddresses.graphql b/src/components/Tool/FixEmailAddresses/InvalidEmailAddresses.graphql similarity index 100% rename from src/components/Tool/FixEmailAddresses/GetInvalidEmailAddresses.graphql rename to src/components/Tool/FixEmailAddresses/InvalidEmailAddresses.graphql