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/ResetRequest.js | 71 +++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 39 deletions(-)

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

diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js
index 0910e5f..fb6f660 100644
--- a/frontend/components/ResetRequest.js
+++ b/frontend/components/ResetRequest.js
@@ -1,52 +1,45 @@
-import React, { Component } from 'react';
-import { graphql, compose } from 'react-apollo';
-import PropTypes from 'prop-types';
+import React from 'react';
+import { Mutation } from 'react-apollo';
 import { REQUEST_RESET_MUTATION } from '../queries';
 import Form from './styles/Form';
+import Error from './ErrorMessage';
 
-class ResetRequest extends Component {
-  static propTypes = {
-    requestReset: PropTypes.func.isRequired,
-  };
-
+class ResetRequest extends React.Component {
   state = {
     email: '',
-    errors: [],
-  };
-
-  requestReset = async e => {
-    e.preventDefault();
-    const res = await this.props.requestReset({
-      variables: {
-        email: this.state.email,
-      },
-    });
-    if (res.errors) {
-      this.setState({ errors: res.errors });
-    }
-  };
-
-  saveToState = e => {
-    const { name, value } = e.target;
-    this.setState({ [name]: value });
   };
 
   render() {
     return (
-      <Form onSubmit={this.requestReset}>
-        {this.state.errors ? this.state.errors.map((err, i) => <p key={i}>{err.message}</p>) : null}
-        <label htmlFor="email">
-          Email
-          <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" />
-        </label>
-
-        <button type="submit">Request Reset!</button>
-      </Form>
+      <Mutation mutation={REQUEST_RESET_MUTATION} variables={this.state}>
+        {(resetMutation, { loading, error }) => (
+          <Form
+            onSubmit={async e => {
+              e.preventDefault();
+              const res = await resetMutation();
+              console.log(res);
+            }}
+          >
+            <Error error={error} />
+            <fieldset disabled={loading} aria-busy={loading}>
+              <label htmlFor="email">
+                Email
+                <input
+                  value={this.state.email}
+                  onChange={e => this.setState({ email: e.target.value })}
+                  name="email"
+                  type="text"
+                  placeholder="email"
+                />
+              </label>
+
+              <button type="submit">Request Reset!</button>
+            </fieldset>
+          </Form>
+        )}
+      </Mutation>
     );
   }
 }
 
-const requestResetEnhancer = graphql(REQUEST_RESET_MUTATION, { name: 'requestReset' });
-
-export default compose(requestResetEnhancer)(ResetRequest);
-export { ResetRequest };
+export default ResetRequest;
-- 
cgit v1.3