Skip to content

Instantly share code, notes, and snippets.

@dimitrisdovinos
Last active May 8, 2020 14:03
Show Gist options
  • Save dimitrisdovinos/d091bec797d408caadb90a7473b827e8 to your computer and use it in GitHub Desktop.
Save dimitrisdovinos/d091bec797d408caadb90a7473b827e8 to your computer and use it in GitHub Desktop.
import React, { useState } from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import axios from 'axios';
import {
Formik, Form, Field, ErrorMessage,
} from 'formik';
import * as Yup from 'yup';
// import { DisplayFormikState } from './formikHelper';
const styles = {
};
const contactFormEndpoint = process.env.REACT_APP_CONTACT_ENDPOINT;
function Contact(props) {
const { classes } = props;
const [open, setOpen] = useState(false);
const [isSubmitionCompleted, setSubmitionCompleted] = useState(false);
function handleClose() {
setOpen(false);
}
function handleClickOpen() {
setSubmitionCompleted(false);
setOpen(true);
}
return (
<React.Fragment>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Contact us!
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
{!isSubmitionCompleted &&
<React.Fragment>
<DialogTitle id="form-dialog-title">Contact</DialogTitle>
<DialogContent>
<DialogContentText>
Send us a comment!
</DialogContentText>
<Formik
initialValues={{ email: '', name: '', comment: '' }}
onSubmit={(values, { setSubmitting }) => {
setSubmitting(true);
axios.post(contactFormEndpoint,
values,
{
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
}
},
).then((resp) => {
setSubmitionCompleted(true);
}
);
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email()
.required('Required'),
name: Yup.string()
.required('Required'),
comment: Yup.string()
.required('Required'),
})}
>
{(props) => {
const {
values,
touched,
errors,
dirty,
isSubmitting,
handleChange,
handleBlur,
handleSubmit,
handleReset,
} = props;
return (
<form onSubmit={handleSubmit}>
<TextField
label="name"
name="name"
className={classes.textField}
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
helperText={(errors.name && touched.name) && errors.name}
margin="normal"
/>
<TextField
error={errors.email && touched.email}
label="email"
name="email"
className={classes.textField}
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
helperText={(errors.email && touched.email) && errors.email}
margin="normal"
/>
<TextField
label="comment"
name="comment"
className={classes.textField}
value={values.comment}
onChange={handleChange}
onBlur={handleBlur}
helperText={(errors.comment && touched.comment) && errors.comment}
margin="normal"
/>
<DialogActions>
<Button
type="button"
className="outline"
onClick={handleReset}
disabled={!dirty || isSubmitting}
>
Reset
</Button>
<Button type="submit" disabled={isSubmitting}>
Submit
</Button>
{/* <DisplayFormikState {...props} /> */}
</DialogActions>
</form>
);
}}
</Formik>
</DialogContent>
</React.Fragment>
}
{isSubmitionCompleted &&
<React.Fragment>
<DialogTitle id="form-dialog-title">Thanks!</DialogTitle>
<DialogContent>
<DialogContentText>
Thanks
</DialogContentText>
<DialogActions>
<Button
type="button"
className="outline"
onClick={handleClose}
>
Back to app
</Button>
{/* <DisplayFormikState {...props} /> */}
</DialogActions>
</DialogContent>
</React.Fragment>}
</Dialog>
</React.Fragment >
);
}
export default withStyles(styles)(Contact);
@ottob
Copy link

ottob commented May 8, 2020

Thanks, this was very helpful. One small thing though, I got an error with this code in my TypeScript project:

<TextField
    error={errors.email && touched.email}

since errors.email is a string it can't be assigned to the error boolean. I had to change this to:

<TextField
    error={!!errors.email && touched.email}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment