diff --git a/app/components/channel_intro/channel_intro.js b/app/components/channel_intro/channel_intro.js index bf87ed95e..28b050d4e 100644 --- a/app/components/channel_intro/channel_intro.js +++ b/app/components/channel_intro/channel_intro.js @@ -19,9 +19,9 @@ import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; class ChannelIntro extends PureComponent { static propTypes = { + creator: PropTypes.object, currentChannel: PropTypes.object.isRequired, currentChannelMembers: PropTypes.array.isRequired, - currentUser: PropTypes.object.isRequired, intl: intlShape.isRequired, navigator: PropTypes.object.isRequired, theme: PropTypes.object.isRequired @@ -86,7 +86,7 @@ class ChannelIntro extends PureComponent { const {currentChannelMembers, theme} = this.props; const style = getStyleSheet(theme); - const names = currentChannelMembers.map((member, index) => ( + return currentChannelMembers.map((member, index) => ( preventDoubleTap(this.goToUserProfile, this, member.id)} @@ -96,8 +96,6 @@ class ChannelIntro extends PureComponent { )); - - return {names}; }; buildDMContent = () => { @@ -132,7 +130,7 @@ class ChannelIntro extends PureComponent { }; buildOpenChannelContent = () => { - const {currentChannel, currentChannelMembers, currentUser, intl, theme} = this.props; + const {creator, currentChannel, intl, theme} = this.props; const style = getStyleSheet(theme); const date = intl.formatDate(currentChannel.create_at, { @@ -142,8 +140,7 @@ class ChannelIntro extends PureComponent { }); let mainMessageIntl; - if (currentChannel.creator_id) { - const creator = currentChannel.creator_id === currentUser.id ? currentUser : currentChannelMembers[currentChannel.creator_id]; + if (creator) { const creatorName = this.getDisplayName(creator); mainMessageIntl = { id: 'intro_messages.creator', @@ -201,10 +198,9 @@ class ChannelIntro extends PureComponent { }; buildPrivateChannelContent = () => { - const {currentChannel, currentChannelMembers, currentUser, intl, theme} = this.props; + const {creator, currentChannel, intl, theme} = this.props; const style = getStyleSheet(theme); - const creator = currentChannel.creator_id === currentUser.id ? currentUser : currentChannelMembers[currentChannel.creator_id]; const creatorName = this.getDisplayName(creator); const date = intl.formatDate(currentChannel.create_at, { year: 'numeric', @@ -352,14 +348,19 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { lineHeight: 18 }, namesContainer: { + flexDirection: 'row', + flexWrap: 'wrap', marginBottom: 12 }, profile: { + height: 67, + marginBottom: 12, marginRight: 12 }, profilesContainer: { flexDirection: 'row', - marginBottom: 12 + flexWrap: 'wrap', + justifyContent: 'flex-start' } }); }); diff --git a/app/components/channel_intro/index.js b/app/components/channel_intro/index.js index 6d03499cc..bc872e8f5 100644 --- a/app/components/channel_intro/index.js +++ b/app/components/channel_intro/index.js @@ -19,16 +19,17 @@ function mapStateToProps(state) { if (currentChannel.type === General.DM_CHANNEL) { const otherChannelMember = currentChannel.name.split('__').find((m) => m !== currentUser.id); currentChannelMembers.push(state.entities.users.profiles[otherChannelMember]); + } else { + currentChannelMembers = getProfilesInCurrentChannel(state); + currentChannelMembers = currentChannelMembers.filter((m) => m.id !== currentUser.id); } - if (currentChannel.type === General.GM_CHANNEL) { - currentChannelMembers = getProfilesInCurrentChannel(state); - } + const creator = currentChannel.creator_id === currentUser.id ? currentUser : state.entities.users.profiles[currentChannel.creator_id]; return { + creator, currentChannel, currentChannelMembers, - currentUser, theme: getTheme(state) }; } diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js index 143d947f9..ba64994f4 100644 --- a/app/components/post_list/post_list.js +++ b/app/components/post_list/post_list.js @@ -82,16 +82,9 @@ export default class PostList extends PureComponent { }; renderChannelIntro = () => { - const {channel, channelIsLoading, navigator, posts} = this.props; - - // Check the webapp for atEnd, and replace it here - if (channel.hasOwnProperty('id')) { - const firstPostHasRendered = channel.total_msg_count ? posts.length > 0 : true; - const messageCount = channel.total_msg_count - posts.length; - if (channelIsLoading || !firstPostHasRendered || messageCount > 0) { - return null; - } + const {channel, channelIsLoading, navigator, refreshing, showLoadMore} = this.props; + if (channel.hasOwnProperty('id') && !showLoadMore && !refreshing && !channelIsLoading) { return ( @@ -122,7 +115,7 @@ export default class PostList extends PureComponent { /> ); } - if (item === LOAD_MORE_POSTS) { + if (item === LOAD_MORE_POSTS && this.props.showLoadMore) { return ( nextProps.postVisibility; + this.setState({ + showLoadMore + }); } channelLoaded = () => { @@ -119,8 +124,10 @@ class ChannelPostList extends PureComponent { }; loadMorePosts = () => { - const {actions, channel} = this.props; - actions.increasePostVisibility(channel.id); + if (this.state.showLoadMore) { + const {actions, channel} = this.props; + actions.increasePostVisibility(channel.id); + } }; loadPosts = async (channelId) => { @@ -162,7 +169,7 @@ class ChannelPostList extends PureComponent { posts={posts.slice(0, postVisibility)} loadMore={this.loadMorePosts} isLoadingMore={loadingPosts} - showLoadMore={(channel.total_msg_count - posts.length) > 0} + showLoadMore={this.state.showLoadMore} onPostPress={this.goToThread} renderReplies={true} indicateNewMessages={true}