Minor PostList improvements (#1528)

* Moved ChannelPostList footer out of PostList

* Fixed typo in constant

* Added debounce to loadMorePosts

* Fixed post list footer not being rerendered properly

app/components/post_list/post_list.js

@@ -10,7 +10,6 @@ import {
     StyleSheet,
 } from 'react-native';
 
-import ChannelIntro from 'app/components/channel_intro';
 import Post from 'app/components/post';
 import {DATE_LINE, START_OF_NEW_MESSAGES} from 'app/selectors/post_list';
 import mattermostManaged from 'app/mattermost_managed';
@@ -18,13 +17,12 @@ import {makeExtraData} from 'app/utils/list_view';
 import {changeOpacity} from 'app/utils/theme';
 
 import DateHeader from './date_header';
-import LoadMorePosts from './load_more_posts';
 import NewMessagesDivider from './new_messages_divider';
 import withLayout from './with_layout';
 
 const PostWithLayout = withLayout(Post);
 
-const INITAL_BATCH_TO_RENDER = 15;
+const INITIAL_BATCH_TO_RENDER = 15;
 const NEW_MESSAGES_HEIGHT = 28;
 const DATE_HEADER_HEIGHT = 28;
 
@@ -38,22 +36,22 @@ export default class PostList extends PureComponent {
         channelId: PropTypes.string,
         currentUserId: PropTypes.string,
         deviceHeight: PropTypes.number.isRequired,
+        extraData: PropTypes.any,
         highlightPostId: PropTypes.string,
         indicateNewMessages: PropTypes.bool,
         isSearchResult: PropTypes.bool,
         lastViewedAt: PropTypes.number, // Used by container // eslint-disable-line no-unused-prop-types
-        loadMore: PropTypes.func,
         measureCellLayout: PropTypes.bool,
         navigator: PropTypes.object,
+        onEndReached: PropTypes.func,
         onPermalinkPress: PropTypes.func,
         onPostPress: PropTypes.func,
         onRefresh: PropTypes.func,
         postIds: PropTypes.array.isRequired,
+        renderFooter: PropTypes.func,
         renderReplies: PropTypes.bool,
-        showLoadMore: PropTypes.bool,
         shouldRenderReplyButton: PropTypes.bool,
         theme: PropTypes.object.isRequired,
-        renderFooter: PropTypes.func,
     };
 
     static defaultProps = {
@@ -319,32 +317,6 @@ export default class PostList extends PureComponent {
         );
     };
 
-    renderFooter = () => {
-        if (this.props.renderFooter) {
-            return this.props.renderFooter();
-        }
-
-        if (!this.props.channelId) {
-            return null;
-        }
-
-        if (this.props.showLoadMore) {
-            return (
-                <LoadMorePosts
-                    channelId={this.props.channelId}
-                    theme={this.props.theme}
-                />
-            );
-        }
-
-        return (
-            <ChannelIntro
-                channelId={this.props.channelId}
-                navigator={this.props.navigator}
-            />
-        );
-    };
-
     onLayout = (event) => {
         const {height} = event.nativeEvent.layout;
         this.setState({
@@ -356,9 +328,8 @@ export default class PostList extends PureComponent {
         const {
             channelId,
             highlightPostId,
-            loadMore,
+            onEndReached,
             postIds,
-            showLoadMore,
         } = this.props;
 
         const refreshControl = {
@@ -374,13 +345,13 @@ export default class PostList extends PureComponent {
                 onLayout={this.onLayout}
                 ref='list'
                 data={postIds}
-                extraData={this.makeExtraData(channelId, highlightPostId, showLoadMore)}
+                extraData={this.makeExtraData(channelId, highlightPostId, this.props.extraData)}
                 initialNumToRender={false}
-                maxToRenderPerBatch={INITAL_BATCH_TO_RENDER + 1}
+                maxToRenderPerBatch={INITIAL_BATCH_TO_RENDER + 1}
                 inverted={true}
                 keyExtractor={this.keyExtractor}
-                ListFooterComponent={this.renderFooter}
-                onEndReached={loadMore}
+                ListFooterComponent={this.props.renderFooter}
+                onEndReached={onEndReached}
                 onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 1}
                 removeClippedSubviews={Platform.OS === 'android'}
                 {...refreshControl}

app/screens/channel/channel_post_list/channel_post_list.js

@@ -1,8 +1,8 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
+import React, {PureComponent} from 'react';
 import {
     Platform,
     StyleSheet,
@@ -10,7 +10,11 @@ import {
     InteractionManager,
 } from 'react-native';
 
+import {debounce} from 'mattermost-redux/actions/helpers';
+
 import AnnouncementBanner from 'app/components/announcement_banner';
+import ChannelIntro from 'app/components/channel_intro';
+import LoadMorePosts from 'app/components/load_more_posts';
 import PostList from 'app/components/post_list';
 import PostListRetry from 'app/components/post_list_retry';
 import RetryBarIndicator from 'app/components/retry_bar_indicator';
@@ -114,18 +118,41 @@ export default class ChannelPostList extends PureComponent {
         }
     };
 
-    loadMorePosts = () => {
+    loadMorePosts = debounce(() => {
         if (this.props.loadMorePostsVisible) {
             const {actions, channelId} = this.props;
             actions.increasePostVisibility(channelId);
         }
-    };
+    }, 100);
 
     loadPostsRetry = () => {
         const {actions, channelId} = this.props;
         actions.loadPostsIfNecessaryWithRetry(channelId);
     };
 
+    renderFooter = () => {
+        if (!this.props.channelId) {
+            return null;
+        }
+
+        if (this.props.loadMorePostsVisible) {
+            return (
+                <LoadMorePosts
+                    channelId={this.props.channelId}
+                    loadMore={this.loadMorePosts}
+                    theme={this.props.theme}
+                />
+            );
+        }
+
+        return (
+            <ChannelIntro
+                channelId={this.props.channelId}
+                navigator={this.props.navigator}
+            />
+        );
+    };
+
     render() {
         const {
             actions,
@@ -161,8 +188,8 @@ export default class ChannelPostList extends PureComponent {
             component = (
                 <PostList
                     postIds={visiblePostIds}
-                    loadMore={this.loadMorePosts}
-                    showLoadMore={loadMorePostsVisible}
+                    extraData={loadMorePostsVisible}
+                    onEndReached={this.loadMorePosts}
                     onPostPress={this.goToThread}
                     onRefresh={actions.setChannelRefreshing}
                     renderReplies={true}
@@ -171,6 +198,7 @@ export default class ChannelPostList extends PureComponent {
                     lastViewedAt={lastViewedAt}
                     channelId={channelId}
                     navigator={navigator}
+                    renderFooter={this.renderFooter}
                 />
             );
         }

app/screens/channel_peek/channel_peek.js

@@ -79,7 +79,6 @@ export default class ChannelPeek extends PureComponent {
             <View style={style.container}>
                 <PostList
                     postIds={visiblePostIds}
-                    showLoadMore={false}
                     renderReplies={true}
                     indicateNewMessages={true}
                     currentUserId={currentUserId}