Prevent duplicate load of favourites (tootsuite pr #5931)

This commit is contained in:
cwm 2018-01-09 08:46:35 -06:00
parent ce7f4aef16
commit 5963630c63
3 changed files with 24 additions and 4 deletions

View file

@ -10,6 +10,10 @@ export const FAVOURITED_STATUSES_EXPAND_FAIL = 'FAVOURITED_STATUSES_EXPAND_FA
export function fetchFavouritedStatuses() { export function fetchFavouritedStatuses() {
return (dispatch, getState) => { return (dispatch, getState) => {
if (getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
return;
}
dispatch(fetchFavouritedStatusesRequest()); dispatch(fetchFavouritedStatusesRequest());
api(getState).get('/api/v1/favourites').then(response => { api(getState).get('/api/v1/favourites').then(response => {
@ -46,7 +50,7 @@ export function expandFavouritedStatuses() {
return (dispatch, getState) => { return (dispatch, getState) => {
const url = getState().getIn(['status_lists', 'favourites', 'next'], null); const url = getState().getIn(['status_lists', 'favourites', 'next'], null);
if (url === null) { if (url === null || getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
return; return;
} }

View file

@ -9,6 +9,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
import StatusList from 'flavours/glitch/components/status_list'; import StatusList from 'flavours/glitch/components/status_list';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { debounce } from 'lodash';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.favourites', defaultMessage: 'Favourites' }, heading: { id: 'column.favourites', defaultMessage: 'Favourites' },
@ -16,6 +17,7 @@ const messages = defineMessages({
const mapStateToProps = state => ({ const mapStateToProps = state => ({
statusIds: state.getIn(['status_lists', 'favourites', 'items']), statusIds: state.getIn(['status_lists', 'favourites', 'items']),
isLoading: state.getIn(['status_lists', 'favourites', 'isLoading'], true),
hasMore: !!state.getIn(['status_lists', 'favourites', 'next']), hasMore: !!state.getIn(['status_lists', 'favourites', 'next']),
}); });
@ -30,6 +32,7 @@ export default class Favourites extends ImmutablePureComponent {
columnId: PropTypes.string, columnId: PropTypes.string,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
hasMore: PropTypes.bool, hasMore: PropTypes.bool,
isLoading: PropTypes.bool,
}; };
componentWillMount () { componentWillMount () {
@ -59,12 +62,12 @@ export default class Favourites extends ImmutablePureComponent {
this.column = c; this.column = c;
} }
handleScrollToBottom = () => { handleScrollToBottom = debounce(() => {
this.props.dispatch(expandFavouritedStatuses()); this.props.dispatch(expandFavouritedStatuses());
} }, 300, { leading: true })
render () { render () {
const { intl, statusIds, columnId, multiColumn, hasMore } = this.props; const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
const pinned = !!columnId; const pinned = !!columnId;
return ( return (
@ -85,6 +88,7 @@ export default class Favourites extends ImmutablePureComponent {
statusIds={statusIds} statusIds={statusIds}
scrollKey={`favourited_statuses-${columnId}`} scrollKey={`favourited_statuses-${columnId}`}
hasMore={hasMore} hasMore={hasMore}
isLoading={isLoading}
onScrollToBottom={this.handleScrollToBottom} onScrollToBottom={this.handleScrollToBottom}
/> />
</Column> </Column>

View file

@ -1,6 +1,10 @@
import { import {
FAVOURITED_STATUSES_FETCH_REQUEST,
FAVOURITED_STATUSES_FETCH_SUCCESS, FAVOURITED_STATUSES_FETCH_SUCCESS,
FAVOURITED_STATUSES_FETCH_FAIL,
FAVOURITED_STATUSES_EXPAND_REQUEST,
FAVOURITED_STATUSES_EXPAND_SUCCESS, FAVOURITED_STATUSES_EXPAND_SUCCESS,
FAVOURITED_STATUSES_EXPAND_FAIL,
} from 'flavours/glitch/actions/favourites'; } from 'flavours/glitch/actions/favourites';
import { import {
PINNED_STATUSES_FETCH_SUCCESS, PINNED_STATUSES_FETCH_SUCCESS,
@ -30,6 +34,7 @@ const normalizeList = (state, listType, statuses, next) => {
return state.update(listType, listMap => listMap.withMutations(map => { return state.update(listType, listMap => listMap.withMutations(map => {
map.set('next', next); map.set('next', next);
map.set('loaded', true); map.set('loaded', true);
map.set('isLoading', false);
map.set('items', ImmutableList(statuses.map(item => item.id))); map.set('items', ImmutableList(statuses.map(item => item.id)));
})); }));
}; };
@ -37,6 +42,7 @@ const normalizeList = (state, listType, statuses, next) => {
const appendToList = (state, listType, statuses, next) => { const appendToList = (state, listType, statuses, next) => {
return state.update(listType, listMap => listMap.withMutations(map => { return state.update(listType, listMap => listMap.withMutations(map => {
map.set('next', next); map.set('next', next);
map.set('isLoading', false);
map.set('items', map.get('items').concat(statuses.map(item => item.id))); map.set('items', map.get('items').concat(statuses.map(item => item.id)));
})); }));
}; };
@ -55,6 +61,12 @@ const removeOneFromList = (state, listType, status) => {
export default function statusLists(state = initialState, action) { export default function statusLists(state = initialState, action) {
switch(action.type) { switch(action.type) {
case FAVOURITED_STATUSES_FETCH_REQUEST:
case FAVOURITED_STATUSES_EXPAND_REQUEST:
return state.setIn(['favourites', 'isLoading'], true);
case FAVOURITED_STATUSES_FETCH_FAIL:
case FAVOURITED_STATUSES_EXPAND_FAIL:
return state.setIn(['favourites', 'isLoading'], false);
case FAVOURITED_STATUSES_FETCH_SUCCESS: case FAVOURITED_STATUSES_FETCH_SUCCESS:
return normalizeList(state, 'favourites', action.statuses, action.next); return normalizeList(state, 'favourites', action.statuses, action.next);
case FAVOURITED_STATUSES_EXPAND_SUCCESS: case FAVOURITED_STATUSES_EXPAND_SUCCESS: