From 0f1b9240bbd05b377e868faf78b89b509a3d7537 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 27 Oct 2017 13:24:41 -0400
Subject: ayeee

---
 components/Signup.js | 68 +++++++++++++++++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 25 deletions(-)

(limited to 'components/Signup.js')

diff --git a/components/Signup.js b/components/Signup.js
index ab0a498..57e2569 100644
--- a/components/Signup.js
+++ b/components/Signup.js
@@ -1,52 +1,68 @@
-import React, { Component } from 'react'
-import { graphql, gql } from 'react-apollo'
+import React, { Component } from 'react';
+import { graphql, gql } from 'react-apollo';
 import { CREATE_USER_MUTATION } from '../queries';
 
 class Signup extends Component {
-
   constructor() {
     super();
-    const idToken = typeof window !== 'undefined' ?  localStorage.getItem('auth0IdToken') || '' : '';
+    const idToken = typeof window !== 'undefined' ? localStorage.getItem('auth0IdToken') || '' : '';
     this.state = {
       email: '',
       name: '',
       idToken,
-      error: undefined
-    }
-
+      error: undefined,
+    };
   }
 
-
   render() {
     return (
       <div>
-        { this.state.loading ? 'LOADING...' : 'Ready!' }
+        {this.state.loading ? 'LOADING...' : 'Ready!'}
 
-        { this.state.error ? <p>{this.state.error.message}</p> : '' }
+        {this.state.error ? <p>{this.state.error.message}</p> : ''}
 
         <form onSubmit={this._createUser}>
-          <p>Email
-            <input value={this.state.email} onChange={(e) => this.setState({ email: e.target.value })} type='text' placeholder='email'/>
+          <p>
+            Email
+            <input
+              value={this.state.email}
+              onChange={e => this.setState({ email: e.target.value })}
+              type="text"
+              placeholder="email"
+            />
           </p>
 
-          <p>Name
-            <input value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} type='text' placeholder='name'/>
+          <p>
+            Name
+            <input
+              value={this.state.name}
+              onChange={e => this.setState({ name: e.target.value })}
+              type="text"
+              placeholder="name"
+            />
           </p>
 
-          <p>idToken
-            <input disabled value={this.state.idToken} onChange={(e) => this.setState({ idToken: e.target.value })} type='text' placeholder='name'/>
+          <p>
+            idToken
+            <input
+              disabled
+              value={this.state.idToken}
+              onChange={e => this.setState({ idToken: e.target.value })}
+              type="text"
+              placeholder="name"
+            />
           </p>
 
           <button type="submit">Submit</button>
         </form>
       </div>
-    )
+    );
   }
 
-  _createUser = async (e) => {
+  _createUser = async e => {
     e.preventDefault();
     // pull the values from state
-    const { email, name, idToken } = this.state
+    const { email, name, idToken } = this.state;
     // create a mutation
     // TODO: handle any errors
     // turn loading on
@@ -55,22 +71,24 @@ class Signup extends Component {
     try {
       const res = await this.props.createUserMutation({
         // pass in those variables from state
-        variables: { name, email, idToken }
+        variables: { name, email, idToken },
       });
-    } catch(error) {
+    } catch (error) {
       this.setState({ error });
       console.dir(error);
     }
     this.setState({ loading: false });
-  }
+  };
 }
 // 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.
 
-
-export default graphql(CREATE_USER_MUTATION, { name: 'createUserMutation', options: {
+export default graphql(CREATE_USER_MUTATION, {
+  name: 'createUserMutation',
+  options: {
     // Easy, but slow
     // refetchQueries: ['AllLinksQuery']
     // This is much Better / efficient
     // Notice how the variable is called createItem - that is because createItem is the name of the query!
-  } })(Signup)
+  },
+})(Signup);
-- 
cgit v1.3