Я использую этот код imy, но вместо жесткого кодирования d@d.com я хочу использовать переменную email. Я пытался $(email) & ${email}, но это не сработало.
if(errorMessage=='Key (email)=(d@d.com) already exists.')
Редактировать:
export default function AddUserPage() {
const [state, setState] = useState({
firstName: '',
lastName: '',
email: '',
password: '',
phoneNumber: '',
loggedIn: false,
});
const [submitted, setSubmitted] = useState(false);
const [added, setAdded] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
function StatusMessage() {
if (added) {
console.log('User Added');
return (
<Alert className="alerts" severity="success">
User Added
</Alert>
);
} else {
console.log('Really');
if (errorMessage == `GraphQL error: Key (email)=${email} already exists.`) {
return (
<Alert className="alerts" severity="error">
Email Already Exists In Database
</Alert>
);
} else {
return (
<Alert className="alerts" severity="error">
Not Added
</Alert>
);
}
}
}
// useEffect(() => {
// if(added){
// StatusMessage();
// }
// },[added] );
function submitForm(AddUserMutation: any) {
setSubmitted(true);
const { firstName, lastName, email, password, phoneNumber } = state;
if (firstName && lastName && email && password && phoneNumber) {
AddUserMutation({
variables: {
firstName: firstName,
lastName: lastName,
email: email,
password: password,
phoneNumber: phoneNumber,
},
})
.then(({ data }: any) => {
setAdded(true);
console.log('ID: ', data.createUser.id);
})
.catch((error: { message: string }) => {
console.log('Error msg:' + error.message);
setErrorMessage(error.message);
});
// .catch(console.log)
}
}
return (
<Mutation mutation={AddUserMutation}>
{(AddUserMutation: any) => (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<Formik
initialValues={{ firstName: '', lastName: '', email: '', password: '', phoneNumber: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}
>
{props => {
const {
values: { firstName, lastName, email, password, phoneNumber },
errors,
touched,
handleChange,
isValid,
setFieldTouched,
} = props;
const change = (name: string, e: any) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
setState(prevState => ({ ...prevState, [name]: e.target.value }));
};
return (
<div className="main-content">
<form
style={{ width: '100%' }}
onSubmit={e => {
e.preventDefault();
submitForm(AddUserMutation);
StatusMessage();
}}
>
<div>
<TextField
variant="outlined"
margin="normal"
id="firstName"
name="firstName"
helperText={touched.firstName ? errors.firstName : ''}
error={touched.firstName && Boolean(errors.firstName)}
label="First Name"
value={firstName}
onChange={change.bind(null, 'firstName')}
/>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="lastName"
name="lastName"
helperText={touched.lastName ? errors.lastName : ''}
error={touched.lastName && Boolean(errors.lastName)}
label="Last Name"
value={lastName}
onChange={change.bind(null, 'lastName')}
/>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="email"
name="email"
helperText={touched.email ? errors.email : ''}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, 'email')}
/>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="password"
name="password"
type="password"
helperText={touched.password ? errors.password : ''}
error={touched.password && Boolean(errors.password)}
label="Password"
value={password}
onChange={change.bind(null, 'password')}
/>{' '}
<VisibilityIcon></VisibilityIcon>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="phoneNumber"
name="phoneNumber"
helperText={touched.phoneNumber ? errors.phoneNumber : ''}
error={touched.phoneNumber && Boolean(errors.phoneNumber)}
label="Phone Number"
value={phoneNumber}
onChange={change.bind(null, 'phoneNumber')}
/>
<br></br>
<Button
type="submit"
disabled={!isValid || !email || !password}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}
>
Add User
</Button>
</div>
</form>
<br></br>
{submitted && StatusMessage()}
{/* <Typography>Message: {errorMessage}</Typography> */}
</div>
);
}}
</Formik>
</div>
)}
</Mutation>
);
}