Refactor UserIndex to use its own state instead of Redux

app/soapbox/actions/admin.js

@@ -133,6 +133,7 @@ export function fetchUsers(params) {
       .then(({ data: { users, count, page_size: pageSize } }) => {
         dispatch(fetchRelationships(users.map(user => user.id)));
         dispatch({ type: ADMIN_USERS_FETCH_SUCCESS, users, count, pageSize, params });
+        return { users, count, pageSize };
       }).catch(error => {
         dispatch({ type: ADMIN_USERS_FETCH_FAIL, error, params });
       });

app/soapbox/features/admin/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
+import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
@@ -92,14 +93,14 @@ class Dashboard extends ImmutablePureComponent {
             </div>
           </div>}
           <div className='dashcounter'>
-            <a href='/pleroma/admin/#/users/index' target='_blank'>
+            <Link to='/admin/users'>
               <div className='dashcounter__num'>
                 <FormattedNumber value={userCount} />
               </div>
               <div className='dashcounter__label'>
                 <FormattedMessage id='admin.dashcounters.user_count_label' defaultMessage='total users' />
               </div>
-            </a>
+            </Link>
           </div>
           {retention && <div className='dashcounter'>
             <div>

app/soapbox/features/admin/user_index.js

@@ -2,61 +2,82 @@ import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
-import LoadingIndicator from 'soapbox/components/loading_indicator';
 import { fetchUsers } from 'soapbox/actions/admin';
 import { FormattedMessage } 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 { Set as ImmutableSet, OrderedSet as ImmutableOrderedSet, is } from 'immutable';
 
-const mapStateToProps = state => {
-  return {
-    accountIds: state.getIn(['admin', 'usersList']),
-    hasMore: false,
-  };
-};
-
-export default @connect(mapStateToProps)
+export default @connect()
 class UserIndex extends ImmutablePureComponent {
 
   static propTypes = {
-    params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-    hasMore: PropTypes.bool,
-    diffCount: PropTypes.number,
-    isAccount: PropTypes.bool,
-    unavailable: PropTypes.bool,
   };
 
+  state = {
+    isLoading: true,
+    filters: ImmutableSet(['local', 'active']),
+    accountIds: ImmutableOrderedSet(),
+    total: Infinity,
+    page: 0,
+  }
+
+  clearState = () => {
+    this.setState({
+      isLoading: true,
+      page: 0,
+    });
+  }
+
+  fetchNextPage = () => {
+    const nextPage = this.state.page + 1;
+    const filters = this.state.filters.toJS().join();
+
+    this.props.dispatch(fetchUsers({ filters, page: nextPage }))
+      .then(({ users, count }) => {
+        const newIds = users.map(user => user.id);
+
+        this.setState({
+          isLoading: false,
+          accountIds: this.state.accountIds.union(newIds),
+          total: count,
+          page: nextPage,
+        });
+      })
+      .catch(() => {});
+  }
+
   componentDidMount() {
-    this.props.dispatch(fetchUsers({ filters: 'local,active' }));
+    this.fetchNextPage();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!is(this.state.filters, prevState.filters) || !is(this.state.q, prevState.q)) {
+      this.clearState();
+      this.fetchNextPage();
+    }
   }
 
   handleLoadMore = debounce(() => {
-    // if (this.props.accountId && this.props.accountId !== -1) {
-    //   this.props.dispatch(expandFollowers(this.props.accountId));
-    // }
-  }, 300, { leading: true });
+    this.fetchNextPage();
+  }, 2000, { leading: true });
 
   render() {
-    const { accountIds, hasMore } = this.props;
+    const { accountIds, isLoading } = this.state;
+    const hasMore = accountIds.count() < this.state.total;
 
-    if (!accountIds) {
-      return (
-        <Column>
-          <LoadingIndicator />
-        </Column>
-      );
-    }
+    const showLoading = isLoading && accountIds.isEmpty();
 
     return (
       <Column>
         <ScrollableList
           scrollKey='user-index'
           hasMore={hasMore}
+          isLoading={isLoading}
+          showLoading={showLoading}
           onLoadMore={this.handleLoadMore}
           emptyMessage={<FormattedMessage id='admin.user_index.empty' defaultMessage='No users found.' />}
         >

app/soapbox/reducers/admin.js

@@ -21,7 +21,6 @@ const initialState = ImmutableMap({
   reports: ImmutableMap(),
   openReports: ImmutableOrderedSet(),
   users: ImmutableMap(),
-  usersList: ImmutableOrderedSet(),
   awaitingApproval: ImmutableOrderedSet(),
   configs: ImmutableList(),
   needsReboot: false,
@@ -29,8 +28,6 @@ const initialState = ImmutableMap({
 
 function importUsers(state, users) {
   return state.withMutations(state => {
-    const ids = users.map(user => user.id);
-    state.update('usersList', ImmutableOrderedSet(), items => items.union(ids));
     users.forEach(user => {
       user = normalizePleromaUserFields(user);
       if (!user.is_approved) {