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 [addCommentAndReopenBug, { loading, error }] =
19    useAddCommentAndReopenBugMutation();
20
21  function addCommentAndReopenBugAction() {
22    addCommentAndReopenBug({
23      variables: {
24        input: {
25          prefix: bug.id,
26          message: comment,
27        },
28      },
29      refetchQueries: [
30        // TODO: update the cache instead of refetching
31        {
32          query: TimelineDocument,
33          variables: {
34            id: bug.id,
35            first: 100,
36          },
37        },
38      ],
39      awaitRefetchQueries: true,
40    }).then(() => {
41      if (postClick) {
42        postClick();
43      }
44    });
45  }
46
47  if (loading) return <CircularProgress />;
48  if (error) return <div>Error</div>;
49
50  return (
51    <div>
52      <Button
53        variant="contained"
54        type="submit"
55        onClick={() => addCommentAndReopenBugAction()}
56      >
57        Reopen bug with comment
58      </Button>
59    </div>
60  );
61}
62
63export default ReopenBugWithCommentButton;