1import React, { FormEvent, useState } from 'react';
  2
  3import { Button } from '@material-ui/core';
  4import Paper from '@material-ui/core/Paper';
  5import TextField from '@material-ui/core/TextField/TextField';
  6import { fade, makeStyles, Theme } from '@material-ui/core/styles';
  7
  8import CommentInput from '../../layout/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  titleInput: {
 25    borderRadius: theme.shape.borderRadius,
 26    borderColor: fade(theme.palette.primary.main, 0.2),
 27    borderStyle: 'solid',
 28    borderWidth: '1px',
 29    backgroundColor: fade(theme.palette.primary.main, 0.05),
 30    padding: theme.spacing(0, 0),
 31    transition: theme.transitions.create([
 32      'width',
 33      'borderColor',
 34      'backgroundColor',
 35    ]),
 36  },
 37  form: {
 38    display: 'flex',
 39    flexDirection: 'column',
 40  },
 41  actions: {
 42    display: 'flex',
 43    justifyContent: 'flex-end',
 44  },
 45  greenButton: {
 46    backgroundColor: '#2ea44fd9',
 47    color: '#fff',
 48    '&:hover': {
 49      backgroundColor: '#2ea44f',
 50    },
 51  },
 52}));
 53
 54/**
 55 * Form to create a new issue
 56 */
 57function NewBugPage() {
 58  const [newBug, { loading, error }] = useNewBugMutation();
 59  const [issueTitle, setIssueTitle] = useState('');
 60  const [issueComment, setIssueComment] = useState('');
 61  const classes = useStyles();
 62  let issueTitleInput: any;
 63
 64  function submitNewIssue(e: FormEvent) {
 65    e.preventDefault();
 66    if (!isFormValid()) return;
 67    console.log('submitNewISsue');
 68    console.log('title: ', issueTitle);
 69    console.log('comment: ', issueComment);
 70    newBug({
 71      variables: {
 72        input: {
 73          title: issueTitle,
 74          message: issueComment,
 75        },
 76      },
 77    });
 78    issueTitleInput.value = '';
 79  }
 80
 81  function isFormValid() {
 82    return issueTitle.length > 0 && issueComment.length > 0 ? true : false;
 83  }
 84
 85  if (loading) return <div>Loading</div>;
 86  if (error) return <div>Error</div>;
 87
 88  return (
 89    <Paper className={classes.main}>
 90      <form className={classes.form} onSubmit={submitNewIssue}>
 91        <TextField
 92          inputRef={(node) => {
 93            issueTitleInput = node;
 94          }}
 95          label="Title"
 96          className={classes.titleInput}
 97          variant="outlined"
 98          fullWidth
 99          margin="dense"
100          onChange={(event: any) => setIssueTitle(event.target.value)}
101        />
102        <CommentInput
103          loading={false}
104          onChange={(comment: string) => setIssueComment(comment)}
105        />
106        <div className={classes.actions}>
107          <Button
108            className={classes.greenButton}
109            variant="contained"
110            type="submit"
111            disabled={isFormValid() ? false : true}
112          >
113            Submit new issue
114          </Button>
115        </div>
116      </form>
117    </Paper>
118  );
119}
120
121export default NewBugPage;