From fceade857ecccad6884fe03a973215bd9df1a1e7 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 16 May 2018 13:53:07 -0400
Subject: simplyfyyyy

---
 frontend/components/Pagination.js |   1 -
 frontend/components/Reset.js      |   5 +-
 frontend/components/Search.js     |  15 ++++--
 frontend/components/Signin.js     |  83 ++++++++++++++---------------
 frontend/components/Signup.js     | 108 +++++++++++++++++++-------------------
 5 files changed, 104 insertions(+), 108 deletions(-)

(limited to 'frontend/components')

diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index d56b100..380026d 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -37,7 +37,6 @@ const Pagination = props => (
       const { aggregate } = data.itemsConnection;
       const { page } = props;
       const pages = Math.ceil(aggregate.count / perPage);
-      // TODO prefetch this
       return (
         <PaginationStyles data-test="pagination">
           <Link
diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js
index 0815262..c4d791c 100644
--- a/frontend/components/Reset.js
+++ b/frontend/components/Reset.js
@@ -22,10 +22,7 @@ class Reset extends React.Component {
 
   resetPassword = async (e, resetMutation) => {
     e.preventDefault();
-    const res = await resetMutation();
-    // sign them in!
-    localStorage.setItem('token', res.data.resetPassword.token);
-    // TODO: Manually call refresh on a Query
+    await resetMutation();
   };
 
   render() {
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index eb00d93..9f43d36 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -64,14 +64,18 @@ class AutoComplete extends React.Component {
     items: [],
     loading: false,
   };
-  onChange = debounce(async (e, client) => {
+  onChange = async (e, client) => {
     if (!e.target.value) {
       return this.setState({ items: [] });
     }
     this.setState({ loading: true });
+    this.search(client, e.target.value);
+  };
+
+  search = debounce(async (client, searchTerm) => {
     const res = await client.query({
       query: SEARCH_ITEMS_QUERY,
-      variables: { searchTerm: e.target.value },
+      variables: { searchTerm },
     });
     this.setState({ items: res.data.items, loading: false });
   }, 350);
@@ -112,9 +116,10 @@ class AutoComplete extends React.Component {
                     </DropDownItem>
                   ))}
                   {/* Found Nothing State */}
-                  {!this.state.items.length && (
-                    <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>
-                  )}
+                  {!this.state.items.length &&
+                    !this.state.loading && (
+                      <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>
+                    )}
                 </DropDown>
               )}
             </div>
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 7a4db8c..23a5835 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -9,14 +9,6 @@ class Signin extends Component {
     email: `wesbos@gmail.com`,
     password: 'abc123',
   };
-
-  loginUser = async (e, signin, client) => {
-    e.preventDefault();
-    const res = await signin();
-    // TODO instead of refetching, can we just use the data returned?
-    client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
-  };
-
   saveToState = e => {
     const { name, value } = e.target;
     this.setState({ [name]: value });
@@ -24,44 +16,49 @@ class Signin extends Component {
 
   render() {
     return (
-      <ApolloConsumer>
-        {client => (
-          <Mutation mutation={SIGNIN_MUTATION} variables={this.state}>
-            {(signin, { loading, error }) => (
-              <Form onSubmit={e => this.loginUser(e, signin, client)}>
-                <Error error={error} />
-                <fieldset disabled={loading} aria-busy={loading}>
-                  <label htmlFor="email">
-                    Email
-                    <input
-                      value={this.state.email}
-                      onChange={this.saveToState}
-                      name="email"
-                      type="text"
-                      placeholder="email"
-                    />
-                  </label>
+      <Mutation
+        mutation={SIGNIN_MUTATION}
+        variables={this.state}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
+        {(signin, { loading, error }) => (
+          <Form
+            onSubmit={e => {
+              e.preventDefault();
+              signin();
+            }}
+          >
+            <Error error={error} />
+            <fieldset disabled={loading} aria-busy={loading}>
+              <label htmlFor="email">
+                Email
+                <input
+                  value={this.state.email}
+                  onChange={this.saveToState}
+                  name="email"
+                  type="text"
+                  placeholder="email"
+                />
+              </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="password">
+                Password
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  className="password"
+                  placeholder="password"
+                  value={this.state.password}
+                  onChange={this.saveToState}
+                />
+              </label>
 
-                  <button type="submit">Sign In!</button>
-                </fieldset>
-              </Form>
-            )}
-          </Mutation>
+              <button type="submit">Sign In!</button>
+            </fieldset>
+          </Form>
         )}
-      </ApolloConsumer>
+      </Mutation>
     );
   }
 }
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index ef622ed..624bc10 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Mutation, ApolloConsumer } from 'react-apollo';
+import { Mutation } from 'react-apollo';
 import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
@@ -18,64 +18,62 @@ class Signup extends Component {
 
   render() {
     return (
-      <ApolloConsumer>
-        {client => (
-          <Mutation mutation={SIGNUP_MUTATION} variables={this.state}>
-            {(signup, { loading, error }) => (
-              <Form
-                method="post"
-                onSubmit={async e => {
-                  e.preventDefault();
-                  const res = await signup();
-                  // TODO can we return theuser from signup?
-                  client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
-                }}
-              >
-                <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>
+      <Mutation
+        mutation={SIGNUP_MUTATION}
+        variables={this.state}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
+        {(signup, { loading, error }) => (
+          <Form
+            method="post"
+            onSubmit={async e => {
+              e.preventDefault();
+              const res = await 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="signupPassword">
-                    Password
-                    <input
-                      type="password"
-                      name="password"
-                      id="signupPassword"
-                      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>
-                </fieldset>
-              </Form>
-            )}
-          </Mutation>
+              <button type="submit">Submit</button>
+            </fieldset>
+          </Form>
         )}
-      </ApolloConsumer>
+      </Mutation>
     );
   }
 }
-- 
cgit v1.3