MM-10815 Load more posts when post list is under 1 screen long (#1759)

app/actions/views/channel.js

@@ -468,7 +468,7 @@ export function increasePostVisibility(channelId, focusedPostId) {
         const currentPostVisibility = postVisibility[channelId] || 0;
 
         if (loadingPosts[channelId]) {
-            return;
+            return false;
         }
 
         // Check if we already have the posts that we want to show
@@ -484,7 +484,7 @@ export function increasePostVisibility(channelId, focusedPostId) {
                     setLoadMorePostsVisible(true),
                 ]));
 
-                return;
+                return true;
             }
         }
 
@@ -520,6 +520,8 @@ export function increasePostVisibility(channelId, focusedPostId) {
         }
 
         dispatch(batchActions(actions));
+
+        return Boolean(posts);
     };
 }
 

app/components/post_list/post_list.js

@@ -43,6 +43,7 @@ export default class PostList extends PureComponent {
         lastViewedAt: PropTypes.number, // Used by container // eslint-disable-line no-unused-prop-types
         measureCellLayout: PropTypes.bool,
         navigator: PropTypes.object,
+        onContentSizeChange: PropTypes.func,
         onEndReached: PropTypes.func,
         onPermalinkPress: PropTypes.func,
         onPostPress: PropTypes.func,
@@ -345,6 +346,7 @@ export default class PostList extends PureComponent {
 
         return (
             <FlatList
+                onContentSizeChange={this.props.onContentSizeChange}
                 onLayout={this.onLayout}
                 ref='list'
                 data={postIds}

app/screens/channel/channel_post_list/channel_post_list.js

@@ -34,6 +34,7 @@ export default class ChannelPostList extends PureComponent {
         channelId: PropTypes.string.isRequired,
         channelRefreshingFailed: PropTypes.bool,
         currentUserId: PropTypes.string,
+        deviceHeight: PropTypes.number.isRequired,
         lastViewedAt: PropTypes.number,
         loadMorePostsVisible: PropTypes.bool.isRequired,
         navigator: PropTypes.object,
@@ -53,6 +54,8 @@ export default class ChannelPostList extends PureComponent {
             visiblePostIds: this.getVisiblePostIds(props),
             loading: true,
         };
+
+        this.contentHeight = 0;
     }
 
     componentWillReceiveProps(nextProps) {
@@ -119,10 +122,19 @@ export default class ChannelPostList extends PureComponent {
         }
     };
 
+    handleContentSizeChange = (contentWidth, contentHeight) => {
+        this.contentHeight = contentHeight;
+    };
+
     loadMorePosts = debounce(() => {
         if (this.props.loadMorePostsVisible) {
             const {actions, channelId} = this.props;
-            actions.increasePostVisibility(channelId);
+            actions.increasePostVisibility(channelId).then((hasMore) => {
+                if (hasMore && this.contentHeight < this.props.deviceHeight) {
+                    // We still have less than 1 screen of posts loaded with more to get, so load more
+                    this.loadMorePosts();
+                }
+            });
         }
     }, 100);
 
@@ -198,6 +210,7 @@ export default class ChannelPostList extends PureComponent {
                 <PostList
                     postIds={visiblePostIds}
                     extraData={loadMorePostsVisible}
+                    onContentSizeChange={this.handleContentSizeChange}
                     onEndReached={this.loadMorePosts}
                     onPostPress={this.goToThread}
                     onRefresh={actions.setChannelRefreshing}

app/screens/channel/channel_post_list/index.js

@@ -23,6 +23,7 @@ function mapStateToProps(state) {
         channelId,
         channelRefreshingFailed,
         currentUserId: getCurrentUserId(state),
+        deviceHeight: state.device.dimension.deviceHeight,
         postIds: getPostIdsInCurrentChannel(state),
         postVisibility: state.views.channel.postVisibility[channelId],
         lastViewedAt: getMyCurrentChannelMembership(state).last_viewed_at,