UserIndex: style search input, rework debounced search

app/soapbox/features/admin/user_index.js

@@ -4,13 +4,20 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { fetchUsers } from 'soapbox/actions/admin';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
 import AccountContainer from 'soapbox/containers/account_container';
 import Column from 'soapbox/features/ui/components/column';
 import ScrollableList from 'soapbox/components/scrollable_list';
+import { SimpleForm, TextInput } from 'soapbox/features/forms';
 import { Set as ImmutableSet, OrderedSet as ImmutableOrderedSet, is } from 'immutable';
 
+const messages = defineMessages({
+  empty: { id: 'admin.user_index.empty', defaultMessage: 'No users found.' },
+  searchPlaceholder: { id: 'admin.user_index.search_input_placeholder', defaultMessage: 'Who are you looking for?' },
+});
+
 export default @connect()
+@injectIntl
 class UserIndex extends ImmutablePureComponent {
 
   static propTypes = {
@@ -63,19 +70,13 @@ class UserIndex extends ImmutablePureComponent {
     });
   }
 
-  refreshDebounced = debounce(() => {
-    this.refresh();
-  }, 1000)
-
   componentDidUpdate(prevProps, prevState) {
     const { filters, query } = this.state;
     const filtersChanged = !is(filters, prevState.filters);
     const queryChanged = query !== prevState.query;
 
-    if (filtersChanged) {
+    if (filtersChanged || queryChanged) {
       this.refresh();
-    } else if (queryChanged) {
-      this.refreshDebounced();
     }
   }
 
@@ -83,11 +84,16 @@ class UserIndex extends ImmutablePureComponent {
     this.fetchNextPage();
   }, 2000, { leading: true });
 
+  updateQuery = debounce(query => {
+    this.setState({ query });
+  }, 900)
+
   handleQueryChange = e => {
-    this.setState({ query: e.target.value });
-  }
+    this.updateQuery(e.target.value);
+  };
 
   render() {
+    const { intl } = this.props;
     const { accountIds, isLoading } = this.state;
     const hasMore = accountIds.count() < this.state.total;
 
@@ -95,14 +101,20 @@ class UserIndex extends ImmutablePureComponent {
 
     return (
       <Column>
-        <input value={this.state.q} onChange={this.handleQueryChange} />
+        <SimpleForm style={{ paddingBottom: 0 }}>
+          <TextInput
+            value={this.state.q}
+            onChange={this.handleQueryChange}
+            placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          />
+        </SimpleForm>
         <ScrollableList
           scrollKey='user-index'
           hasMore={hasMore}
           isLoading={isLoading}
           showLoading={showLoading}
           onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='admin.user_index.empty' defaultMessage='No users found.' />}
+          emptyMessage={intl.formatMessage(messages.empty)}
         >
           {accountIds.map(id =>
             <AccountContainer key={id} id={id} withNote={false} />,