added onSubmit function and started on cacheing new data

src/components/Tool/FixEmailAddresses/AddEmailAddress.graphql

@@ -3,7 +3,7 @@ mutation EmailAddresses($input: PersonUpdateMutationInput!) {
     person {
       emailAddresses {
         nodes {
-          email
+          ...PersonEmailAddress
         }
       }
     }

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<GetInvalidEmailAddressesQuery>(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 (
     <Formik
-      initialValues={{
-        email: initialEmail.email,
-        isPrimary: initialEmail.isPrimary,
-        updatedAt: '',
-        source: '',
-        personId: 'test',
-        isValid: false,
-      }}
+      initialValues={initialEmail}
       validationSchema={validationSchema}
       onSubmit={onSubmit}
     >
-      {({ values, handleChange, isValid }) => (
+      {({ values: { email }, handleChange, isValid }) => (
         <Form>
           <RowWrapper>
             <Grid container>
@@ -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)}
               />
               <IconButton
                 type="submit"
                 color="primary"
-                disabled={!isValid || values.email === ''}
-                data-testid={`addButton-${initialEmail.personId}`}
-                // onClick={() => handleButtonClick(values.email)}
+                disabled={!isValid || email === ''}
+                data-testid={`addButton-${personId}`}
               >
                 <AddIcon fontSize="large" />
               </IconButton>
@@ -411,7 +466,11 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
                       {
                         //index will need to be mapped to the correct personId
                       }
-                      <EmailValidationForm handleAdd={handleAdd} index={0} />
+                      <EmailValidationForm
+                        handleAdd={handleAdd}
+                        index={0}
+                        personId={personId}
+                      />
                     </BoxWithResponsiveBorder>
                   </RowWrapper>
                 </Grid>

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 = {

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<FixEmailAddressesProps> = ({
     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({

src/components/Tool/FixEmailAddresses/GetPersonIds.graphql

@@ -0,0 +1,7 @@
+query People($accountListId: ID!, $peopleFilter: PersonFilterSetInput) {
+  people(accountListId: $accountListId, peopleFilter: $peopleFilter) {
+    nodes {
+      id
+    }
+  }
+}