1import React, { FormEvent } from 'react';
 2
 3import Paper from '@material-ui/core/Paper';
 4import TextField from '@material-ui/core/TextField/TextField';
 5import { fade, makeStyles, Theme } from '@material-ui/core/styles';
 6
 7import { useNewBugMutation } from './NewBug.generated';
 8
 9/**
10 * Styles
11 */
12const useStyles = makeStyles((theme: Theme) => ({
13  main: {
14    maxWidth: 800,
15    margin: 'auto',
16    marginTop: theme.spacing(4),
17    marginBottom: theme.spacing(4),
18    padding: theme.spacing(2),
19    overflow: 'hidden',
20  },
21  titleInput: {
22    borderRadius: theme.shape.borderRadius,
23    borderColor: fade(theme.palette.primary.main, 0.2),
24    borderStyle: 'solid',
25    borderWidth: '1px',
26    backgroundColor: fade(theme.palette.primary.main, 0.05),
27    padding: theme.spacing(0, 0),
28    transition: theme.transitions.create([
29      'width',
30      'borderColor',
31      'backgroundColor',
32    ]),
33  },
34  form: {
35    display: 'flex',
36    flexDirection: 'row',
37    flexWrap: 'wrap',
38    justifyContent: 'flex-end',
39  },
40}));
41
42/**
43 * Form to create a new issue
44 */
45function NewBugPage() {
46  const classes = useStyles();
47  let inputField: any;
48  const [newBug, { loading, error }] = useNewBugMutation();
49
50  function submitNewIssue(e: FormEvent) {
51    e.preventDefault();
52    newBug({
53      variables: {
54        input: {
55          title: String(inputField.value),
56          message: 'Message', //TODO
57        },
58      },
59    });
60    inputField.value = '';
61  }
62
63  if (loading) return <div>Loading</div>;
64  if (error) return <div>Error</div>;
65
66  return (
67    <Paper className={classes.main}>
68      <form className={classes.form} onSubmit={submitNewIssue}>
69        <TextField
70          inputRef={(node) => {
71            inputField = node;
72          }}
73          label="Title"
74          className={classes.titleInput}
75          variant="outlined"
76          fullWidth
77          margin="dense"
78        />
79        <button type="submit">Submit</button>
80      </form>
81    </Paper>
82  );
83}
84
85export default NewBugPage;