1import React, { FormEvent, useState } from 'react';
2import { useHistory } from 'react-router-dom';
3
4import { Button, Paper } from '@material-ui/core';
5import { makeStyles, Theme } from '@material-ui/core/styles';
6
7import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
8import CommentInput from '../../components/CommentInput/CommentInput';
9import BackButton from '../bug/BackButton';
10
11import { useNewBugMutation } from './NewBug.generated';
12
13/**
14 * Css in JS styles
15 */
16const useStyles = makeStyles((theme: Theme) => ({
17 main: {
18 maxWidth: 1200,
19 margin: 'auto',
20 marginTop: theme.spacing(4),
21 marginBottom: theme.spacing(4),
22 padding: theme.spacing(2),
23 },
24 container: {
25 display: 'flex',
26 marginBottom: theme.spacing(1),
27 marginRight: theme.spacing(2),
28 marginLeft: theme.spacing(2),
29 },
30 form: {
31 display: 'flex',
32 flexDirection: 'column',
33 },
34 actions: {
35 display: 'flex',
36 justifyContent: 'flex-end',
37 },
38 greenButton: {
39 backgroundColor: theme.palette.success.main,
40 color: theme.palette.success.contrastText,
41 },
42 leftSidebar: {
43 marginTop: theme.spacing(2),
44 marginRight: theme.spacing(2),
45 },
46 rightSidebar: {
47 marginTop: theme.spacing(2),
48 flex: '0 0 200px',
49 },
50 timeline: {
51 flex: 1,
52 marginTop: theme.spacing(2),
53 marginRight: theme.spacing(2),
54 minWidth: 400,
55 padding: theme.spacing(1),
56 },
57}));
58
59/**
60 * Form to create a new issue
61 */
62function NewBugPage() {
63 const [newBug, { loading, error }] = useNewBugMutation();
64 const [issueTitle, setIssueTitle] = useState('');
65 const [issueComment, setIssueComment] = useState('');
66 const classes = useStyles();
67
68 let issueTitleInput: any;
69 let history = useHistory();
70
71 function submitNewIssue(e: FormEvent) {
72 e.preventDefault();
73 if (!isFormValid()) return;
74 newBug({
75 variables: {
76 input: {
77 title: issueTitle,
78 message: issueComment,
79 },
80 },
81 }).then(function (data) {
82 const id = data.data?.newBug.bug.humanId;
83 history.push('/bug/' + id);
84 });
85 issueTitleInput.value = '';
86 }
87
88 function isFormValid() {
89 return issueTitle.length > 0 && issueComment.length > 0 ? true : false;
90 }
91
92 if (loading) return <div>Loading...</div>;
93 if (error) return <div>Error</div>;
94
95 return (
96 <main className={classes.main}>
97 <div className={classes.container}>
98 <div className={classes.leftSidebar}>
99 <BackButton />
100 </div>
101 <Paper className={classes.timeline}>
102 <form className={classes.form} onSubmit={submitNewIssue}>
103 <BugTitleInput
104 inputRef={(node) => {
105 issueTitleInput = node;
106 }}
107 label="Title"
108 variant="outlined"
109 fullWidth
110 margin="dense"
111 onChange={(event: any) => setIssueTitle(event.target.value)}
112 />
113 <CommentInput
114 loading={false}
115 onChange={(comment: string) => setIssueComment(comment)}
116 />
117 <div className={classes.actions}>
118 <Button
119 className={classes.greenButton}
120 variant="contained"
121 type="submit"
122 disabled={isFormValid() ? false : true}
123 >
124 Submit new issue
125 </Button>
126 </div>
127 </form>
128 </Paper>
129 <div className={classes.rightSidebar}></div>
130 </div>
131 </main>
132 );
133}
134
135export default NewBugPage;