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 [addCommentAndCloseBug, { 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    }).then(() => {
51      if (postClick) {
52        postClick();
53      }
54    });
55  }
56
57  if (loading) return <CircularProgress />;
58  if (error) return <div>Error</div>;
59
60  return (
61    <div>
62      <Button
63        variant="contained"
64        onClick={() => addCommentAndCloseBugAction()}
65        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
66      >
67        Close bug with comment
68      </Button>
69    </div>
70  );
71}
72
73export default CloseBugWithCommentButton;