Add pagination for trending statuses in web UI (#17976)
This commit is contained in:
		
							parent
							
								
									dd4c156f33
								
							
						
					
					
						commit
						f382192862
					
				
					 3 changed files with 68 additions and 8 deletions
				
			
		| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Reference in a new issue