mirror/YuruToot
1
0
Fork 0
mirror of https://github.com/funamitech/mastodon synced 2024-12-03 01:09:08 +09:00
Code

[Glitch] Add pagination for trending statuses in web UI

Browse Source 
Port f382192862 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2022-04-06 22:53:29 +02:00 committed by Claire
parent 9b17b26df4
commit da67e0660a
3 changed files with 68 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/javascript/flavours/glitch/actions/trends.js
View File

@ -1,4 +1,4 @@
import api from 'flavours/glitch/util/api';
import api, { getLinks } from 'flavours/glitch/util/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,
});

15
app/javascript/flavours/glitch/features/explore/statuses.js
View File

@ -4,11 +4,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusList from 'flavours/glitch/components/status_list';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { fetchTrendingStatuses } from 'flavours/glitch/actions/trends';
import { fetchTrendingStatuses, expandTrendingStatuses } from 'flavours/glitch/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

7
app/javascript/flavours/glitch/reducers/status_lists.js
View File

@ -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 'flavours/glitch/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: