diff options
Diffstat (limited to 'frontend/components')
| -rw-r--r-- | frontend/components/DeleteItem.js | 5 | ||||
| -rw-r--r-- | frontend/components/Signin.js | 80 |
2 files changed, 38 insertions, 47 deletions
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 { } }} > - × 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> ); } } |
