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
This commit is contained in:
		| @@ -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} | ||||
|   | ||||
| @@ -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} | ||||
|   | ||||
| @@ -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 />} | ||||
|   | ||||
| @@ -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 />} | ||||
|   | ||||
| @@ -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} | ||||
|   | ||||
| @@ -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: | ||||
|   | ||||
		Reference in New Issue
	
	Block a user