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