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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import React, { useState, useRef } from 'react';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import { makeStyles, Theme } from '@material-ui/core/styles';
import CommentInput from '../../components/CommentInput/CommentInput';
import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton';
import ReopenBugButton from 'src/components/ReopenBugButton/ReopenBugButton';
import { BugFragment } from './Bug.generated';
import { useAddCommentMutation } from './CommentForm.generated';
import { TimelineDocument } from './TimelineQuery.generated';
type StyleProps = { loading: boolean };
const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
container: {
padding: theme.spacing(0, 2, 2, 2),
},
actions: {
display: 'flex',
gap: '1em',
justifyContent: 'flex-end',
},
greenButton: {
marginLeft: '8px',
backgroundColor: theme.palette.success.main,
color: theme.palette.success.contrastText,
'&:hover': {
backgroundColor: theme.palette.success.dark,
color: theme.palette.primary.contrastText,
},
},
}));
type Props = {
bug: BugFragment;
};
function CommentForm({ bug }: Props) {
const [addComment, { loading }] = useAddCommentMutation();
const [issueComment, setIssueComment] = useState('');
const [inputProp, setInputProp] = useState<any>('');
const classes = useStyles({ loading });
const form = useRef<HTMLFormElement>(null);
const submit = () => {
addComment({
variables: {
input: {
prefix: bug.id,
message: issueComment,
},
},
refetchQueries: [
// TODO: update the cache instead of refetching
{
query: TimelineDocument,
variables: {
id: bug.id,
first: 100,
},
},
],
awaitRefetchQueries: true,
}).then(() => resetForm());
};
function resetForm() {
setInputProp({
value: '',
});
}
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (issueComment.length > 0) submit();
};
function getCloseButton() {
return <CloseBugButton bug={bug} disabled={issueComment.length > 0} />;
}
function getReopenButton() {
return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />;
}
return (
<Paper className={classes.container}>
<form onSubmit={handleSubmit} ref={form}>
<CommentInput
inputProps={inputProp}
loading={loading}
onChange={(comment: string) => setIssueComment(comment)}
/>
<div className={classes.actions}>
{bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
<Button
className={classes.greenButton}
variant="contained"
color="primary"
type="submit"
disabled={loading || issueComment.length === 0}
>
Comment
</Button>
</div>
</form>
</Paper>
);
}
export default CommentForm;
|
