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