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