From 2c0261ac255ace05078a5745a17886084d5f83d0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 22 Sep 2016 01:08:35 +0200 Subject: [PATCH] Infinite scroll for timeline columns --- .../components/actions/timelines.jsx | 37 +++++++++++++++++++ .../components/components/status_list.jsx | 13 ++++++- .../ui/containers/status_list_container.jsx | 7 +++- .../components/reducers/notifications.jsx | 18 ++++++++- .../components/reducers/timelines.jsx | 16 +++++++- 5 files changed, 86 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/components/actions/timelines.jsx b/app/assets/javascripts/components/actions/timelines.jsx index d6de32ea14..8a05c37fdc 100644 --- a/app/assets/javascripts/components/actions/timelines.jsx +++ b/app/assets/javascripts/components/actions/timelines.jsx @@ -60,3 +60,40 @@ export function refreshTimelineFail(timeline, error) { error: error }; }; + +export function expandTimeline(timeline) { + return (dispatch, getState) => { + const lastId = getState().getIn(['timelines', timeline]).last(); + + dispatch(expandTimelineRequest(timeline)); + + api(getState).get(`/api/statuses/${timeline}?max_id=${lastId}`).then(response => { + dispatch(expandTimelineSuccess(timeline, response.data)); + }).catch(error => { + dispatch(expandTimelineFail(timeline, error)); + }); + }; +}; + +export function expandTimelineRequest(timeline) { + return { + type: TIMELINE_EXPAND_REQUEST, + timeline: timeline + }; +}; + +export function expandTimelineSuccess(timeline, statuses) { + return { + type: TIMELINE_EXPAND_SUCCESS, + timeline: timeline, + statuses: statuses + }; +}; + +export function expandTimelineFail(timeline, error) { + return { + type: TIMELINE_EXPAND_FAIL, + timeline: timeline, + error: error + }; +}; diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx index 7fa81e5127..381653d5d5 100644 --- a/app/assets/javascripts/components/components/status_list.jsx +++ b/app/assets/javascripts/components/components/status_list.jsx @@ -8,14 +8,23 @@ const StatusList = React.createClass({ statuses: ImmutablePropTypes.list.isRequired, onReply: React.PropTypes.func, onReblog: React.PropTypes.func, - onFavourite: React.PropTypes.func + onFavourite: React.PropTypes.func, + onScrollToBottom: React.PropTypes.func }, mixins: [PureRenderMixin], + handleScroll (e) { + const { scrollTop, scrollHeight, clientHeight } = e.target; + + if (scrollTop === scrollHeight - clientHeight) { + this.props.onScrollToBottom(); + } + }, + render () { return ( -
+
{this.props.statuses.map((status) => { return ; diff --git a/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx b/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx index 4ea599fc05..4757ba448e 100644 --- a/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx +++ b/app/assets/javascripts/components/features/ui/containers/status_list_container.jsx @@ -2,6 +2,7 @@ import { connect } from 'react-redux'; import StatusList from '../../../components/status_list'; import { replyCompose } from '../../../actions/compose'; import { reblog, favourite } from '../../../actions/interactions'; +import { expandTimeline } from '../../../actions/timelines'; import { selectStatus } from '../../../reducers/timelines'; const mapStateToProps = function (state, props) { @@ -10,7 +11,7 @@ const mapStateToProps = function (state, props) { }; }; -const mapDispatchToProps = function (dispatch) { +const mapDispatchToProps = function (dispatch, props) { return { onReply: function (status) { dispatch(replyCompose(status)); @@ -22,6 +23,10 @@ const mapDispatchToProps = function (dispatch) { onReblog: function (status) { dispatch(reblog(status)); + }, + + onScrollToBottom: function () { + dispatch(expandTimeline(props.type)); } }; }; diff --git a/app/assets/javascripts/components/reducers/notifications.jsx b/app/assets/javascripts/components/reducers/notifications.jsx index a1d99f0e10..47641557d7 100644 --- a/app/assets/javascripts/components/reducers/notifications.jsx +++ b/app/assets/javascripts/components/reducers/notifications.jsx @@ -1,8 +1,18 @@ import { COMPOSE_SUBMIT_FAIL, COMPOSE_UPLOAD_FAIL } from '../actions/compose'; import { FOLLOW_SUBMIT_FAIL } from '../actions/follow'; import { REBLOG_FAIL, FAVOURITE_FAIL } from '../actions/interactions'; -import { TIMELINE_REFRESH_FAIL } from '../actions/timelines'; +import { + TIMELINE_REFRESH_FAIL, + TIMELINE_EXPAND_FAIL +} from '../actions/timelines'; import { NOTIFICATION_DISMISS, NOTIFICATION_CLEAR } from '../actions/notifications'; +import { + ACCOUNT_FETCH_FAIL, + ACCOUNT_FOLLOW_FAIL, + ACCOUNT_UNFOLLOW_FAIL, + ACCOUNT_TIMELINE_FETCH_FAIL +} from '../actions/accounts'; +import { STATUS_FETCH_FAIL } from '../actions/statuses'; import Immutable from 'immutable'; const initialState = Immutable.List(); @@ -33,6 +43,12 @@ export default function notifications(state = initialState, action) { case REBLOG_FAIL: case FAVOURITE_FAIL: case TIMELINE_REFRESH_FAIL: + case TIMELINE_EXPAND_FAIL: + case ACCOUNT_FETCH_FAIL: + case ACCOUNT_FOLLOW_FAIL: + case ACCOUNT_UNFOLLOW_FAIL: + case ACCOUNT_TIMELINE_FETCH_FAIL: + case STATUS_FETCH_FAIL: return notificationFromError(state, action.error); case NOTIFICATION_DISMISS: return state.filterNot(item => item.get('key') === action.notification.key); diff --git a/app/assets/javascripts/components/reducers/timelines.jsx b/app/assets/javascripts/components/reducers/timelines.jsx index e6a1d0f116..e3de9e9b2d 100644 --- a/app/assets/javascripts/components/reducers/timelines.jsx +++ b/app/assets/javascripts/components/reducers/timelines.jsx @@ -1,7 +1,8 @@ import { TIMELINE_REFRESH_SUCCESS, TIMELINE_UPDATE, - TIMELINE_DELETE + TIMELINE_DELETE, + TIMELINE_EXPAND_SUCCESS } from '../actions/timelines'; import { REBLOG_SUCCESS, @@ -89,6 +90,17 @@ function normalizeTimeline(state, timeline, statuses) { return state; }; +function appendNormalizedTimeline(state, timeline, statuses) { + let moreIds = Immutable.List(); + + statuses.forEach((status, i) => { + state = normalizeStatus(state, status); + moreIds = moreIds.set(i, status.get('id')); + }); + + return state.update(timeline, list => list.push(...moreIds)); +}; + function normalizeAccountTimeline(state, accountId, statuses) { statuses.forEach((status, i) => { state = normalizeStatus(state, status); @@ -141,6 +153,8 @@ export default function timelines(state = initialState, action) { switch(action.type) { case TIMELINE_REFRESH_SUCCESS: return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses)); + case TIMELINE_EXPAND_SUCCESS: + return appendNormalizedTimeline(state, action.timeline, Immutable.fromJS(action.statuses)); case TIMELINE_UPDATE: return updateTimeline(state, action.timeline, Immutable.fromJS(action.status)); case TIMELINE_DELETE: