From 0f6582b270801ee187a73ac25d44338f31cbd883 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 20 Apr 2018 11:58:56 -0400
Subject: moved from imported client, to Apollo Consumer context

---
 frontend/README.md            |  5 +++-
 frontend/components/Search.js | 30 ++++++++++---------
 frontend/components/Signin.js | 67 ++++++++++++++++++++++---------------------
 3 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 6e41617..7e9575f 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -40,8 +40,11 @@ FormatMoney
 Cart Count
 CartItem
 
+Things to Ask James:
 
-
+* Testing Mutations - overwrite instance Mutation.client.mutate?
+* Client via <ApolloConsumer> - best way?
+* Update on Items Pagination
 
 
 -->
\ No newline at end of file
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 399b772..85aaeb5 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -2,8 +2,8 @@ import Downshift from 'downshift';
 import Router from 'next/router';
 import styled, { keyframes } from 'styled-components';
 import debounce from 'lodash.debounce';
-import { client } from '../lib/withData';
 import { SEARCH_ITEMS_QUERY } from '../queries/queries';
+import { ApolloConsumer } from 'react-apollo';
 
 function routeToItem(item) {
   Router.push({
@@ -62,7 +62,7 @@ class AutoComplete extends React.Component {
     items: [],
     loading: false,
   };
-  onChange = debounce(async e => {
+  onChange = debounce(async (e, client) => {
     if (!e.target.value) {
       return this.setState({ items: [] });
     }
@@ -81,17 +81,21 @@ class AutoComplete extends React.Component {
           {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => (
             <div>
               {/* This is the searchInput */}
-              <input
-                {...getInputProps({
-                  placeholder: 'Search For Item',
-                  id: 'search',
-                  className: this.state.loading ? 'loading' : '',
-                  onChange: e => {
-                    e.persist();
-                    this.onChange(e);
-                  },
-                })}
-              />
+              <ApolloConsumer>
+                {client => (
+                  <input
+                    {...getInputProps({
+                      placeholder: 'Search For Item',
+                      id: 'search',
+                      className: this.state.loading ? 'loading' : '',
+                      onChange: e => {
+                        e.persist();
+                        this.onChange(e, client);
+                      },
+                    })}
+                  />
+                )}
+              </ApolloConsumer>
               {/* This is the Dropdown */}
               {isOpen && (
                 <DropDown>
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index f8a72e4..78da284 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -3,7 +3,6 @@ import { Mutation, Query, ApolloConsumer } from 'react-apollo';
 import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries/queries';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
-import { client } from '../lib/withData';
 
 class Signin extends Component {
   state = {
@@ -26,40 +25,44 @@ class Signin extends Component {
   render() {
     // TODO / ASK - do I really have to wrap this in a query just to access the refetch function
     return (
-      <Mutation mutation={SIGNIN_MUTATION} variables={this.state}>
-        {(signin, { data, loading, error }) => (
-          <Form onSubmit={e => this.loginUser(e, signin, client)}>
-            <Error error={error} />
-            <fieldset disabled={loading} aria-busy={loading}>
-              <label htmlFor="email">
-                Emailx
-                <input
-                  value={this.state.email}
-                  onChange={this.saveToState}
-                  name="email"
-                  type="text"
-                  placeholder="email"
-                />
-              </label>
+      <ApolloConsumer>
+        {client => (
+          <Mutation mutation={SIGNIN_MUTATION} variables={this.state}>
+            {(signin, { data, 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>
 
-              <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>
+                  <button type="submit">Sign In!</button>
+                </fieldset>
+              </Form>
+            )}
+          </Mutation>
         )}
-      </Mutation>
+      </ApolloConsumer>
     );
   }
 }
-- 
cgit v1.3