diff options
Diffstat (limited to 'frontend/components/Signin.js')
| -rw-r--r-- | frontend/components/Signin.js | 80 |
1 files changed, 35 insertions, 45 deletions
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> ); } } |
