Infinite scroll for timeline columns

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 d6de32ea1..8a05c37fd 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 7fa81e512..381653d5d 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 (
-      <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'>
+      <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable' onScroll={this.handleScroll}>
         <div>
           {this.props.statuses.map((status) => {
             return <Status key={status.get('id')} status={status} onReply={this.props.onReply} onReblog={this.props.onReblog} onFavourite={this.props.onFavourite} />;
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 4ea599fc0..4757ba448 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 a1d99f0e1..47641557d 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 e6a1d0f11..e3de9e9b2 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: