#450

app/components/manage-users/UserSearch.jsx

@@ -3,7 +3,14 @@ import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { H1, Link } from '@pubsweet/ui'
 import { withApollo } from 'react-apollo'
-import { Page, SearchForm, ZebraList, ZebraListItem } from '../ui/'
+import {
+  Page,
+  SearchForm,
+  ZebraList,
+  ZebraListItem,
+  Loading,
+  LoadingIcon,
+} from '../ui/'
 import { USERS_BY_NAME, USERS_BY_EMAIL } from './queries'
 
 const SearchArea = styled.div`
@@ -45,6 +52,7 @@ class UserSearch extends React.Component {
       searchByName: props.searchByName ? props.searchByName : '',
       searchByEmail: props.searchByEmail ? props.searchByEmail : '',
       results: [],
+      emptyResults: false,
     }
     this.onSearchValChanged = this.onSearchValChanged.bind(this)
     this.onSearchValSubmitted = this.onSearchValSubmitted.bind(this)
@@ -61,21 +69,31 @@ class UserSearch extends React.Component {
         variables: { name: this.state.searchByName },
         fetchPolicy: 'network-only',
       }
-      this.setState({ searchByEmail: '' })
+      this.setState({ searchByEmail: '', loading: true })
     } else {
       options = {
         query: USERS_BY_EMAIL,
         variables: { email: this.state.searchByEmail },
         fetchPolicy: 'network-only',
       }
-      this.setState({ searchByName: '' })
+      this.setState({ searchByName: '', loading: true })
     }
-    this.props.client
-      .query(options)
-      .then(response => this.setState({ results: response.data[searchForm] }))
+    this.props.client.query(options).then(response =>
+      this.setState({
+        results: response.data[searchForm],
+        loading: false,
+        emptyResults: response.data[searchForm].length === 0,
+      }),
+    )
   }
   render() {
-    const { searchByName, searchByEmail, results } = this.state
+    const {
+      searchByName,
+      searchByEmail,
+      results,
+      loading,
+      emptyResults,
+    } = this.state
     return (
       <Page>
         <H1>Manage Users</H1>
@@ -128,6 +146,12 @@ class UserSearch extends React.Component {
               )
             })}
           </ZebraList>
+          {loading && (
+            <Loading>
+              <LoadingIcon />
+            </Loading>
+          )}
+          {emptyResults && <div> No results found for this search.</div>}
         </div>
       </Page>
     )