1import React, { FormEvent, useState } from 'react';
  2import { useHistory } from 'react-router-dom';
  3
  4import { Button, Paper } from '@material-ui/core';
  5import { makeStyles, Theme } from '@material-ui/core/styles';
  6
  7import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
  8import CommentInput from '../../components/CommentInput/CommentInput';
  9
 10import { useNewBugMutation } from './NewBug.generated';
 11
 12/**
 13 * Css in JS styles
 14 */
 15const useStyles = makeStyles((theme: Theme) => ({
 16  main: {
 17    maxWidth: 800,
 18    margin: 'auto',
 19    marginTop: theme.spacing(4),
 20    marginBottom: theme.spacing(4),
 21    padding: theme.spacing(2),
 22    overflow: 'hidden',
 23  },
 24  form: {
 25    display: 'flex',
 26    flexDirection: 'column',
 27  },
 28  actions: {
 29    display: 'flex',
 30    justifyContent: 'flex-end',
 31  },
 32  greenButton: {
 33    backgroundColor: theme.palette.success.main,
 34    color: theme.palette.success.contrastText,
 35  },
 36}));
 37
 38/**
 39 * Form to create a new issue
 40 */
 41function NewBugPage() {
 42  const [newBug, { loading, error }] = useNewBugMutation();
 43  const [issueTitle, setIssueTitle] = useState('');
 44  const [issueComment, setIssueComment] = useState('');
 45  const classes = useStyles();
 46
 47  let issueTitleInput: any;
 48  let history = useHistory();
 49
 50  function submitNewIssue(e: FormEvent) {
 51    e.preventDefault();
 52    if (!isFormValid()) return;
 53    newBug({
 54      variables: {
 55        input: {
 56          title: issueTitle,
 57          message: issueComment,
 58        },
 59      },
 60    }).then(function (data) {
 61      const id = data.data?.newBug.bug.humanId;
 62      history.push('/bug/' + id);
 63    });
 64    issueTitleInput.value = '';
 65  }
 66
 67  function isFormValid() {
 68    return issueTitle.length > 0;
 69  }
 70
 71  if (loading) return <div>Loading...</div>;
 72  if (error) return <div>Error</div>;
 73
 74  return (
 75    <Paper className={classes.main}>
 76      <form className={classes.form} onSubmit={submitNewIssue}>
 77        <BugTitleInput
 78          inputRef={(node) => {
 79            issueTitleInput = node;
 80          }}
 81          label="Title"
 82          variant="outlined"
 83          fullWidth
 84          margin="dense"
 85          onChange={(event: any) => setIssueTitle(event.target.value)}
 86        />
 87        <CommentInput
 88          loading={false}
 89          onChange={(comment: string) => setIssueComment(comment)}
 90        />
 91        <div className={classes.actions}>
 92          <Button
 93            className={classes.greenButton}
 94            variant="contained"
 95            type="submit"
 96            disabled={isFormValid() ? false : true}
 97          >
 98            Submit new issue
 99          </Button>
100        </div>
101      </form>
102    </Paper>
103  );
104}
105
106export default NewBugPage;