1import React from 'react';
 2
 3import Button from '@material-ui/core/Button';
 4import { makeStyles, Theme } from '@material-ui/core/styles';
 5import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 6
 7import { BugFragment } from 'src/pages/bug/Bug.generated';
 8import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
 9
10import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
11
12const useStyles = makeStyles((theme: Theme) => ({
13  closeIssueIcon: {
14    color: theme.palette.secondary.dark,
15    paddingTop: '0.1rem',
16  },
17}));
18
19interface Props {
20  bug: BugFragment;
21  comment: string;
22}
23
24function CloseBugWithCommentButton({ bug, comment }: Props) {
25  const [
26    addCommentAndCloseBug,
27    { loading, error },
28  ] = useAddCommentAndCloseBugMutation();
29  const classes = useStyles();
30
31  function addCommentAndCloseBugAction() {
32    addCommentAndCloseBug({
33      variables: {
34        input: {
35          prefix: bug.id,
36          message: comment,
37        },
38      },
39      refetchQueries: [
40        // TODO: update the cache instead of refetching
41        {
42          query: TimelineDocument,
43          variables: {
44            id: bug.id,
45            first: 100,
46          },
47        },
48      ],
49      awaitRefetchQueries: true,
50    });
51  }
52
53  if (loading) return <div>Loading...</div>;
54  if (error) return <div>Error</div>;
55
56  return (
57    <div>
58      <Button
59        variant="contained"
60        onClick={() => addCommentAndCloseBugAction()}
61        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
62      >
63        Close bug with comment
64      </Button>
65    </div>
66  );
67}
68
69export default CloseBugWithCommentButton;