1import { Button, Paper } from '@mui/material';
  2import { Theme } from '@mui/material/styles';
  3import makeStyles from '@mui/styles/makeStyles';
  4import { FormEvent, useRef, useState } from 'react';
  5import { useNavigate } from 'react-router-dom';
  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    '&:hover': {
 36      backgroundColor: theme.palette.success.dark,
 37      color: theme.palette.primary.contrastText,
 38    },
 39  },
 40}));
 41
 42/**
 43 * Form to create a new issue
 44 */
 45function NewBugPage() {
 46  const [newBug, { loading, error }] = useNewBugMutation();
 47  const [issueTitle, setIssueTitle] = useState('');
 48  const [issueComment, setIssueComment] = useState('');
 49  const classes = useStyles();
 50
 51  const issueTitleInput = useRef<HTMLInputElement>(null);
 52  const navigate = useNavigate();
 53
 54  function submitNewIssue(e: FormEvent) {
 55    e.preventDefault();
 56    if (!isFormValid()) return;
 57    newBug({
 58      variables: {
 59        input: {
 60          title: issueTitle,
 61          message: issueComment,
 62        },
 63      },
 64    }).then(function (data) {
 65      const id = data.data?.newBug.bug.id;
 66      navigate('/bug/' + id);
 67    });
 68
 69    if (issueTitleInput.current) {
 70      issueTitleInput.current.value = '';
 71    }
 72  }
 73
 74  function isFormValid() {
 75    return issueTitle.length > 0;
 76  }
 77
 78  if (loading) return <div>Loading...</div>;
 79  if (error) return <div>Error</div>;
 80
 81  return (
 82    <Paper className={classes.main}>
 83      <form className={classes.form} onSubmit={submitNewIssue}>
 84        <BugTitleInput
 85          inputRef={issueTitleInput}
 86          label="Title"
 87          variant="outlined"
 88          fullWidth
 89          margin="dense"
 90          onChange={(event: any) => setIssueTitle(event.target.value)}
 91        />
 92        <CommentInput
 93          loading={false}
 94          onChange={(comment: string) => setIssueComment(comment)}
 95        />
 96        <div className={classes.actions}>
 97          <Button
 98            className={classes.greenButton}
 99            variant="contained"
100            type="submit"
101            disabled={isFormValid() ? false : true}
102          >
103            Submit new bug
104          </Button>
105        </div>
106      </form>
107    </Paper>
108  );
109}
110
111export default NewBugPage;