From 65c524251d49ade9d44a62337f3c1c1fed6eedd0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 28 Mar 2018 15:22:34 -0400
Subject: Permissions

---
 frontend/components/Signin.js | 84 ++++++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 40 deletions(-)

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

diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 9f9eb96..846fd0c 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Mutation } from 'react-apollo';
+import { Mutation, Query } from 'react-apollo';
 import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
@@ -10,15 +10,19 @@ class Signin extends Component {
     password: 'abc123',
   };
 
-  loginUser = async (e, signin) => {
+  loginUser = async (e, signin, refetchUser) => {
     e.preventDefault();
     const res = await signin();
     localStorage.setItem('token', res.data.signin.token);
+    await refetchUser();
     // TODO refetch current user query
   };
 
-  update = (proxy, result) => {
-    console.log(proxy, result);
+  update = (proxy, payload) => {
+    console.log(proxy);
+    const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
+    data.me = payload.data.signin.user;
+    proxy.writeQuery({ query: CURRENT_USER_QUERY, data });
   };
 
   saveToState = e => {
@@ -27,46 +31,46 @@ 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
-        update={this.update}
-        mutation={SIGNIN_MUTATION}
-        variables={this.state}
-        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
-      >
-        {(signin, { data, loading, error }) => (
-          <Form onSubmit={e => this.loginUser(e, 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>
+      <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>
 
-              <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>
+      </Query>
     );
   }
 }
-- 
cgit v1.3