diff --git a/app/components/post_list/load_more_posts/index.js b/app/components/load_more_posts/index.js
similarity index 100%
rename from app/components/post_list/load_more_posts/index.js
rename to app/components/load_more_posts/index.js
diff --git a/app/components/post_list/load_more_posts/load_more_posts.js b/app/components/load_more_posts/load_more_posts.js
similarity index 100%
rename from app/components/post_list/load_more_posts/load_more_posts.js
rename to app/components/load_more_posts/load_more_posts.js
diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index b5d7b349c..50327f5c3 100644
--- a/app/components/post_list/post_list.js
+++ b/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 (
-
- );
- }
-
- return (
-
- );
- };
-
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}
diff --git a/app/screens/channel/channel_post_list/channel_post_list.js b/app/screens/channel/channel_post_list/channel_post_list.js
index 15e730558..f378be202 100644
--- a/app/screens/channel/channel_post_list/channel_post_list.js
+++ b/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 (
+
+ );
+ }
+
+ return (
+
+ );
+ };
+
render() {
const {
actions,
@@ -161,8 +188,8 @@ export default class ChannelPostList extends PureComponent {
component = (
);
}
diff --git a/app/screens/channel_peek/channel_peek.js b/app/screens/channel_peek/channel_peek.js
index 28c81ecd6..7d21de4f0 100644
--- a/app/screens/channel_peek/channel_peek.js
+++ b/app/screens/channel_peek/channel_peek.js
@@ -79,7 +79,6 @@ export default class ChannelPeek extends PureComponent {