From a6af043686e4375d7944e91cae3d5b63c59edab0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 22 Mar 2018 16:29:31 -0400
Subject: Migrate to render props

---
 frontend/components/Signin.js | 88 +++++++++++++++++++------------------------
 1 file changed, 38 insertions(+), 50 deletions(-)

(limited to 'frontend/components/Signin.js')

diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 423e9e8..a211528 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -1,34 +1,21 @@
 import React, { Component } from 'react';
-import { graphql, compose } from 'react-apollo';
+import { Mutation } from 'react-apollo';
 import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries';
-
+import Error from './ErrorMessage';
 import Form from './styles/Form';
 
 class Signin extends Component {
   state = {
     email: `wesbos@gmail.com`,
     password: 'abc123',
-    errors: [],
   };
 
-  loginUser = async e => {
+  loginUser = async (e, signin) => {
     e.preventDefault();
-    // pull the values from state
-    const { email, password } = this.state;
-    this.setState({ loading: true, errors: [] });
-    const res = await this.props.signin({
-      // pass in those variables from state
-      variables: { name, email, password },
-    });
-    if (res.errors) {
-      this.setState({ errors: res.errors });
-      return;
-    }
+    const res = await signin();
     localStorage.setItem('token', res.data.signin.token);
+    return Promise.resolve('it worked');
     // TODO refetch current user query
-    this.props.currentUser.refetch();
-
-    this.setState({ loading: false });
   };
 
   saveToState = e => {
@@ -38,41 +25,42 @@ class Signin extends Component {
 
   render() {
     return (
-      <div>
-        {this.state.loading ? 'LOADING...' : null}
-
-        {this.state.errors ? this.state.errors.map(err => <p>{err.message}</p>) : null}
+      <Mutation mutation={SIGNIN_MUTATION} variables={this.state} refetchQueries={[{ query: CURRENT_USER_QUERY }]}>
+        {(signin, { data, loading, error }) => (
+          <Form onSubmit={e => this.loginUser(e, signin)}>
+            <Error error={error} />
+            <fieldset disabled={loading} aria-busy={loading}>
+              <label htmlFor="email">
+                Email
+                <input
+                  value={this.state.email}
+                  onChange={this.saveToState}
+                  name="email"
+                  type="text"
+                  placeholder="email"
+                />
+              </label>
 
-        <Form onSubmit={this.loginUser}>
-          <label htmlFor="email">
-            Email
-            <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" />
-          </label>
+              <label htmlFor="password">
+                Password
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  className="password"
+                  placeholder="password"
+                  value={this.state.password}
+                  onChange={this.saveToState}
+                />
+              </label>
 
-          <label htmlFor="password">
-            Password
-            <input
-              type="password"
-              name="password"
-              id="password"
-              className="password"
-              placeholder="password"
-              value={this.state.password}
-              onChange={this.saveToState}
-            />
-          </label>
-
-          <button type="submit">Sign In!</button>
-        </Form>
-      </div>
+              <button type="submit">Sign In!</button>
+            </fieldset>
+          </Form>
+        )}
+      </Mutation>
     );
   }
 }
 
-// When we submit this mutation, we need to update our store - we have a few ways to do that:
-// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
-
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
-const signinEnhancer = graphql(SIGNIN_MUTATION, { name: 'signin' });
-
-export default compose(signinEnhancer, userEnhancer)(Signin);
+export default Signin;
-- 
cgit v1.3