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