From 19c9683e2126c68cb9d231293162c756d69c51fb Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 8 Feb 2018 10:41:16 -0500
Subject: WIP

---
 frontend/components/Signup.js | 130 +++++++++++++++++++++---------------------
 1 file changed, 64 insertions(+), 66 deletions(-)

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

diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 57e2569..746f1e4 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,94 +1,92 @@
 import React, { Component } from 'react';
-import { graphql, gql } from 'react-apollo';
-import { CREATE_USER_MUTATION } from '../queries';
+import { graphql, compose } from 'react-apollo';
+import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries';
 
 class Signup extends Component {
-  constructor() {
-    super();
-    const idToken = typeof window !== 'undefined' ? localStorage.getItem('auth0IdToken') || '' : '';
-    this.state = {
-      email: '',
-      name: '',
-      idToken,
-      error: undefined,
-    };
-  }
+  state = {
+    email: `wesbos+${Date.now()}@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 });
+  };
+
+  saveToState = e => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
 
   render() {
     return (
       <div>
         {this.state.loading ? 'LOADING...' : 'Ready!'}
 
-        {this.state.error ? <p>{this.state.error.message}</p> : ''}
+        {this.state.error ? <p>{this.state.error.message}</p> : null}
 
-        <form onSubmit={this._createUser}>
-          <p>
+        <form onSubmit={this.createUser}>
+          <label htmlFor="email">
             Email
-            <input
-              value={this.state.email}
-              onChange={e => this.setState({ email: e.target.value })}
-              type="text"
-              placeholder="email"
-            />
-          </p>
+            <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" />
+          </label>
 
-          <p>
+          <label htmlFor="name">
             Name
-            <input
-              value={this.state.name}
-              onChange={e => this.setState({ name: e.target.value })}
-              type="text"
-              placeholder="name"
-            />
-          </p>
+            <input type="text" name="name" placeholder="name" value={this.state.name} onChange={this.saveToState} />
+          </label>
 
-          <p>
-            idToken
+          <label htmlFor="password">
+            Password
             <input
-              disabled
-              value={this.state.idToken}
-              onChange={e => this.setState({ idToken: e.target.value })}
-              type="text"
-              placeholder="name"
+              type="password"
+              name="password"
+              id="password"
+              className="password"
+              placeholder="password"
+              value={this.state.password}
+              onChange={this.saveToState}
             />
-          </p>
+          </label>
 
           <button type="submit">Submit</button>
         </form>
       </div>
     );
   }
-
-  _createUser = async e => {
-    e.preventDefault();
-    // pull the values from state
-    const { email, name, idToken } = this.state;
-    // create a mutation
-    // TODO: handle any errors
-    // turn loading on
-    this.setState({ loading: true });
-    console.log(name, email, idToken);
-    try {
-      const res = await this.props.createUserMutation({
-        // pass in those variables from state
-        variables: { name, email, idToken },
-      });
-    } 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',
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
+
+const signupEnhancer = graphql(SIGNUP_MUTATION, {
+  name: 'signup',
   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!
+    refetchQueries: ['currentUser'],
   },
-})(Signup);
+});
+
+export default compose(userEnhancer, signupEnhancer)(Signup);
-- 
cgit v1.3