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/Signup.js | 118 +++++++++++++++++-------------------------
 1 file changed, 48 insertions(+), 70 deletions(-)

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

diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 3a4dd99..314d0ab 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,38 +1,15 @@
 import React, { Component } from 'react';
-import { graphql, compose } from 'react-apollo';
+import { graphql, compose, Mutation } from 'react-apollo';
 import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries';
 import Form from './styles/Form';
+import catchError from '../lib/catchError';
+import Error from './ErrorMessage';
 
 class Signup extends Component {
   state = {
-    email: `wesbos+${Date.now()}@gmail.com`,
+    email: `wesbos@gmail.com`,
     name: 'Wes Bos',
-    password: 'abc123',
-    error: undefined,
-  };
-
-  createUser = async e => {
-    e.preventDefault();
-    // pull the values from state
-    const { email, name, password } = this.state;
-    // create a mutation
-    // TODO: handle any errors
-    // turn loading on
-    this.setState({ loading: true });
-    console.log({ name, email, password });
-    try {
-      const res = await this.props.signup({
-        // pass in those variables from state
-        variables: { name, email, password },
-      });
-      localStorage.setItem('token', res.data.signup.token);
-      // TODO refetch current user query
-      this.props.currentUser.refetch();
-    } catch (error) {
-      this.setState({ error });
-      console.dir(error);
-    }
-    this.setState({ loading: false });
+    password: 'wes',
   };
 
   saveToState = e => {
@@ -42,52 +19,53 @@ class Signup extends Component {
 
   render() {
     return (
-      <div>
-        {this.state.loading ? 'LOADING...' : null}
-
-        {this.state.error ? <p>{this.state.error.message}</p> : null}
-
-        <Form onSubmit={this.createUser}>
-          <label htmlFor="email">
-            Email
-            <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" />
-          </label>
+      <Mutation mutation={SIGNUP_MUTATION} variables={this.state}>
+        {(signup, { data, loading, error }) => (
+          <Form
+            onSubmit={e => {
+              e.preventDefault();
+              signup();
+            }}
+          >
+            <fieldset disabled={loading} aria-busy={loading}>
+              <Error error={error} />
+              <h2>Sign Up for an Account</h2>
+              <label htmlFor="email">
+                Email
+                <input
+                  value={this.state.email}
+                  onChange={this.saveToState}
+                  name="email"
+                  type="text"
+                  placeholder="email"
+                />
+              </label>
 
-          <label htmlFor="name">
-            Name
-            <input type="text" name="name" placeholder="name" value={this.state.name} onChange={this.saveToState} />
-          </label>
+              <label htmlFor="name">
+                Name
+                <input type="text" name="name" placeholder="name" value={this.state.name} 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>
+              <label htmlFor="signupPassword">
+                Password
+                <input
+                  type="password"
+                  name="password"
+                  id="signupPassword"
+                  className="password"
+                  placeholder="password"
+                  value={this.state.password}
+                  onChange={this.saveToState}
+                />
+              </label>
 
-          <button type="submit">Submit</button>
-        </Form>
-      </div>
+              <button type="submit">Submit</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 signupEnhancer = graphql(SIGNUP_MUTATION, {
-  name: 'signup',
-  options: {
-    refetchQueries: ['currentUser'],
-  },
-});
-
-export default compose(userEnhancer, signupEnhancer)(Signup);
+export default Signup;
-- 
cgit v1.3