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