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