aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorCláudio <claudio.engdist@gmail.com>2021-01-28 21:24:40 -0300
committerCláudio <claudio.engdist@gmail.com>2021-01-28 21:24:40 -0300
commitf8d41c3bcda516cd33be25475ac52ab72c376e1f (patch)
tree333df9ea0ba24dd1064408637b86ae3f36a40800
parentc009bea662d9fc875c8e7cb266cebbfc2985f226 (diff)
downloadgit-bug-f8d41c3bcda516cd33be25475ac52ab72c376e1f.tar.gz
Partial commit for #158
- It´s possible to create new issues from webui (only title) Next step - Finish new issue form (First comment field and style) - Update Readme about codegen usage and enforcing playground usage
-rw-r--r--webui/src/App.tsx4
-rw-r--r--webui/src/pages/new/NewBug.graphql7
-rw-r--r--webui/src/pages/new/NewBugPage.tsx (renamed from webui/src/pages/new/NewPage.tsx)41
3 files changed, 32 insertions, 20 deletions
diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index f7df7d2b..3a5ef025 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -4,14 +4,14 @@ import { Route, Switch } from 'react-router';
import Layout from './layout';
import BugPage from './pages/bug';
import ListPage from './pages/list';
-import NewPage from './pages/new/NewPage';
+import NewBugPage from './pages/new/NewBugPage';
export default function App() {
return (
<Layout>
<Switch>
<Route path="/" exact component={ListPage} />
- <Route path="/new" exact component={NewPage} />
+ <Route path="/new" exact component={NewBugPage} />
<Route path="/bug/:id" exact component={BugPage} />
</Switch>
</Layout>
diff --git a/webui/src/pages/new/NewBug.graphql b/webui/src/pages/new/NewBug.graphql
new file mode 100644
index 00000000..92df016e
--- /dev/null
+++ b/webui/src/pages/new/NewBug.graphql
@@ -0,0 +1,7 @@
+mutation newBug($input: NewBugInput!) {
+ newBug(input: $input) {
+ bug {
+ humanId
+ }
+ }
+} \ No newline at end of file
diff --git a/webui/src/pages/new/NewPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index b485987e..925034e1 100644
--- a/webui/src/pages/new/NewPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -1,16 +1,15 @@
-import { gql, useMutation } from '@apollo/client';
import React, { FormEvent } from 'react';
import Paper from '@material-ui/core/Paper/Paper';
import TextField from '@material-ui/core/TextField/TextField';
import { fade, makeStyles, Theme } from '@material-ui/core/styles';
-import GBButton from '../../components/Button/GBButton';
+import { useNewBugMutation } from './NewBug.generated';
/**
* Styles
*/
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((theme: Theme) => ({
main: {
maxWidth: 800,
margin: 'auto',
@@ -40,41 +39,47 @@ const useStyles = makeStyles((theme) => ({
},
}));
-const NEW_BUG = gql`
- mutation NewBug($input: NewBugInput) {
- newBug(input: $input) {
- title
- message
- }
- }
-`;
-
/**
* Form to create a new issue
*/
-function NewPage() {
- const classes = useStyles({ searching: false });
- const [newBugInput] = useMutation(NEW_BUG);
+function NewBugPage() {
+ const classes = useStyles();
+ let inputField: any;
+ const [newBug, { loading, error }] = useNewBugMutation();
function submitNewIssue(e: FormEvent) {
e.preventDefault();
- // TODO Call API
+ newBug({
+ variables: {
+ input: {
+ title: String(inputField.value),
+ message: 'Message', //TODO
+ },
+ },
+ });
+ inputField.value = '';
}
+ if (loading) return <div>Loading</div>;
+ if (error) return <div>Error</div>;
+
return (
<Paper className={classes.main}>
<form className={classes.form} onSubmit={submitNewIssue}>
<TextField
+ inputRef={(node) => {
+ inputField = node;
+ }}
label="Title"
className={classes.titleInput}
variant="outlined"
fullWidth
margin="dense"
/>
- <GBButton to="/" text="Submit new issue" />
+ <button type="submit">Submit</button>
</form>
</Paper>
);
}
-export default NewPage;
+export default NewBugPage;