From e4df3c3f2e64467d28eb60a5690f4a17cd076115 Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Fri, 12 Oct 2018 13:21:21 -0400 Subject: [PATCH 01/10] Add client view initial search content #158 --- src/views/Clients/ViewClients/index.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index 23638a0a..db6aa55f 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -13,8 +13,10 @@ import Button from '../../../components/Button'; import ClientsTable from '../../../components/ClientsTable'; import { VIEW_CLIENTS_PAGE_SIZE } from '../../../utils/constants'; import clientsQuery from './clients.graphql'; +import { withAuth } from '../../../utils/Auth'; @hot(module) +@withAuth @graphql(clientsQuery, { options: () => ({ variables: { @@ -30,8 +32,11 @@ import clientsQuery from './clients.graphql'; }, })) export default class ViewWorker extends PureComponent { + componentDidMount() { + this.handleClientSearchSubmit(); + } state = { - clientSearch: '', + clientSearch: this.props.user.credentials.clientId, }; handlePageChange = ({ cursor, previousCursor }) => { @@ -78,7 +83,9 @@ export default class ViewWorker extends PureComponent { }; handleClientSearchSubmit = e => { - e.preventDefault(); + if (e) { + e.preventDefault(); + } const { data: { refetch }, From 367df6b356af10b380fad8c070c575387e36226a Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Fri, 12 Oct 2018 15:24:14 -0400 Subject: [PATCH 02/10] add full list and fix log out error --- src/views/Clients/ViewClients/index.jsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index db6aa55f..a27e71d0 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -36,7 +36,7 @@ export default class ViewWorker extends PureComponent { this.handleClientSearchSubmit(); } state = { - clientSearch: this.props.user.credentials.clientId, + clientSearch: this.props.user ? this.props.user.credentials.clientId : '', }; handlePageChange = ({ cursor, previousCursor }) => { @@ -93,13 +93,9 @@ export default class ViewWorker extends PureComponent { const { clientSearch } = this.state; refetch({ - ...(clientSearch - ? { - clientOptions: { - prefix: clientSearch, - }, - } - : null), + clientOptions: { + ...(clientSearch ? { prefix: clientSearch } : null), + }, clientsConnection: { limit: VIEW_CLIENTS_PAGE_SIZE, }, From cac347619077c80348e992a55ce897ab15a364f0 Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Fri, 12 Oct 2018 16:17:57 -0400 Subject: [PATCH 03/10] remove any spaces from search query --- src/views/Clients/ViewClients/index.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index a27e71d0..e6193401 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -82,11 +82,16 @@ export default class ViewWorker extends PureComponent { this.setState({ clientSearch: target.value }); }; - handleClientSearchSubmit = e => { + handleClientSearchSubmit = async e => { if (e) { e.preventDefault(); } + await this.setState({ + clientSearch: this.state.clientSearch.replace(/\s/g, ''), + }); + console.log(`${this.state.clientSearch}test`) + const { data: { refetch }, } = this.props; From 80c5a74aa748be0269ec78a222574e00ef80178c Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Fri, 12 Oct 2018 16:19:42 -0400 Subject: [PATCH 04/10] remove console.log --- src/views/Clients/ViewClients/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index e6193401..80745343 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -90,7 +90,6 @@ export default class ViewWorker extends PureComponent { await this.setState({ clientSearch: this.state.clientSearch.replace(/\s/g, ''), }); - console.log(`${this.state.clientSearch}test`) const { data: { refetch }, From 58e7c60a41800359df678b5d7a3fe464212822bf Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Fri, 12 Oct 2018 17:21:46 -0400 Subject: [PATCH 05/10] replace regex with trim --- src/views/Clients/ViewClients/index.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index 80745343..84e5b629 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -82,15 +82,11 @@ export default class ViewWorker extends PureComponent { this.setState({ clientSearch: target.value }); }; - handleClientSearchSubmit = async e => { + handleClientSearchSubmit = e => { if (e) { e.preventDefault(); } - await this.setState({ - clientSearch: this.state.clientSearch.replace(/\s/g, ''), - }); - const { data: { refetch }, } = this.props; @@ -98,7 +94,7 @@ export default class ViewWorker extends PureComponent { refetch({ clientOptions: { - ...(clientSearch ? { prefix: clientSearch } : null), + ...(clientSearch ? { prefix: clientSearch.trim() } : null), }, clientsConnection: { limit: VIEW_CLIENTS_PAGE_SIZE, From b6e98753b655182945fb993631d501ba851b0723 Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Mon, 15 Oct 2018 11:30:41 -0400 Subject: [PATCH 06/10] remove componentDidMount --- src/views/Clients/ViewClients/index.jsx | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index 84e5b629..12a4107a 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -18,8 +18,11 @@ import { withAuth } from '../../../utils/Auth'; @hot(module) @withAuth @graphql(clientsQuery, { - options: () => ({ + options: props => ({ variables: { + clientOptions: { + ...(props.user ? { prefix: props.user.credentials.clientId } : null), + }, clientsConnection: { limit: VIEW_CLIENTS_PAGE_SIZE, }, @@ -32,9 +35,19 @@ import { withAuth } from '../../../utils/Auth'; }, })) export default class ViewWorker extends PureComponent { - componentDidMount() { - this.handleClientSearchSubmit(); + // Update default search query for when user logs in or out + componentDidUpdate(prevProps) { + if (this.props.user && !prevProps.user) { + this.setState({ + clientSearch: this.props.user.credentials.clientId, + }); + } else if (!this.props.user && prevProps.user) { + this.setState({ + clientSearch: '', + }); + } } + state = { clientSearch: this.props.user ? this.props.user.credentials.clientId : '', }; @@ -83,9 +96,7 @@ export default class ViewWorker extends PureComponent { }; handleClientSearchSubmit = e => { - if (e) { - e.preventDefault(); - } + e.preventDefault(); const { data: { refetch }, From db90b15787257e0c70c955917bc3a940891c9cf6 Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Mon, 15 Oct 2018 14:18:24 -0400 Subject: [PATCH 07/10] remove didComponentUpdate --- src/views/Clients/ViewClients/index.jsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index 12a4107a..3d0145f1 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -35,19 +35,6 @@ import { withAuth } from '../../../utils/Auth'; }, })) export default class ViewWorker extends PureComponent { - // Update default search query for when user logs in or out - componentDidUpdate(prevProps) { - if (this.props.user && !prevProps.user) { - this.setState({ - clientSearch: this.props.user.credentials.clientId, - }); - } else if (!this.props.user && prevProps.user) { - this.setState({ - clientSearch: '', - }); - } - } - state = { clientSearch: this.props.user ? this.props.user.credentials.clientId : '', }; @@ -123,7 +110,6 @@ export default class ViewWorker extends PureComponent { description, data: { loading, error, clients }, } = this.props; - const { clientSearch } = this.state; return ( Date: Mon, 15 Oct 2018 16:24:23 -0400 Subject: [PATCH 08/10] add async/await to sign in/out and add getDerivedStatefromProps to clients view --- src/components/Dashboard/UserMenu.jsx | 6 +++--- src/components/SignInDialog/index.jsx | 8 ++++---- src/views/Clients/ViewClients/index.jsx | 22 +++++++++++++++++++++- 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/components/Dashboard/UserMenu.jsx b/src/components/Dashboard/UserMenu.jsx index 3ff85f3b..d573cab3 100644 --- a/src/components/Dashboard/UserMenu.jsx +++ b/src/components/Dashboard/UserMenu.jsx @@ -59,12 +59,12 @@ export default class UserMenu extends Component { this.setState({ signInDialogOpen: false }); }; - handleClickSignOut = () => { + handleClickSignOut = async () => { this.handleMenuClose(); - this.props.onUnauthorize(); // Since Apollo caches query results, it’s important to get rid of them // when the login state changes. - this.props.client.resetStore(); + await this.props.client.resetStore(); + this.props.onUnauthorize(); }; render() { diff --git a/src/components/SignInDialog/index.jsx b/src/components/SignInDialog/index.jsx index 80983fd8..b03c6e98 100644 --- a/src/components/SignInDialog/index.jsx +++ b/src/components/SignInDialog/index.jsx @@ -44,11 +44,14 @@ export default class SignInDialog extends Component { ); } - handleCredentialsSignIn = credentials => { + handleCredentialsSignIn = async credentials => { const inOneWeek = new Date(); inOneWeek.setDate(inOneWeek.getDate() + 7); + // Since Apollo caches query results, it’s important to get rid of them + // when the login state changes. + await this.props.client.resetStore(); this.props.onAuthorize({ credentials, expires: inOneWeek.toISOString(), @@ -57,9 +60,6 @@ export default class SignInDialog extends Component { displayName: credentials.clientId, }, }); - // Since Apollo caches query results, it’s important to get rid of them - // when the login state changes. - this.props.client.resetStore(); this.props.onClose(); }; diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index 3d0145f1..e7632a17 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -37,8 +37,27 @@ import { withAuth } from '../../../utils/Auth'; export default class ViewWorker extends PureComponent { state = { clientSearch: this.props.user ? this.props.user.credentials.clientId : '', + clientId: this.props.user ? this.props.user.credentials.clientId : '', }; + static getDerivedStateFromProps(props, state) { + // Any time the current user changes, + // Reset state to reflect new user / log out and default clientSearch query + if (props.user && props.user.credentials.clientId !== state.clientId) { + return { + clientSearch: props.user.credentials.clientId, + clientId: props.user.credentials.clientId, + }; + } else if (!props.user && state.clientId !== '') { + return { + clientSearch: '', + clientId: '', + }; + } + + return null; + } + handlePageChange = ({ cursor, previousCursor }) => { const { data: { fetchMore }, @@ -110,6 +129,7 @@ export default class ViewWorker extends PureComponent { description, data: { loading, error, clients }, } = this.props; + const { clientSearch } = this.state; return ( Date: Tue, 16 Oct 2018 15:34:57 -0400 Subject: [PATCH 09/10] edit to previousClientId --- src/views/Clients/ViewClients/index.jsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index e7632a17..457a3bbd 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -34,24 +34,27 @@ import { withAuth } from '../../../utils/Auth'; ...theme.mixins.fab, }, })) -export default class ViewWorker extends PureComponent { +export default class ViewClients extends PureComponent { state = { - clientSearch: this.props.user ? this.props.user.credentials.clientId : '', - clientId: this.props.user ? this.props.user.credentials.clientId : '', + clientSearch: '', + previousClientId: '', }; static getDerivedStateFromProps(props, state) { // Any time the current user changes, // Reset state to reflect new user / log out and default clientSearch query - if (props.user && props.user.credentials.clientId !== state.clientId) { + if ( + props.user && + props.user.credentials.clientId !== state.previousClientId + ) { return { clientSearch: props.user.credentials.clientId, - clientId: props.user.credentials.clientId, + previousClientId: props.user.credentials.clientId, }; - } else if (!props.user && state.clientId !== '') { + } else if (!props.user && state.previousClientId !== '') { return { clientSearch: '', - clientId: '', + previousClientId: '', }; } From 74b52d987b08b880003cd1d9c39a43ab82b7af96 Mon Sep 17 00:00:00 2001 From: Jason Yang Date: Wed, 17 Oct 2018 10:21:31 -0400 Subject: [PATCH 10/10] disable no unsused state for previousClientId --- src/views/Clients/ViewClients/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/Clients/ViewClients/index.jsx b/src/views/Clients/ViewClients/index.jsx index 457a3bbd..4517a9d8 100644 --- a/src/views/Clients/ViewClients/index.jsx +++ b/src/views/Clients/ViewClients/index.jsx @@ -37,6 +37,7 @@ import { withAuth } from '../../../utils/Auth'; export default class ViewClients extends PureComponent { state = { clientSearch: '', + // eslint-disable-next-line react/no-unused-state previousClientId: '', };