1import React, { useState, useRef } from 'react';
2
3import Button from '@material-ui/core/Button';
4import Paper from '@material-ui/core/Paper';
5import { makeStyles, Theme } from '@material-ui/core/styles';
6
7import CommentInput from '../../layout/CommentInput/CommentInput';
8import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton';
9
10import { useAddCommentMutation } from './CommentForm.generated';
11import { TimelineDocument } from './TimelineQuery.generated';
12
13type StyleProps = { loading: boolean };
14const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
15 container: {
16 margin: theme.spacing(2, 0),
17 padding: theme.spacing(0, 2, 2, 2),
18 },
19 textarea: {},
20 tabContent: {
21 margin: theme.spacing(2, 0),
22 },
23 preview: {
24 borderBottom: `solid 3px ${theme.palette.grey['200']}`,
25 minHeight: '5rem',
26 },
27 actions: {
28 display: 'flex',
29 justifyContent: 'flex-end',
30 },
31 greenButton: {
32 marginLeft: '8px',
33 backgroundColor: '#2ea44fd9',
34 color: '#fff',
35 '&:hover': {
36 backgroundColor: '#2ea44f',
37 },
38 },
39}));
40
41type Props = {
42 bugId: string;
43};
44
45function CommentForm({ bugId }: Props) {
46 const [addComment, { loading }] = useAddCommentMutation();
47 const [issueComment, setIssueComment] = useState('');
48 const [inputProp, setInputProp] = useState<any>('');
49 const classes = useStyles({ loading });
50 const form = useRef<HTMLFormElement>(null);
51
52 const submit = () => {
53 addComment({
54 variables: {
55 input: {
56 prefix: bugId,
57 message: issueComment,
58 },
59 },
60 refetchQueries: [
61 // TODO: update the cache instead of refetching
62 {
63 query: TimelineDocument,
64 variables: {
65 id: bugId,
66 first: 100,
67 },
68 },
69 ],
70 awaitRefetchQueries: true,
71 }).then(() => resetForm());
72 };
73
74 function resetForm() {
75 setInputProp({
76 value: '',
77 });
78 }
79
80 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
81 e.preventDefault();
82 if (issueComment.length > 0) submit();
83 };
84
85 return (
86 <Paper className={classes.container}>
87 <form onSubmit={handleSubmit} ref={form}>
88 <CommentInput
89 inputProps={inputProp}
90 loading={loading}
91 onChange={(comment: string) => setIssueComment(comment)}
92 />
93 <div className={classes.actions}>
94 <CloseBugButton bugId={bugId} />
95 <Button
96 className={classes.greenButton}
97 variant="contained"
98 color="primary"
99 type="submit"
100 disabled={loading || issueComment.length === 0}
101 >
102 Comment
103 </Button>
104 </div>
105 </form>
106 </Paper>
107 );
108}
109
110export default CommentForm;