From a75b2491758a451283e2a373bb3fbe886520b345 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 4 Apr 2018 10:38:21 -0400
Subject: force network policy

---
 frontend/components/DeleteItem.js |  5 ++-
 frontend/components/Signin.js     | 80 +++++++++++++++++----------------------
 frontend/lib/withData.js          | 36 +++++++++---------
 3 files changed, 57 insertions(+), 64 deletions(-)

(limited to 'frontend')

diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js
index 30b2bf7..8609ca7 100644
--- a/frontend/components/DeleteItem.js
+++ b/frontend/components/DeleteItem.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
 import { REMOVE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries/index';
+import Error from './ErrorMessage';
 
 class DeleteItem extends React.Component {
   static propTypes = {
@@ -20,7 +21,7 @@ class DeleteItem extends React.Component {
   render() {
     return (
       <Mutation mutation={REMOVE_ITEM_MUTATION} variables={{ id: this.props.id }} update={this.update}>
-        {removeItem => (
+        {(removeItem, { error }) => (
           <button
             onClick={() => {
               if (confirm('Are you sure you want to delete this item?')) {
@@ -28,7 +29,7 @@ class DeleteItem extends React.Component {
               }
             }}
           >
-            &times; Delete item
+            {error ? error.message : '× Delete Item'}
           </button>
         )}
       </Mutation>
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index eeff57c..e701e94 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Mutation, Query } from 'react-apollo';
+import { Mutation, Query, ApolloConsumer } from 'react-apollo';
 import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
+import { client } from '../lib/withData';
 
 class Signin extends Component {
   state = {
@@ -10,18 +11,11 @@ class Signin extends Component {
     password: 'abc123',
   };
 
-  loginUser = async (e, signin, refetchUser) => {
+  loginUser = async (e, signin, client) => {
     e.preventDefault();
     const res = await signin();
     localStorage.setItem('token', res.data.signin.token);
-    await refetchUser();
-    // TODO refetch current user query
-  };
-
-  update = (proxy, payload) => {
-    const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
-    data.me = payload.data.signin.user;
-    proxy.writeQuery({ query: CURRENT_USER_QUERY, data });
+    client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
   };
 
   saveToState = e => {
@@ -32,44 +26,40 @@ class Signin extends Component {
   render() {
     // TODO / ASK - do I really have to wrap this in a query just to access the refetch function
     return (
-      <Query query={CURRENT_USER_QUERY}>
-        {({ refetch }) => (
-          <Mutation mutation={SIGNIN_MUTATION} variables={this.state}>
-            {(signin, { data, loading, error }) => (
-              <Form onSubmit={e => this.loginUser(e, signin, refetch)}>
-                <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}>
+        {(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>
 
-                  <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>
         )}
-      </Query>
+      </Mutation>
     );
   }
 }
diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js
index 1a152a3..5c4614f 100644
--- a/frontend/lib/withData.js
+++ b/frontend/lib/withData.js
@@ -3,25 +3,27 @@ import ApolloClient from 'apollo-boost';
 
 // can also be a function that accepts a `headers` object (SSR only) and returns a config
 
-export default withApollo({
-  client: new ApolloClient({
-    uri: 'http://localhost:4444',
-    // cache: new InMemoryCache().restore(initialState || {}),
-    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
-    request: operation => {
-      console.log(operation);
-      if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) {
-        console.log(`Bearer ${localStorage.getItem('token')}`);
-        operation.setContext({
-          headers: {
-            authorization: `Bearer ${localStorage.getItem('token')}`,
-          },
-        });
-      }
-    },
-  }),
+const client = new ApolloClient({
+  uri: 'http://localhost:4444',
+  // cache: new InMemoryCache().restore(initialState || {}),
+  ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
+  request: operation => {
+    console.log(operation);
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('token')) {
+      console.log(`Bearer ${localStorage.getItem('token')}`);
+      operation.setContext({
+        headers: {
+          authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+    }
+  },
 });
 
+export { client };
+
+export default withApollo({ client });
+
 // OPTION 2
 
 // import { withData } from 'next-apollo';
-- 
cgit v1.3