summaryrefslogtreecommitdiffstats
path: root/frontend/components
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-05-16 13:53:07 -0400
committerWes Bos <wesbos@gmail.com>2018-05-16 13:53:07 -0400
commitfceade857ecccad6884fe03a973215bd9df1a1e7 (patch)
tree1af26e1116ac4ca54afa35ba932b1d35ec328861 /frontend/components
parent7ec0943b5d48eb268d03cfa6321c7d83a0d02883 (diff)
simplyfyyyy
Diffstat (limited to 'frontend/components')
-rw-r--r--frontend/components/Pagination.js1
-rw-r--r--frontend/components/Reset.js5
-rw-r--r--frontend/components/Search.js15
-rw-r--r--frontend/components/Signin.js83
-rw-r--r--frontend/components/Signup.js108
5 files changed, 104 insertions, 108 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>
);
}
}