Migrate to render props

1 files changed, 52 insertions, 63 deletions

diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js
index 5593f75..5bc7f98 100644
--- a/frontend/components/Reset.js
+++ b/frontend/components/Reset.js
@@ -1,13 +1,18 @@
-import React, { Component } from 'react';
-import { graphql, compose } from 'react-apollo';
-import { RESET_MUTATION, CURRENT_USER_QUERY } from '../queries';
+import React from 'react';
+import { Mutation } from 'react-apollo';
+import PropTypes from 'prop-types';
 import Form from './styles/Form';
+import Error from './ErrorMessage';
+import { RESET_MUTATION, CURRENT_USER_QUERY } from '../queries';
+
+class Reset extends React.Component {
+  static propTypes = {
+    resetToken: PropTypes.string.isRequired,
+  };
 
-class Reset extends Component {
   state = {
     confirmPassword: '',
     password: '',
-    errors: [],
   };
 
   saveToState = e => {
@@ -15,74 +20,58 @@ class Reset extends Component {
     this.setState({ [name]: value });
   };
 
-  resetPassword = async e => {
-    console.log(e);
+  resetPassword = async (e, resetMutation) => {
     e.preventDefault();
-
-    if (this.state.password !== this.state.confirmPassword) {
-      this.setState({ errors: [{ message: 'Passwords Must Match!' }] });
-    }
-
-    const res = await this.props.resetPassword({
-      variables: {
-        resetToken: this.props.resetToken,
-        password: this.state.password,
-        confirmPassword: this.state.confirmPassword,
-      },
-    });
-
-    if (res.errors) {
-      this.setState({ errors: res.errors });
-      return;
-    }
-    console.log('Back!');
+    const res = await resetMutation();
     console.log(res);
     // sign them in!
     localStorage.setItem('token', res.data.resetPassword.token);
-    // refresh the current user query
-    this.props.currentUser.refetch();
+    // TODO: Manually call refresh on a Query
   };
 
   render() {
     return (
-      <div>
-        {this.state.loading ? 'LOADING...' : 'Ready!'}
-
-        {this.state.errors ? this.state.errors.map((err, i) => <p key={i}>{err.message}</p>) : null}
-
-        <Form onSubmit={this.resetPassword}>
-          <label htmlFor="password">
-            password
-            <input
-              value={this.state.password}
-              onChange={this.saveToState}
-              name="password"
-              type="password"
-              id="password"
-            />
-          </label>
-          <label htmlFor="confirm">
-            Confirm:
-            <input
-              value={this.state.confirmPassword}
-              onChange={this.saveToState}
-              name="confirmPassword"
-              type="password"
-              id="confirmPassword"
-            />
-          </label>
+      <Mutation
+        mutation={RESET_MUTATION}
+        variables={{
+          resetToken: this.props.resetToken,
+          password: this.state.password,
+          confirmPassword: this.state.confirmPassword,
+        }}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
+        {(resetMutation, { error, loading }) => (
+          <Form onSubmit={e => this.resetPassword(e, resetMutation)}>
+            <Error error={error} />
+            <fieldset disabled={loading} aria-busy={loading}>
+              <label htmlFor="password">
+                password
+                <input
+                  value={this.state.password}
+                  onChange={this.saveToState}
+                  name="password"
+                  type="password"
+                  id="password"
+                />
+              </label>
+              <label htmlFor="confirm">
+                Confirm:
+                <input
+                  value={this.state.confirmPassword}
+                  onChange={this.saveToState}
+                  name="confirmPassword"
+                  type="password"
+                  id="confirmPassword"
+                />
+              </label>
 
-          <button type="submit">Request Reset!</button>
-        </Form>
-      </div>
+              <button type="submit">Request Reset!</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 restEnahncer = graphql(RESET_MUTATION, { name: 'resetPassword' });
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
-
-export default compose(restEnahncer, userEnhancer)(Reset);
+export default Reset;