From f382192862893c48cf97f13e9fbfb85b80cdc97d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 6 Apr 2022 22:53:29 +0200 Subject: [PATCH] Add pagination for trending statuses in web UI (#17976) --- app/javascript/mastodon/actions/trends.js | 54 +++++++++++++++++-- .../mastodon/features/explore/statuses.js | 15 ++++-- .../mastodon/reducers/status_lists.js | 7 +++ 3 files changed, 68 insertions(+), 8 deletions(-) diff --git a/app/javascript/mastodon/actions/trends.js b/app/javascript/mastodon/actions/trends.js index 304bbebefbc..edda0b5b5d0 100644 --- a/app/javascript/mastodon/actions/trends.js +++ b/app/javascript/mastodon/actions/trends.js @@ -1,4 +1,4 @@ -import api from '../api'; +import api, { getLinks } from '../api'; import { importFetchedStatuses } from './importer'; export const TRENDS_TAGS_FETCH_REQUEST = 'TRENDS_TAGS_FETCH_REQUEST'; @@ -13,6 +13,10 @@ export const TRENDS_STATUSES_FETCH_REQUEST = 'TRENDS_STATUSES_FETCH_REQUEST'; export const TRENDS_STATUSES_FETCH_SUCCESS = 'TRENDS_STATUSES_FETCH_SUCCESS'; export const TRENDS_STATUSES_FETCH_FAIL = 'TRENDS_STATUSES_FETCH_FAIL'; +export const TRENDS_STATUSES_EXPAND_REQUEST = 'TRENDS_STATUSES_EXPAND_REQUEST'; +export const TRENDS_STATUSES_EXPAND_SUCCESS = 'TRENDS_STATUSES_EXPAND_SUCCESS'; +export const TRENDS_STATUSES_EXPAND_FAIL = 'TRENDS_STATUSES_EXPAND_FAIL'; + export const fetchTrendingHashtags = () => (dispatch, getState) => { dispatch(fetchTrendingHashtagsRequest()); @@ -68,11 +72,16 @@ export const fetchTrendingLinksFail = error => ({ }); export const fetchTrendingStatuses = () => (dispatch, getState) => { + if (getState().getIn(['status_lists', 'trending', 'isLoading'])) { + return; + } + dispatch(fetchTrendingStatusesRequest()); - api(getState).get('/api/v1/trends/statuses').then(({ data }) => { - dispatch(importFetchedStatuses(data)); - dispatch(fetchTrendingStatusesSuccess(data)); + api(getState).get('/api/v1/trends/statuses').then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedStatuses(response.data)); + dispatch(fetchTrendingStatusesSuccess(response.data, next ? next.uri : null)); }).catch(err => dispatch(fetchTrendingStatusesFail(err))); }; @@ -81,9 +90,10 @@ export const fetchTrendingStatusesRequest = () => ({ skipLoading: true, }); -export const fetchTrendingStatusesSuccess = statuses => ({ +export const fetchTrendingStatusesSuccess = (statuses, next) => ({ type: TRENDS_STATUSES_FETCH_SUCCESS, statuses, + next, skipLoading: true, }); @@ -93,3 +103,37 @@ export const fetchTrendingStatusesFail = error => ({ skipLoading: true, skipAlert: true, }); + + +export const expandTrendingStatuses = () => (dispatch, getState) => { + const url = getState().getIn(['status_lists', 'trending', 'next'], null); + + if (url === null || getState().getIn(['status_lists', 'trending', 'isLoading'])) { + return; + } + + dispatch(expandTrendingStatusesRequest()); + + api(getState).get(url).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedStatuses(response.data)); + dispatch(expandTrendingStatusesSuccess(response.data, next ? next.uri : null)); + }).catch(error => { + dispatch(expandTrendingStatusesFail(error)); + }); +}; + +export const expandTrendingStatusesRequest = () => ({ + type: TRENDS_STATUSES_EXPAND_REQUEST, +}); + +export const expandTrendingStatusesSuccess = (statuses, next) => ({ + type: TRENDS_STATUSES_EXPAND_SUCCESS, + statuses, + next, +}); + +export const expandTrendingStatusesFail = error => ({ + type: TRENDS_STATUSES_EXPAND_FAIL, + error, +}); diff --git a/app/javascript/mastodon/features/explore/statuses.js b/app/javascript/mastodon/features/explore/statuses.js index 4e5530d84c4..33e5b417964 100644 --- a/app/javascript/mastodon/features/explore/statuses.js +++ b/app/javascript/mastodon/features/explore/statuses.js @@ -4,11 +4,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import StatusList from 'mastodon/components/status_list'; import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; -import { fetchTrendingStatuses } from 'mastodon/actions/trends'; +import { fetchTrendingStatuses, expandTrendingStatuses } from 'mastodon/actions/trends'; +import { debounce } from 'lodash'; const mapStateToProps = state => ({ statusIds: state.getIn(['status_lists', 'trending', 'items']), isLoading: state.getIn(['status_lists', 'trending', 'isLoading'], true), + hasMore: !!state.getIn(['status_lists', 'trending', 'next']), }); export default @connect(mapStateToProps) @@ -17,6 +19,7 @@ class Statuses extends React.PureComponent { static propTypes = { statusIds: ImmutablePropTypes.list, isLoading: PropTypes.bool, + hasMore: PropTypes.bool, multiColumn: PropTypes.bool, dispatch: PropTypes.func.isRequired, }; @@ -26,8 +29,13 @@ class Statuses extends React.PureComponent { dispatch(fetchTrendingStatuses()); } + handleLoadMore = debounce(() => { + const { dispatch } = this.props; + dispatch(expandTrendingStatuses()); + }, 300, { leading: true }) + render () { - const { isLoading, statusIds, multiColumn } = this.props; + const { isLoading, hasMore, statusIds, multiColumn } = this.props; const emptyMessage = ; @@ -36,8 +44,9 @@ class Statuses extends React.PureComponent { trackScroll statusIds={statusIds} scrollKey='explore-statuses' - hasMore={false} + hasMore={hasMore} isLoading={isLoading} + onLoadMore={this.handleLoadMore} emptyMessage={emptyMessage} bindToDocument={!multiColumn} withCounters diff --git a/app/javascript/mastodon/reducers/status_lists.js b/app/javascript/mastodon/reducers/status_lists.js index 49bc94a40db..a7c56cc195a 100644 --- a/app/javascript/mastodon/reducers/status_lists.js +++ b/app/javascript/mastodon/reducers/status_lists.js @@ -21,6 +21,9 @@ import { TRENDS_STATUSES_FETCH_REQUEST, TRENDS_STATUSES_FETCH_SUCCESS, TRENDS_STATUSES_FETCH_FAIL, + TRENDS_STATUSES_EXPAND_REQUEST, + TRENDS_STATUSES_EXPAND_SUCCESS, + TRENDS_STATUSES_EXPAND_FAIL, } from '../actions/trends'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import { @@ -111,11 +114,15 @@ export default function statusLists(state = initialState, action) { case BOOKMARKED_STATUSES_EXPAND_SUCCESS: return appendToList(state, 'bookmarks', action.statuses, action.next); case TRENDS_STATUSES_FETCH_REQUEST: + case TRENDS_STATUSES_EXPAND_REQUEST: return state.setIn(['trending', 'isLoading'], true); case TRENDS_STATUSES_FETCH_FAIL: + case TRENDS_STATUSES_EXPAND_FAIL: return state.setIn(['trending', 'isLoading'], false); case TRENDS_STATUSES_FETCH_SUCCESS: return normalizeList(state, 'trending', action.statuses, action.next); + case TRENDS_STATUSES_EXPAND_SUCCESS: + return appendToList(state, 'trending', action.statuses, action.next); case FAVOURITE_SUCCESS: return prependOneToList(state, 'favourites', action.status); case UNFAVOURITE_SUCCESS: