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 {