mirror of https://github.com/mastodon/mastodon.git
Smarter infinite scroll
parent
1761d3f9c3
commit
d9022884c6
|
@ -80,7 +80,7 @@ export function fetchAccount(id) {
|
|||
|
||||
export function fetchAccountTimeline(id, replace = false) {
|
||||
return (dispatch, getState) => {
|
||||
const ids = getState().getIn(['timelines', 'accounts_timelines', id], Immutable.List());
|
||||
const ids = getState().getIn(['timelines', 'accounts_timelines', id, 'items'], Immutable.List());
|
||||
const newestId = ids.size > 0 ? ids.first() : null;
|
||||
|
||||
let params = '';
|
||||
|
@ -103,11 +103,16 @@ export function fetchAccountTimeline(id, replace = false) {
|
|||
|
||||
export function expandAccountTimeline(id) {
|
||||
return (dispatch, getState) => {
|
||||
const lastId = getState().getIn(['timelines', 'accounts_timelines', id], Immutable.List()).last();
|
||||
const lastId = getState().getIn(['timelines', 'accounts_timelines', id, 'items'], Immutable.List()).last();
|
||||
|
||||
dispatch(expandAccountTimelineRequest(id));
|
||||
|
||||
api(getState).get(`/api/v1/accounts/${id}/statuses?max_id=${lastId}`).then(response => {
|
||||
api(getState).get(`/api/v1/accounts/${id}/statuses`, {
|
||||
params: {
|
||||
limit: 10,
|
||||
max_id: lastId
|
||||
}
|
||||
}).then(response => {
|
||||
dispatch(expandAccountTimelineSuccess(id, response.data));
|
||||
}).catch(error => {
|
||||
dispatch(expandAccountTimelineFail(id, error));
|
||||
|
|
|
@ -9,7 +9,7 @@ export function fetchStatusCard(id) {
|
|||
dispatch(fetchStatusCardRequest(id));
|
||||
|
||||
api(getState).get(`/api/v1/statuses/${id}/card`).then(response => {
|
||||
if (!response.data.url) {
|
||||
if (!response.data.url || !response.data.title || !response.data.description) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
@ -115,7 +115,12 @@ export function expandTimeline(timeline, id = null) {
|
|||
path = `${path}/${id}`
|
||||
}
|
||||
|
||||
api(getState).get(`/api/v1/timelines/${path}?max_id=${lastId}`).then(response => {
|
||||
api(getState).get(`/api/v1/timelines/${path}`, {
|
||||
params: {
|
||||
limit: 10,
|
||||
max_id: lastId
|
||||
}
|
||||
}).then(response => {
|
||||
dispatch(expandTimelineSuccess(timeline, response.data));
|
||||
}).catch(error => {
|
||||
dispatch(expandTimelineFail(timeline, error));
|
||||
|
|
|
@ -11,7 +11,8 @@ const StatusList = React.createClass({
|
|||
onScrollToBottom: React.PropTypes.func,
|
||||
onScrollToTop: React.PropTypes.func,
|
||||
onScroll: React.PropTypes.func,
|
||||
trackScroll: React.PropTypes.bool
|
||||
trackScroll: React.PropTypes.bool,
|
||||
isLoading: React.PropTypes.bool
|
||||
},
|
||||
|
||||
getDefaultProps () {
|
||||
|
@ -24,10 +25,10 @@ const StatusList = React.createClass({
|
|||
|
||||
handleScroll (e) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = e.target;
|
||||
|
||||
const offset = scrollHeight - scrollTop - clientHeight;
|
||||
this._oldScrollPosition = scrollHeight - scrollTop;
|
||||
|
||||
if (scrollTop === scrollHeight - clientHeight && this.props.onScrollToBottom) {
|
||||
if (250 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
|
||||
this.props.onScrollToBottom();
|
||||
} else if (scrollTop < 100 && this.props.onScrollToTop) {
|
||||
this.props.onScrollToTop();
|
||||
|
@ -36,21 +37,37 @@ const StatusList = React.createClass({
|
|||
}
|
||||
},
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
if (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && this._oldScrollPosition) {
|
||||
const node = ReactDOM.findDOMNode(this);
|
||||
componentDidMount () {
|
||||
this.attachScrollListener();
|
||||
},
|
||||
|
||||
if (node.scrollTop > 0) {
|
||||
node.scrollTop = node.scrollHeight - this._oldScrollPosition;
|
||||
}
|
||||
componentDidUpdate (prevProps) {
|
||||
if (this.node.scrollTop > 0 && (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && !!this._oldScrollPosition)) {
|
||||
this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition;
|
||||
}
|
||||
},
|
||||
|
||||
componentWillUnmount () {
|
||||
this.detachScrollListener();
|
||||
},
|
||||
|
||||
attachScrollListener () {
|
||||
this.node.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
detachScrollListener () {
|
||||
this.node.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
setRef (c) {
|
||||
this.node = c;
|
||||
},
|
||||
|
||||
render () {
|
||||
const { statusIds, onScrollToBottom, trackScroll } = this.props;
|
||||
|
||||
const scrollableArea = (
|
||||
<div className='scrollable' onScroll={this.handleScroll}>
|
||||
<div className='scrollable' ref={this.setRef}>
|
||||
<div>
|
||||
{statusIds.map((statusId) => {
|
||||
return <StatusContainer key={statusId} id={statusId} />;
|
||||
|
|
|
@ -9,7 +9,8 @@ import StatusList from '../../components/status_list';
|
|||
import LoadingIndicator from '../../components/loading_indicator';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
statusIds: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId)]),
|
||||
statusIds: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'items']),
|
||||
isLoading: state.getIn(['timelines', 'accounts_timelines', Number(props.params.accountId), 'isLoading']),
|
||||
me: state.getIn(['meta', 'me'])
|
||||
});
|
||||
|
||||
|
@ -19,6 +20,7 @@ const AccountTimeline = React.createClass({
|
|||
params: React.PropTypes.object.isRequired,
|
||||
dispatch: React.PropTypes.func.isRequired,
|
||||
statusIds: ImmutablePropTypes.list,
|
||||
isLoading: React.PropTypes.bool,
|
||||
me: React.PropTypes.number.isRequired
|
||||
},
|
||||
|
||||
|
@ -39,13 +41,13 @@ const AccountTimeline = React.createClass({
|
|||
},
|
||||
|
||||
render () {
|
||||
const { statusIds, me } = this.props;
|
||||
const { statusIds, isLoading, me } = this.props;
|
||||
|
||||
if (!statusIds) {
|
||||
return <LoadingIndicator />;
|
||||
}
|
||||
|
||||
return <StatusList statusIds={statusIds} me={me} onScrollToBottom={this.handleScrollToBottom} />
|
||||
return <StatusList statusIds={statusIds} isLoading={isLoading} me={me} onScrollToBottom={this.handleScrollToBottom} />
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -33,7 +33,8 @@ const getStatusIds = createSelector([
|
|||
}));
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
statusIds: getStatusIds(state, props)
|
||||
statusIds: getStatusIds(state, props),
|
||||
isLoading: state.getIn(['timelines', props.type, 'isLoading'], true)
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch, { type, id }) => ({
|
||||
|
|
|
@ -4,6 +4,7 @@ import {
|
|||
TIMELINE_UPDATE,
|
||||
TIMELINE_DELETE,
|
||||
TIMELINE_EXPAND_SUCCESS,
|
||||
TIMELINE_EXPAND_REQUEST,
|
||||
TIMELINE_SCROLL_TOP
|
||||
} from '../actions/timelines';
|
||||
import {
|
||||
|
@ -13,37 +14,41 @@ import {
|
|||
UNFAVOURITE_SUCCESS
|
||||
} from '../actions/interactions';
|
||||
import {
|
||||
ACCOUNT_FETCH_SUCCESS,
|
||||
ACCOUNT_TIMELINE_FETCH_REQUEST,
|
||||
ACCOUNT_TIMELINE_FETCH_SUCCESS,
|
||||
ACCOUNT_TIMELINE_EXPAND_REQUEST,
|
||||
ACCOUNT_TIMELINE_EXPAND_SUCCESS,
|
||||
ACCOUNT_BLOCK_SUCCESS
|
||||
} from '../actions/accounts';
|
||||
import {
|
||||
STATUS_FETCH_SUCCESS,
|
||||
CONTEXT_FETCH_SUCCESS
|
||||
} from '../actions/statuses';
|
||||
import Immutable from 'immutable';
|
||||
|
||||
const initialState = Immutable.Map({
|
||||
home: Immutable.Map({
|
||||
isLoading: false,
|
||||
loaded: false,
|
||||
top: true,
|
||||
items: Immutable.List()
|
||||
}),
|
||||
|
||||
mentions: Immutable.Map({
|
||||
isLoading: false,
|
||||
loaded: false,
|
||||
top: true,
|
||||
items: Immutable.List()
|
||||
}),
|
||||
|
||||
public: Immutable.Map({
|
||||
isLoading: false,
|
||||
loaded: false,
|
||||
top: true,
|
||||
items: Immutable.List()
|
||||
}),
|
||||
|
||||
tag: Immutable.Map({
|
||||
isLoading: false,
|
||||
id: null,
|
||||
loaded: false,
|
||||
top: true,
|
||||
|
@ -82,6 +87,7 @@ const normalizeTimeline = (state, timeline, statuses, replace = false) => {
|
|||
});
|
||||
|
||||
state = state.setIn([timeline, 'loaded'], true);
|
||||
state = state.setIn([timeline, 'isLoading'], false);
|
||||
|
||||
return state.updateIn([timeline, 'items'], Immutable.List(), list => (loaded ? list.unshift(...ids) : ids));
|
||||
};
|
||||
|
@ -94,6 +100,8 @@ const appendNormalizedTimeline = (state, timeline, statuses) => {
|
|||
moreIds = moreIds.set(i, status.get('id'));
|
||||
});
|
||||
|
||||
state = state.setIn([timeline, 'isLoading'], false);
|
||||
|
||||
return state.updateIn([timeline, 'items'], Immutable.List(), list => list.push(...moreIds));
|
||||
};
|
||||
|
||||
|
@ -105,7 +113,10 @@ const normalizeAccountTimeline = (state, accountId, statuses, replace = false) =
|
|||
ids = ids.set(i, status.get('id'));
|
||||
});
|
||||
|
||||
return state.updateIn(['accounts_timelines', accountId], Immutable.List([]), list => (replace ? ids : list.unshift(...ids)));
|
||||
return state.updateIn(['accounts_timelines', accountId], Immutable.Map(), map => map
|
||||
.set('isLoading', false)
|
||||
.set('loaded', true)
|
||||
.update('items', Immutable.List(), list => (replace ? ids : list.unshift(...ids))));
|
||||
};
|
||||
|
||||
const appendNormalizedAccountTimeline = (state, accountId, statuses) => {
|
||||
|
@ -116,7 +127,9 @@ const appendNormalizedAccountTimeline = (state, accountId, statuses) => {
|
|||
moreIds = moreIds.set(i, status.get('id'));
|
||||
});
|
||||
|
||||
return state.updateIn(['accounts_timelines', accountId], Immutable.List([]), list => list.push(...moreIds));
|
||||
return state.updateIn(['accounts_timelines', accountId], Immutable.Map(), map => map
|
||||
.set('isLoading', false)
|
||||
.update('items', list => list.push(...moreIds)));
|
||||
};
|
||||
|
||||
const updateTimeline = (state, timeline, status, references) => {
|
||||
|
@ -157,7 +170,7 @@ const deleteStatus = (state, id, accountId, references, reblogOf) => {
|
|||
});
|
||||
|
||||
// Remove references from account timelines
|
||||
state = state.updateIn(['accounts_timelines', accountId], Immutable.List([]), list => list.filterNot(item => item === id));
|
||||
state = state.updateIn(['accounts_timelines', accountId, 'items'], Immutable.List([]), list => list.filterNot(item => item === id));
|
||||
|
||||
// Remove references from context
|
||||
state.getIn(['descendants', id], Immutable.List()).forEach(descendantId => {
|
||||
|
@ -207,8 +220,11 @@ const resetTimeline = (state, timeline, id) => {
|
|||
if (timeline === 'tag' && state.getIn([timeline, 'id']) !== id) {
|
||||
state = state.update(timeline, map => map
|
||||
.set('id', id)
|
||||
.set('isLoading', true)
|
||||
.set('loaded', false)
|
||||
.update('items', list => list.clear()));
|
||||
} else {
|
||||
state = state.setIn([timeline, 'isLoading'], true);
|
||||
}
|
||||
|
||||
return state;
|
||||
|
@ -217,6 +233,7 @@ const resetTimeline = (state, timeline, id) => {
|
|||
export default function timelines(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case TIMELINE_REFRESH_REQUEST:
|
||||
case TIMELINE_EXPAND_REQUEST:
|
||||
return resetTimeline(state, action.timeline, action.id);
|
||||
case TIMELINE_REFRESH_SUCCESS:
|
||||
return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses));
|
||||
|
@ -228,6 +245,9 @@ export default function timelines(state = initialState, action) {
|
|||
return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf);
|
||||
case CONTEXT_FETCH_SUCCESS:
|
||||
return normalizeContext(state, action.id, Immutable.fromJS(action.ancestors), Immutable.fromJS(action.descendants));
|
||||
case ACCOUNT_TIMELINE_FETCH_REQUEST:
|
||||
case ACCOUNT_TIMELINE_EXPAND_REQUEST:
|
||||
return state.updateIn(['accounts_timelines', action.id], Immutable.Map(), map => map.set('isLoading', true));
|
||||
case ACCOUNT_TIMELINE_FETCH_SUCCESS:
|
||||
return normalizeAccountTimeline(state, action.id, Immutable.fromJS(action.statuses), action.replace);
|
||||
case ACCOUNT_TIMELINE_EXPAND_SUCCESS:
|
||||
|
|
Loading…
Reference in New Issue