import React, { useState, useEffect } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Typography, Button, TextField, Grid } from '@material-ui/core'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import buttonsCss from 'styles/buttons'; import actions from 'redux/actions/actions'; const useStyles = makeStyles(theme => ({ root: { alignItems: 'center', justifyContent: 'center', marginLeft: 'auto', marginRight: 'auto', maxWidth: theme.breakpoints.values.md, padding: '4px 32px', }, additionalComments: { width: '100%', border: '2px solid #f64141', }, continueButton: { ...buttonsCss.buttons, margin: '20px 8px 10px 8px', width: '160px', }, })); const SurveyPage3 = props => { const { setSurveyPage, surveyPage, setSurveyPage3, survey, setCompleted } = props; const { nonPhysical } = survey; const classes = useStyles(); const [openComment, setOpenComment] = useState(nonPhysical.openComment || ''); useEffect(() => { setSurveyPage3({ openComment }); setCompleted(surveyPage); }, [openComment, setSurveyPage3, setCompleted, surveyPage]); const handleopenComment = value => { setOpenComment(value); setSurveyPage3({ openComment: value }); }; const goBack = () => { setSurveyPage(surveyPage - 1); }; const submitButton = () => { setSurveyPage(surveyPage + 1); }; return ( <div className={classes.root}> <Grid container justify="center" spacing={1} className={classes.grid}> <Typography> <b>Q6: Anything other symptoms or comments you want to add?</b> </Typography> <Grid container justify="center" spacing={1} className={classes.grid}> <Grid item xs={12}> <TextField variant="outlined" placeholder="e.g. loss of smell or taste" className={classes.additionalComments} defaultValue={openComment} onChange={e => handleopenComment(e.target.value)} /> </Grid> <Grid item xs={12}> <Button onClick={goBack} variant="outlined" color="secondary" className={classes.continueButton}> BACK </Button> <Button onClick={submitButton} color="secondary" className={classes.continueButton}> CONTINUE </Button> </Grid> </Grid> </Grid> </div> ); }; SurveyPage3.propTypes = { setSurveyPage3: PropTypes.func.isRequired, survey: PropTypes.objectOf(Object).isRequired, setSurveyPage: PropTypes.func.isRequired, surveyPage: PropTypes.number.isRequired, setCompleted: PropTypes.func.isRequired, }; const mapStateToProps = state => { return { survey: state.surveyReducer.survey, surveyPage: state.surveyReducer.surveyPage, }; }; const mapDispatchToProps = dispatch => { return { setSurveyPage3: survey => dispatch(actions.setSurveyPage3(survey)), setSurveyPage: page => dispatch(actions.setSurveyPage(page)), setCompleted: page => dispatch(actions.setCompleted(page)), }; }; export default connect(mapStateToProps, mapDispatchToProps)(SurveyPage3);