diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-05-16 13:53:07 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-05-16 13:53:07 -0400 |
| commit | fceade857ecccad6884fe03a973215bd9df1a1e7 (patch) | |
| tree | 1af26e1116ac4ca54afa35ba932b1d35ec328861 /frontend | |
| parent | 7ec0943b5d48eb268d03cfa6321c7d83a0d02883 (diff) | |
simplyfyyyy
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/components/Pagination.js | 1 | ||||
| -rw-r--r-- | frontend/components/Reset.js | 5 | ||||
| -rw-r--r-- | frontend/components/Search.js | 15 | ||||
| -rw-r--r-- | frontend/components/Signin.js | 83 | ||||
| -rw-r--r-- | frontend/components/Signup.js | 108 | ||||
| -rw-r--r-- | frontend/queries/queries.graphql | 13 |
6 files changed, 108 insertions, 117 deletions
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js index d56b100..380026d 100644 --- a/frontend/components/Pagination.js +++ b/frontend/components/Pagination.js @@ -37,7 +37,6 @@ const Pagination = props => ( const { aggregate } = data.itemsConnection; const { page } = props; const pages = Math.ceil(aggregate.count / perPage); - // TODO prefetch this return ( <PaginationStyles data-test="pagination"> <Link diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js index 0815262..c4d791c 100644 --- a/frontend/components/Reset.js +++ b/frontend/components/Reset.js @@ -22,10 +22,7 @@ class Reset extends React.Component { resetPassword = async (e, resetMutation) => { e.preventDefault(); - const res = await resetMutation(); - // sign them in! - localStorage.setItem('token', res.data.resetPassword.token); - // TODO: Manually call refresh on a Query + await resetMutation(); }; render() { diff --git a/frontend/components/Search.js b/frontend/components/Search.js index eb00d93..9f43d36 100644 --- a/frontend/components/Search.js +++ b/frontend/components/Search.js @@ -64,14 +64,18 @@ class AutoComplete extends React.Component { items: [], loading: false, }; - onChange = debounce(async (e, client) => { + onChange = async (e, client) => { if (!e.target.value) { return this.setState({ items: [] }); } this.setState({ loading: true }); + this.search(client, e.target.value); + }; + + search = debounce(async (client, searchTerm) => { const res = await client.query({ query: SEARCH_ITEMS_QUERY, - variables: { searchTerm: e.target.value }, + variables: { searchTerm }, }); this.setState({ items: res.data.items, loading: false }); }, 350); @@ -112,9 +116,10 @@ class AutoComplete extends React.Component { </DropDownItem> ))} {/* Found Nothing State */} - {!this.state.items.length && ( - <DropDownItem>Nothing Found for {inputValue}...</DropDownItem> - )} + {!this.state.items.length && + !this.state.loading && ( + <DropDownItem>Nothing Found for {inputValue}...</DropDownItem> + )} </DropDown> )} </div> diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js index 7a4db8c..23a5835 100644 --- a/frontend/components/Signin.js +++ b/frontend/components/Signin.js @@ -9,14 +9,6 @@ class Signin extends Component { email: `wesbos@gmail.com`, password: 'abc123', }; - - loginUser = async (e, signin, client) => { - e.preventDefault(); - const res = await signin(); - // TODO instead of refetching, can we just use the data returned? - client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); - }; - saveToState = e => { const { name, value } = e.target; this.setState({ [name]: value }); @@ -24,44 +16,49 @@ class Signin extends Component { render() { return ( - <ApolloConsumer> - {client => ( - <Mutation mutation={SIGNIN_MUTATION} variables={this.state}> - {(signin, { 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> + <Mutation + mutation={SIGNIN_MUTATION} + variables={this.state} + refetchQueries={[{ query: CURRENT_USER_QUERY }]} + > + {(signin, { loading, error }) => ( + <Form + onSubmit={e => { + e.preventDefault(); + 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> - <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> )} - </ApolloConsumer> + </Mutation> ); } } diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js index ef622ed..624bc10 100644 --- a/frontend/components/Signup.js +++ b/frontend/components/Signup.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Mutation, ApolloConsumer } from 'react-apollo'; +import { Mutation } from 'react-apollo'; import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql'; import Form from './styles/Form'; import Error from './ErrorMessage'; @@ -18,64 +18,62 @@ class Signup extends Component { render() { return ( - <ApolloConsumer> - {client => ( - <Mutation mutation={SIGNUP_MUTATION} variables={this.state}> - {(signup, { loading, error }) => ( - <Form - method="post" - onSubmit={async e => { - e.preventDefault(); - const res = await signup(); - // TODO can we return theuser from signup? - client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); - }} - > - <fieldset disabled={loading} aria-busy={loading}> - <Error error={error} /> - <h2>Sign Up for an Account</h2> - <label htmlFor="email"> - Email - <input - value={this.state.email} - onChange={this.saveToState} - name="email" - type="text" - placeholder="email" - /> - </label> + <Mutation + mutation={SIGNUP_MUTATION} + variables={this.state} + refetchQueries={[{ query: CURRENT_USER_QUERY }]} + > + {(signup, { loading, error }) => ( + <Form + method="post" + onSubmit={async e => { + e.preventDefault(); + const res = await signup(); + }} + > + <fieldset disabled={loading} aria-busy={loading}> + <Error error={error} /> + <h2>Sign Up for an Account</h2> + <label htmlFor="email"> + Email + <input + value={this.state.email} + onChange={this.saveToState} + name="email" + type="text" + placeholder="email" + /> + </label> - <label htmlFor="name"> - Name - <input - type="text" - name="name" - placeholder="name" - value={this.state.name} - onChange={this.saveToState} - /> - </label> + <label htmlFor="name"> + Name + <input + type="text" + name="name" + placeholder="name" + value={this.state.name} + onChange={this.saveToState} + /> + </label> - <label htmlFor="signupPassword"> - Password - <input - type="password" - name="password" - id="signupPassword" - className="password" - placeholder="password" - value={this.state.password} - onChange={this.saveToState} - /> - </label> + <label htmlFor="signupPassword"> + Password + <input + type="password" + name="password" + id="signupPassword" + className="password" + placeholder="password" + value={this.state.password} + onChange={this.saveToState} + /> + </label> - <button type="submit">Submit</button> - </fieldset> - </Form> - )} - </Mutation> + <button type="submit">Submit</button> + </fieldset> + </Form> )} - </ApolloConsumer> + </Mutation> ); } } diff --git a/frontend/queries/queries.graphql b/frontend/queries/queries.graphql index 22e5f29..2ee2c8b 100644 --- a/frontend/queries/queries.graphql +++ b/frontend/queries/queries.graphql @@ -16,18 +16,14 @@ mutation CREATE_ITEM_MUTATION($description: String!, $title: String!, $price: In mutation SIGNUP_MUTATION($email: String!, $name: String!, $password: String!) { signup(email: $email, name: $name, password: $password) { - token - user { - id - email - name - } + id + email + name } } mutation SIGNIN_MUTATION($email: String!, $password: String!) { signin(email: $email, password: $password) { - token user { id email @@ -38,7 +34,7 @@ mutation SIGNIN_MUTATION($email: String!, $password: String!) { mutation SIGN_OUT_MUTATION { signout { - id + message } } @@ -50,7 +46,6 @@ mutation REQUEST_RESET_MUTATION($email: String!) { mutation RESET_MUTATION($resetToken: String!, $password: String!, $confirmPassword: String!) { resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) { - token user { id email |
