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 { }
- +
-
+
{retention &&
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) {