Add client view initial search content #158

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() {

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();
   };
 

src/views/Clients/ViewClients/index.jsx

@@ -13,11 +13,16 @@ 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: () => ({
+  options: props => ({
     variables: {
+      clientOptions: {
+        ...(props.user ? { prefix: props.user.credentials.clientId } : null),
+      },
       clientsConnection: {
         limit: VIEW_CLIENTS_PAGE_SIZE,
       },
@@ -29,11 +34,34 @@ import clientsQuery from './clients.graphql';
     ...theme.mixins.fab,
   },
 }))
-export default class ViewWorker extends PureComponent {
+export default class ViewClients extends PureComponent {
   state = {
     clientSearch: '',
+    // eslint-disable-next-line react/no-unused-state
+    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.previousClientId
+    ) {
+      return {
+        clientSearch: props.user.credentials.clientId,
+        previousClientId: props.user.credentials.clientId,
+      };
+    } else if (!props.user && state.previousClientId !== '') {
+      return {
+        clientSearch: '',
+        previousClientId: '',
+      };
+    }
+
+    return null;
+  }
+
   handlePageChange = ({ cursor, previousCursor }) => {
     const {
       data: { fetchMore },
@@ -86,13 +114,9 @@ export default class ViewWorker extends PureComponent {
     const { clientSearch } = this.state;
 
     refetch({
-      ...(clientSearch
-        ? {
-            clientOptions: {
-              prefix: clientSearch,
-            },
-          }
-        : null),
+      clientOptions: {
+        ...(clientSearch ? { prefix: clientSearch.trim() } : null),
+      },
       clientsConnection: {
         limit: VIEW_CLIENTS_PAGE_SIZE,
       },