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