Register mutation

Author: albertodev7

client/src/Components/Navbar/Components/Register/Register.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Form, Field } from 'formik'
+
+import { FormikInput } from 'src/Components/FomikInput'
+import { Button } from 'src/Components/Button'
+import { Br } from 'src/Components/Br'
+import { Text } from './style'
+
+interface Props {
+    changePage: () => void
+    submit: () => void
+}
+
+export const RegisterUI: React.SFC<Props> = ({ changePage, submit }) => (
+    <Form>
+        <Field
+            name="email"
+            placeholder="Email"
+            label="Email"
+            component={FormikInput}
+        />
+
+        <Field
+            name="password"
+            placeholder="Password"
+            label="Password"
+            type="password"
+            component={FormikInput}
+        />
+
+        <Button fullWidth onClick={submit}>
+            Register
+        </Button>
+
+        <Br />
+
+        <Text onClick={changePage}>Login</Text>
+    </Form>
+)

client/src/Components/Navbar/Components/Register/index.tsx

@@ -1,28 +1,42 @@
 import * as React from 'react'
+import { Formik } from 'formik'
 
-import { Input } from 'src/Components/Input'
-import { Button } from 'src/Components/Button'
-import { Br } from 'src/Components/Br'
-import { Text } from './style'
+import { RegisterMutation } from 'src/Graphql/Register'
+import { RegisterUI } from './Register'
+
+interface FieldProps {
+    email: string
+    password: string
+}
 
 interface Props {
     changePage: () => void
 }
 
-export const Register: React.SFC<Props> = ({ changePage }) => (
-    <>
-        <Input onChange={() => null} type="text" placeholder="Email" />
-
-        <Input onChange={() => null} type="text" placeholder="Name" />
-
-        <Input onChange={() => null} type="text" placeholder="Surname" />
-
-        <Input onChange={() => null} type="password" placeholder="Password" />
-
-        <Button fullWidth>Register</Button>
-
-        <Br />
-
-        <Text onClick={changePage}>Login</Text>
-    </>
-)
+export class Register extends React.Component<Props, {}> {
+    public render() {
+        const { changePage } = this.props
+
+        return (
+            <RegisterMutation>
+                {({ register }) => (
+                    <Formik<FieldProps>
+                        initialValues={{ email: '', password: '' }}
+                        onSubmit={async (values: FieldProps) =>
+                            await register({
+                                variables: { ...values }
+                            })
+                        }
+                    >
+                        {({ submitForm }) => (
+                            <RegisterUI
+                                changePage={changePage}
+                                submit={submitForm}
+                            />
+                        )}
+                    </Formik>
+                )}
+            </RegisterMutation>
+        )
+    }
+}

client/src/Graphql/Register/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Mutation } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const registerMutation = gql`
+    mutation Register($email: String!, $password: String!) {
+        register(input: { email: $email, password: $password }) {
+            ok
+        }
+    }
+`
+
+interface WithRegister {
+    register: any
+}
+
+interface Props {
+    children: (data: WithRegister) => React.ReactNode
+}
+
+export class RegisterMutation extends React.PureComponent<Props> {
+    public render() {
+        return (
+            <Mutation mutation={registerMutation}>
+                {mutate => this.props.children({ register: mutate })}
+            </Mutation>
+        )
+    }
+}

client/src/Pages/CreateListing/Components/CreateListingForm/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { Formik, Form } from 'formik'
 
+import { CreateListingMutation } from 'src/Graphql/CreateListing'
 import { Wizard } from 'src/Components/Wizard'
 import { Stepper } from 'src/Components/Stepper'
 import { Button } from 'src/Components/Button'
@@ -9,7 +10,6 @@ import { RoomInfoForm } from '../RoomInfoForm'
 import { LocationForm } from '../LocationForm'
 
 import { Container, Wrapper, Buttons } from './style'
-import { CreateListingMutation } from '../../../../Graphql/CreateListing'
 
 interface FieldValues {
     name: string