Fix WebUI pagination of following, followers, follow requests, blocks and mutes lists (#13445)

* Fix following, followers and follow requests pagination

* Fix pagination of blocks and mutes

app/javascript/mastodon/features/blocks/index.js

@@ -19,6 +19,7 @@ const messages = defineMessages({
 const mapStateToProps = state => ({
   accountIds: state.getIn(['user_lists', 'blocks', 'items']),
   hasMore: !!state.getIn(['user_lists', 'blocks', 'next']),
+  isLoading: state.getIn(['user_lists', 'blocks', 'isLoading'], true),
 });
 
 export default @connect(mapStateToProps)
@@ -31,6 +32,7 @@ class Blocks extends ImmutablePureComponent {
     shouldUpdateScroll: PropTypes.func,
     accountIds: ImmutablePropTypes.list,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
   };
@@ -44,7 +46,7 @@ class Blocks extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { intl, accountIds, shouldUpdateScroll, hasMore, multiColumn } = this.props;
+    const { intl, accountIds, shouldUpdateScroll, hasMore, multiColumn, isLoading } = this.props;
 
     if (!accountIds) {
       return (
@@ -63,6 +65,7 @@ class Blocks extends ImmutablePureComponent {
           scrollKey='blocks'
           onLoadMore={this.handleLoadMore}
           hasMore={hasMore}
+          isLoading={isLoading}
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}

app/javascript/mastodon/features/follow_requests/index.js

@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   accountIds: state.getIn(['user_lists', 'follow_requests', 'items']),
+  isLoading: state.getIn(['user_lists', 'follow_requests', 'isLoading'], true),
   hasMore: !!state.getIn(['user_lists', 'follow_requests', 'next']),
   locked: !!state.getIn(['accounts', me, 'locked']),
   domain: state.getIn(['meta', 'domain']),
@@ -33,6 +34,7 @@ class FollowRequests extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     shouldUpdateScroll: PropTypes.func,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     accountIds: ImmutablePropTypes.list,
     locked: PropTypes.bool,
     domain: PropTypes.string,
@@ -49,7 +51,7 @@ class FollowRequests extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { intl, shouldUpdateScroll, accountIds, hasMore, multiColumn, locked, domain } = this.props;
+    const { intl, shouldUpdateScroll, accountIds, hasMore, multiColumn, locked, domain, isLoading } = this.props;
 
     if (!accountIds) {
       return (
@@ -77,6 +79,7 @@ class FollowRequests extends ImmutablePureComponent {
           scrollKey='follow_requests'
           onLoadMore={this.handleLoadMore}
           hasMore={hasMore}
+          isLoading={isLoading}
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}

app/javascript/mastodon/features/followers/index.js

@@ -22,6 +22,7 @@ const mapStateToProps = (state, props) => ({
   isAccount: !!state.getIn(['accounts', props.params.accountId]),
   accountIds: state.getIn(['user_lists', 'followers', props.params.accountId, 'items']),
   hasMore: !!state.getIn(['user_lists', 'followers', props.params.accountId, 'next']),
+  isLoading: state.getIn(['user_lists', 'followers', props.params.accountId, 'isLoading'], true),
   blockedBy: state.getIn(['relationships', props.params.accountId, 'blocked_by'], false),
 });
 
@@ -34,6 +35,7 @@ class Followers extends ImmutablePureComponent {
     shouldUpdateScroll: PropTypes.func,
     accountIds: ImmutablePropTypes.list,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     blockedBy: PropTypes.bool,
     isAccount: PropTypes.bool,
     multiColumn: PropTypes.bool,
@@ -58,7 +60,7 @@ class Followers extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn } = this.props;
+    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn, isLoading } = this.props;
 
     if (!isAccount) {
       return (
@@ -85,6 +87,7 @@ class Followers extends ImmutablePureComponent {
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}
+          isLoading={isLoading}
           onLoadMore={this.handleLoadMore}
           shouldUpdateScroll={shouldUpdateScroll}
           prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}

app/javascript/mastodon/features/following/index.js

@@ -22,6 +22,7 @@ const mapStateToProps = (state, props) => ({
   isAccount: !!state.getIn(['accounts', props.params.accountId]),
   accountIds: state.getIn(['user_lists', 'following', props.params.accountId, 'items']),
   hasMore: !!state.getIn(['user_lists', 'following', props.params.accountId, 'next']),
+  isLoading: state.getIn(['user_lists', 'following', props.params.accountId, 'isLoading'], true),
   blockedBy: state.getIn(['relationships', props.params.accountId, 'blocked_by'], false),
 });
 
@@ -34,6 +35,7 @@ class Following extends ImmutablePureComponent {
     shouldUpdateScroll: PropTypes.func,
     accountIds: ImmutablePropTypes.list,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     blockedBy: PropTypes.bool,
     isAccount: PropTypes.bool,
     multiColumn: PropTypes.bool,
@@ -58,7 +60,7 @@ class Following extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn } = this.props;
+    const { shouldUpdateScroll, accountIds, hasMore, blockedBy, isAccount, multiColumn, isLoading } = this.props;
 
     if (!isAccount) {
       return (
@@ -85,6 +87,7 @@ class Following extends ImmutablePureComponent {
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}
+          isLoading={isLoading}
           onLoadMore={this.handleLoadMore}
           shouldUpdateScroll={shouldUpdateScroll}
           prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}

app/javascript/mastodon/features/mutes/index.js

@@ -19,6 +19,7 @@ const messages = defineMessages({
 const mapStateToProps = state => ({
   accountIds: state.getIn(['user_lists', 'mutes', 'items']),
   hasMore: !!state.getIn(['user_lists', 'mutes', 'next']),
+  isLoading: state.getIn(['user_lists', 'mutes', 'isLoading'], true),
 });
 
 export default @connect(mapStateToProps)
@@ -30,6 +31,7 @@ class Mutes extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     shouldUpdateScroll: PropTypes.func,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
     accountIds: ImmutablePropTypes.list,
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
@@ -44,7 +46,7 @@ class Mutes extends ImmutablePureComponent {
   }, 300, { leading: true });
 
   render () {
-    const { intl, shouldUpdateScroll, hasMore, accountIds, multiColumn } = this.props;
+    const { intl, shouldUpdateScroll, hasMore, accountIds, multiColumn, isLoading } = this.props;
 
     if (!accountIds) {
       return (
@@ -63,6 +65,7 @@ class Mutes extends ImmutablePureComponent {
           scrollKey='mutes'
           onLoadMore={this.handleLoadMore}
           hasMore={hasMore}
+          isLoading={isLoading}
           shouldUpdateScroll={shouldUpdateScroll}
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}

app/javascript/mastodon/reducers/user_lists.js

@@ -2,12 +2,24 @@ import {
   NOTIFICATIONS_UPDATE,
 } from '../actions/notifications';
 import {
+  FOLLOWERS_FETCH_REQUEST,
   FOLLOWERS_FETCH_SUCCESS,
+  FOLLOWERS_FETCH_FAIL,
+  FOLLOWERS_EXPAND_REQUEST,
   FOLLOWERS_EXPAND_SUCCESS,
+  FOLLOWERS_EXPAND_FAIL,
+  FOLLOWING_FETCH_REQUEST,
   FOLLOWING_FETCH_SUCCESS,
+  FOLLOWING_FETCH_FAIL,
+  FOLLOWING_EXPAND_REQUEST,
   FOLLOWING_EXPAND_SUCCESS,
+  FOLLOWING_EXPAND_FAIL,
+  FOLLOW_REQUESTS_FETCH_REQUEST,
   FOLLOW_REQUESTS_FETCH_SUCCESS,
+  FOLLOW_REQUESTS_FETCH_FAIL,
+  FOLLOW_REQUESTS_EXPAND_REQUEST,
   FOLLOW_REQUESTS_EXPAND_SUCCESS,
+  FOLLOW_REQUESTS_EXPAND_FAIL,
   FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
   FOLLOW_REQUEST_REJECT_SUCCESS,
 } from '../actions/accounts';
@@ -16,12 +28,20 @@ import {
   FAVOURITES_FETCH_SUCCESS,
 } from '../actions/interactions';
 import {
+  BLOCKS_FETCH_REQUEST,
   BLOCKS_FETCH_SUCCESS,
+  BLOCKS_FETCH_FAIL,
+  BLOCKS_EXPAND_REQUEST,
   BLOCKS_EXPAND_SUCCESS,
+  BLOCKS_EXPAND_FAIL,
 } from '../actions/blocks';
 import {
+  MUTES_FETCH_REQUEST,
   MUTES_FETCH_SUCCESS,
+  MUTES_FETCH_FAIL,
+  MUTES_EXPAND_REQUEST,
   MUTES_EXPAND_SUCCESS,
+  MUTES_EXPAND_FAIL,
 } from '../actions/mutes';
 import {
   DIRECTORY_FETCH_REQUEST,
@@ -47,12 +67,13 @@ const normalizeList = (state, type, id, accounts, next) => {
   return state.setIn([type, id], ImmutableMap({
     next,
     items: ImmutableList(accounts.map(item => item.id)),
+    isLoading: false,
   }));
 };
 
 const appendToList = (state, type, id, accounts, next) => {
   return state.updateIn([type, id], map => {
-    return map.set('next', next).update('items', list => list.concat(accounts.map(item => item.id)));
+    return map.set('next', next).set('isLoading', false).update('items', list => list.concat(accounts.map(item => item.id)));
   });
 };
 
@@ -68,10 +89,22 @@ export default function userLists(state = initialState, action) {
     return normalizeList(state, 'followers', action.id, action.accounts, action.next);
   case FOLLOWERS_EXPAND_SUCCESS:
     return appendToList(state, 'followers', action.id, action.accounts, action.next);
+  case FOLLOWERS_FETCH_REQUEST:
+  case FOLLOWERS_EXPAND_REQUEST:
+    return state.setIn(['followers', action.id, 'isLoading'], true);
+  case FOLLOWERS_FETCH_FAIL:
+  case FOLLOWERS_EXPAND_FAIL:
+    return state.setIn(['followers', action.id, 'isLoading'], false);
   case FOLLOWING_FETCH_SUCCESS:
     return normalizeList(state, 'following', action.id, action.accounts, action.next);
   case FOLLOWING_EXPAND_SUCCESS:
     return appendToList(state, 'following', action.id, action.accounts, action.next);
+  case FOLLOWING_FETCH_REQUEST:
+  case FOLLOWING_EXPAND_REQUEST:
+    return state.setIn(['following', action.id, 'isLoading'], true);
+  case FOLLOWING_FETCH_FAIL:
+  case FOLLOWING_EXPAND_FAIL:
+    return state.setIn(['following', action.id, 'isLoading'], false);
   case REBLOGS_FETCH_SUCCESS:
     return state.setIn(['reblogged_by', action.id], ImmutableList(action.accounts.map(item => item.id)));
   case FAVOURITES_FETCH_SUCCESS:
@@ -79,9 +112,15 @@ export default function userLists(state = initialState, action) {
   case NOTIFICATIONS_UPDATE:
     return action.notification.type === 'follow_request' ? normalizeFollowRequest(state, action.notification) : state;
   case FOLLOW_REQUESTS_FETCH_SUCCESS:
-    return state.setIn(['follow_requests', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next);
+    return state.setIn(['follow_requests', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next).setIn(['follow_requests', 'isLoading'], false);
   case FOLLOW_REQUESTS_EXPAND_SUCCESS:
-    return state.updateIn(['follow_requests', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next);
+    return state.updateIn(['follow_requests', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next).setIn(['follow_requests', 'isLoading'], false);
+  case FOLLOW_REQUESTS_FETCH_REQUEST:
+  case FOLLOW_REQUESTS_EXPAND_REQUEST:
+    return state.setIn(['follow_requests', 'isLoading'], true);
+  case FOLLOW_REQUESTS_FETCH_FAIL:
+  case FOLLOW_REQUESTS_EXPAND_FAIL:
+    return state.setIn(['follow_requests', 'isLoading'], false);
   case FOLLOW_REQUEST_AUTHORIZE_SUCCESS:
   case FOLLOW_REQUEST_REJECT_SUCCESS:
     return state.updateIn(['follow_requests', 'items'], list => list.filterNot(item => item === action.id));
@@ -89,10 +128,22 @@ export default function userLists(state = initialState, action) {
     return state.setIn(['blocks', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['blocks', 'next'], action.next);
   case BLOCKS_EXPAND_SUCCESS:
     return state.updateIn(['blocks', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['blocks', 'next'], action.next);
+  case BLOCKS_FETCH_REQUEST:
+  case BLOCKS_EXPAND_REQUEST:
+    return state.setIn(['blocks', 'isLoading'], true);
+  case BLOCKS_FETCH_FAIL:
+  case BLOCKS_EXPAND_FAIL:
+    return state.setIn(['blocks', 'isLoading'], false);
   case MUTES_FETCH_SUCCESS:
     return state.setIn(['mutes', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['mutes', 'next'], action.next);
   case MUTES_EXPAND_SUCCESS:
     return state.updateIn(['mutes', 'items'], list => list.concat(action.accounts.map(item => item.id))).setIn(['mutes', 'next'], action.next);
+  case MUTES_FETCH_REQUEST:
+  case MUTES_EXPAND_REQUEST:
+    return state.setIn(['mutes', 'isLoading'], true);
+  case MUTES_FETCH_FAIL:
+  case MUTES_EXPAND_FAIL:
+    return state.setIn(['mutes', 'isLoading'], false);
   case DIRECTORY_FETCH_SUCCESS:
     return state.setIn(['directory', 'items'], ImmutableList(action.accounts.map(item => item.id))).setIn(['directory', 'isLoading'], false);
   case DIRECTORY_EXPAND_SUCCESS: