diff options
author | eug-vs <eug-vs@keemail.me> | 2020-08-10 00:28:39 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2020-08-10 00:28:39 +0300 |
commit | 7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e (patch) | |
tree | 8a71d8dd4bf89f09f14aee2636f519572e95f891 /src/containers/HomePage/ReviewForm.tsx | |
parent | dfa6f0a8d1415539e1ff6a3ca848627bbe87b470 (diff) | |
download | which-ui-7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e.tar.gz |
refactor: move pages -> containers
Diffstat (limited to 'src/containers/HomePage/ReviewForm.tsx')
-rw-r--r-- | src/containers/HomePage/ReviewForm.tsx | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/src/containers/HomePage/ReviewForm.tsx b/src/containers/HomePage/ReviewForm.tsx new file mode 100644 index 0000000..b626ce2 --- /dev/null +++ b/src/containers/HomePage/ReviewForm.tsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import { TextField, Button } from '@material-ui/core'; +import { Rating } from '@material-ui/lab'; +import { useSnackbar } from 'notistack'; + +import { post } from '../../requests'; + +const version = 'v1.0.0'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + flexDirection: 'column' + }, + textField: { + margin: theme.spacing(2, 0) + } +})); + +const ReviewForm: React.FC = () => { + const [contents, setContents] = useState<string>(''); + const [score, setScore] = useState<number>(0); + const classes = useStyles(); + const history = useHistory(); + const { enqueueSnackbar } = useSnackbar(); + + const handleSubmit = (): void => { + if (score) { + post('/feedback', { contents, score, version }).then(() => { + enqueueSnackbar('Your feedback has been submitted!', { + variant: 'success' + }); + history.push('/feed'); + }); + } + }; + + const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { + setContents(event.target?.value || ''); + }; + + const handleChangeRating = (event: React.ChangeEvent<Record<string, unknown>>, newScore: number | null): void => { + setScore(newScore || 0); + }; + + return ( + <div className={classes.root}> + <Rating value={score} onChange={handleChangeRating} size="large" /> + <TextField + value={contents} + onChange={handleChange} + label="Feedback" + variant="outlined" + className={classes.textField} + rows={4} + multiline + /> + <div> + <Button + variant="contained" + color="primary" + size="large" + onClick={handleSubmit} + > + submit + </Button> + </div> + </div> + ); +}; + +export default ReviewForm; |