1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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;
|
