diff --git a/app/soapbox/actions/admin.js b/app/soapbox/actions/admin.js
index 96f7e5e12..e65b840ce 100644
--- a/app/soapbox/actions/admin.js
+++ b/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 });
});
diff --git a/app/soapbox/features/admin/index.js b/app/soapbox/features/admin/index.js
index 0ed82bc66..ac6c1204a 100644
--- a/app/soapbox/features/admin/index.js
+++ b/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 {
}
diff --git a/app/soapbox/features/admin/user_index.js b/app/soapbox/features/admin/user_index.js
index 9501c3ceb..f14aef848 100644
--- a/app/soapbox/features/admin/user_index.js
+++ b/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 (
-
-
-
- );
- }
+ const showLoading = isLoading && accountIds.isEmpty();
return (
}
>
diff --git a/app/soapbox/reducers/admin.js b/app/soapbox/reducers/admin.js
index f8a654c74..58e8e354e 100644
--- a/app/soapbox/reducers/admin.js
+++ b/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) {