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