Add pagination for trending statuses in web UI (#17976)

1 files changed, 12 insertions, 3 deletions

diff --git a/app/javascript/mastodon/features/explore/statuses.js b/app/javascript/mastodon/features/explore/statuses.js
index 4e5530d84..33e5b4179 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 = <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />;
 
@@ -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