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