Login mutation

Author: albertodev7

client/src/Components/Navbar/Components/Login/Login.tsx

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

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

@@ -1,31 +1,41 @@
 import * as React from 'react'
+import { Formik } from 'formik'
 
-import LogoSvg from 'src/Images/logo.svg'
-import { Input } from 'src/Components/Input'
-import { Button } from 'src/Components/Button'
-import { Br } from 'src/Components/Br'
-import { LogoWrapper, Logo, Text } from './style'
+import { LoginMutation } from 'src/Graphql/Login'
+import { LoginUI } from './Login'
+
+interface FieldProps {
+    email: string
+    password: string
+}
 
 interface Props {
     changePage: () => void
 }
-
-export const Login: React.SFC<Props> = ({ changePage }) => (
-    <>
-        <LogoWrapper>
-            <Logo src={LogoSvg} />
-        </LogoWrapper>
-
-        <Br />
-
-        <Input onChange={() => null} type="text" placeholder="Email" />
-
-        <Input onChange={() => null} type="text" placeholder="Password" />
-
-        <Button fullWidth>Login</Button>
-
-        <Br />
-
-        <Text onClick={changePage}>Register</Text>
-    </>
-)
+export class Login extends React.Component<Props, {}> {
+    public render() {
+        const { changePage } = this.props
+        return (
+            <LoginMutation>
+                {({ login }) => (
+                    <Formik<FieldProps>
+                        initialValues={{ email: '', password: '' }}
+                        onSubmit={async (values: FieldProps) => {
+                            const lol = await login({
+                                variables: { ...values }
+                            })
+                            console.log(lol)
+                        }}
+                    >
+                        {({ submitForm }) => (
+                            <LoginUI
+                                submit={submitForm}
+                                changePage={changePage}
+                            />
+                        )}
+                    </Formik>
+                )}
+            </LoginMutation>
+        )
+    }
+}

client/src/Graphql/Login/index.tsx

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