import React, { FormEvent, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { Button, Paper } from '@material-ui/core'; import { makeStyles, Theme } from '@material-ui/core/styles'; import BackToListButton from '../../components/BackToListButton'; import BugTitleInput from '../../components/BugTitleForm/BugTitleInput'; import CommentInput from '../../components/CommentInput/CommentInput'; import { useNewBugMutation } from './NewBug.generated'; /** * Css in JS styles */ const useStyles = makeStyles((theme: Theme) => ({ main: { maxWidth: 1200, margin: 'auto', marginTop: theme.spacing(4), marginBottom: theme.spacing(4), padding: theme.spacing(2), }, container: { display: 'flex', marginBottom: theme.spacing(1), marginRight: theme.spacing(2), marginLeft: theme.spacing(2), }, form: { display: 'flex', flexDirection: 'column', }, actions: { display: 'flex', justifyContent: 'flex-end', }, greenButton: { backgroundColor: theme.palette.success.main, color: theme.palette.success.contrastText, }, leftSidebar: { marginTop: theme.spacing(4), marginRight: theme.spacing(2), }, rightSidebar: { marginTop: theme.spacing(2), flex: '0 0 200px', }, timeline: { flex: 1, marginTop: theme.spacing(2), marginRight: theme.spacing(2), minWidth: 400, padding: theme.spacing(1), }, })); /** * Form to create a new issue */ function NewBugPage() { const [newBug, { loading, error }] = useNewBugMutation(); const [issueTitle, setIssueTitle] = useState(''); const [issueComment, setIssueComment] = useState(''); const classes = useStyles(); let issueTitleInput: any; let history = useHistory(); function submitNewIssue(e: FormEvent) { e.preventDefault(); if (!isFormValid()) return; newBug({ variables: { input: { title: issueTitle, message: issueComment, }, }, }).then(function (data) { const id = data.data?.newBug.bug.humanId; history.push('/bug/' + id); }); issueTitleInput.value = ''; } function isFormValid() { return issueTitle.length > 0; } if (loading) return
Loading...
; if (error) return
Error
; return (
{ issueTitleInput = node; }} label="Title" variant="outlined" fullWidth margin="dense" onChange={(event: any) => setIssueTitle(event.target.value)} /> setIssueComment(comment)} />
); } export default NewBugPage;