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