1import Button from '@mui/material/Button';
 2import CircularProgress from '@mui/material/CircularProgress';
 3
 4import { BugFragment } from 'src/pages/bug/Bug.generated';
 5import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
 6
 7import { useAddCommentAndReopenBugMutation } from './ReopenBugWithComment.generated';
 8
 9interface Props {
10  bug: BugFragment;
11  comment: string;
12  postClick?: () => void;
13}
14
15function ReopenBugWithCommentButton({ bug, comment, postClick }: Props) {
16  const [addCommentAndReopenBug, { loading, error }] =
17    useAddCommentAndReopenBugMutation();
18
19  function addCommentAndReopenBugAction() {
20    addCommentAndReopenBug({
21      variables: {
22        input: {
23          prefix: bug.id,
24          message: comment,
25        },
26      },
27      refetchQueries: [
28        // TODO: update the cache instead of refetching
29        {
30          query: TimelineDocument,
31          variables: {
32            id: bug.id,
33            first: 100,
34          },
35        },
36      ],
37      awaitRefetchQueries: true,
38    }).then(() => {
39      if (postClick) {
40        postClick();
41      }
42    });
43  }
44
45  if (loading) return <CircularProgress />;
46  if (error) return <div>Error</div>;
47
48  return (
49    <div>
50      <Button
51        variant="contained"
52        type="submit"
53        onClick={() => addCommentAndReopenBugAction()}
54      >
55        Reopen bug with comment
56      </Button>
57    </div>
58  );
59}
60
61export default ReopenBugWithCommentButton;