1import React, { useState, useRef } from 'react';
  2
  3import Button from '@material-ui/core/Button';
  4import Paper from '@material-ui/core/Paper';
  5import { makeStyles, Theme } from '@material-ui/core/styles';
  6
  7import CommentInput from '../../components/CommentInput/CommentInput';
  8import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton';
  9import CloseBugWithCommentButton from 'src/components/CloseBugWithCommentButton/CloseBugWithCommentButton';
 10import ReopenBugButton from 'src/components/ReopenBugButton/ReopenBugButton';
 11
 12import { BugFragment } from './Bug.generated';
 13import { useAddCommentMutation } from './CommentForm.generated';
 14import { TimelineDocument } from './TimelineQuery.generated';
 15
 16type StyleProps = { loading: boolean };
 17const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 18  container: {
 19    padding: theme.spacing(0, 2, 2, 2),
 20  },
 21  actions: {
 22    display: 'flex',
 23    gap: '1em',
 24    justifyContent: 'flex-end',
 25  },
 26  greenButton: {
 27    marginLeft: '8px',
 28    backgroundColor: theme.palette.success.main,
 29    color: theme.palette.success.contrastText,
 30    '&:hover': {
 31      backgroundColor: theme.palette.success.dark,
 32      color: theme.palette.primary.contrastText,
 33    },
 34  },
 35}));
 36
 37type Props = {
 38  bug: BugFragment;
 39};
 40
 41function CommentForm({ bug }: Props) {
 42  const [addComment, { loading }] = useAddCommentMutation();
 43  const [issueComment, setIssueComment] = useState('');
 44  const [inputProp, setInputProp] = useState<any>('');
 45  const classes = useStyles({ loading });
 46  const form = useRef<HTMLFormElement>(null);
 47
 48  const submit = () => {
 49    addComment({
 50      variables: {
 51        input: {
 52          prefix: bug.id,
 53          message: issueComment,
 54        },
 55      },
 56      refetchQueries: [
 57        // TODO: update the cache instead of refetching
 58        {
 59          query: TimelineDocument,
 60          variables: {
 61            id: bug.id,
 62            first: 100,
 63          },
 64        },
 65      ],
 66      awaitRefetchQueries: true,
 67    }).then(() => resetForm());
 68  };
 69
 70  function resetForm() {
 71    setInputProp({
 72      value: '',
 73    });
 74  }
 75
 76  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 77    e.preventDefault();
 78    if (issueComment.length > 0) submit();
 79  };
 80
 81  function getBugStatusButton() {
 82    if (bug.status === 'OPEN' && issueComment.length > 0) {
 83      return <CloseBugWithCommentButton bug={bug} comment={issueComment} />;
 84    }
 85    if (bug.status === 'OPEN') {
 86      return <CloseBugButton bug={bug} />;
 87    }
 88    return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />;
 89  }
 90
 91  return (
 92    <Paper className={classes.container}>
 93      <form onSubmit={handleSubmit} ref={form}>
 94        <CommentInput
 95          inputProps={inputProp}
 96          loading={loading}
 97          onChange={(comment: string) => setIssueComment(comment)}
 98        />
 99        <div className={classes.actions}>
100          {getBugStatusButton()}
101          <Button
102            className={classes.greenButton}
103            variant="contained"
104            color="primary"
105            type="submit"
106            disabled={loading || issueComment.length === 0}
107          >
108            Comment
109          </Button>
110        </div>
111      </form>
112    </Paper>
113  );
114}
115
116export default CommentForm;