diff --git a/app/soapbox/features/admin/user_index.js b/app/soapbox/features/admin/user_index.js index 5511fe444..8ae051080 100644 --- a/app/soapbox/features/admin/user_index.js +++ b/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 ( - + + + } + emptyMessage={intl.formatMessage(messages.empty)} > {accountIds.map(id => ,