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