|
@@ -0,0 +1,58 @@
|
|
|
+import React from 'react'
|
|
|
+import gql from 'graphql-tag'
|
|
|
+import { Mutation } from 'react-apollo'
|
|
|
+
|
|
|
+const USER_CREATE = gql`
|
|
|
+ mutation USER_CREATE($email: String!, $name: String!, $abbreviation: String!, $password: String!) {
|
|
|
+ createUser(email: $email, name: $name, abbreviation: $abbreviation, password: $password) {
|
|
|
+ id
|
|
|
+ name
|
|
|
+ email
|
|
|
+ abbreviation
|
|
|
+ }
|
|
|
+ }
|
|
|
+`
|
|
|
+
|
|
|
+class UserCreate extends React.Component {
|
|
|
+ state = {
|
|
|
+ name: '',
|
|
|
+ email: '',
|
|
|
+ abbreviation: '',
|
|
|
+ password: ''
|
|
|
+ }
|
|
|
+
|
|
|
+ handleInput = event => {
|
|
|
+ this.setState({ [event.target.name]: event.target.value })
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ <Mutation
|
|
|
+ mutation={USER_CREATE}
|
|
|
+ variables={this.state}
|
|
|
+ refetchQueries={[{ query: USER_CREATE }]}
|
|
|
+ >
|
|
|
+ {(userCreate, { error, loading }) => (
|
|
|
+ <form
|
|
|
+ method="POST"
|
|
|
+ onSubmit={async event => {
|
|
|
+ event.preventDefault()
|
|
|
+ await userCreate()
|
|
|
+ this.setState({ name: '', email: '', abbreviation: '', password: '' })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <input type="text" name="name" id="name" value={this.state.name} onChange={this.handleInput} />
|
|
|
+ <label htmlFor="name"></label>
|
|
|
+ <input type="text" name="abbreviation" id="abbreviation" value={this.state.abbreviation} onChange={this.handleInput} />
|
|
|
+ <label htmlFor="abbreviation"></label>
|
|
|
+ <input type="text" name="email" id="email" value={this.state.email} onChange={this.handleInput} />
|
|
|
+ <label htmlFor="email"></label>
|
|
|
+ <input type="password" name="password" id="password" value={this.state.password} onChange={this.handleInput} />
|
|
|
+ <label htmlFor="password"></label>
|
|
|
+ <button type="submit">Create</button>
|
|
|
+ </form>
|
|
|
+ )}
|
|
|
+ </Mutation>
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default UserCreate
|