diff --git a/webapp/channels/src/components/post_view/post_list/index.tsx b/webapp/channels/src/components/post_view/post_list/index.tsx index 8250fe8f45..bedd0027c4 100644 --- a/webapp/channels/src/components/post_view/post_list/index.tsx +++ b/webapp/channels/src/components/post_view/post_list/index.tsx @@ -7,7 +7,7 @@ import type {Dispatch} from 'redux'; import {markChannelAsRead} from 'mattermost-redux/actions/channels'; import {RequestStatus} from 'mattermost-redux/constants'; -import {getRecentPostsChunkInChannel, makeGetPostsChunkAroundPost, getUnreadPostsChunk, getPost, isPostsChunkIncludingUnreadsPosts, getLimitedViews} from 'mattermost-redux/selectors/entities/posts'; +import {getRecentPostsChunkInChannel, makeGetPostsChunkAroundPost, getUnreadPostsChunk, getPost, isPostsChunkIncludingUnreadsPosts, getLimitedViews, getNotRecentPostsChunkInChannel} from 'mattermost-redux/selectors/entities/posts'; import {memoizeResult} from 'mattermost-redux/utils/helpers'; import {makePreparePostIdsForPostList} from 'mattermost-redux/utils/post_list'; @@ -50,6 +50,7 @@ function makeMapStateToProps() { let latestPostTimeStamp = 0; let postIds: string[] | undefined; let chunk; + let notRecentPostsChunk; let atLatestPost = false; let atOldestPost = false; let formattedPostIds: string[] | undefined; @@ -68,6 +69,7 @@ function makeMapStateToProps() { chunk = getUnreadPostsChunk(state, channelId, unreadChunkTimeStamp); } else { chunk = getRecentPostsChunkInChannel(state, channelId); + notRecentPostsChunk = getNotRecentPostsChunkInChannel(state, channelId); } if (chunk) { @@ -76,6 +78,13 @@ function makeMapStateToProps() { atOldestPost = Boolean(chunk.oldest); } + let latestPostNoChunkId; + + if (notRecentPostsChunk) { + const postIdsNoChunk = notRecentPostsChunk?.order; + latestPostNoChunkId = memoizedGetLatestPostId(postIdsNoChunk); + } + let shouldHideNewMessageIndicator = false; if (unreadChunkTimeStamp != null) { shouldHideNewMessageIndicator = shouldStartFromBottomWhenUnread && !isPostsChunkIncludingUnreadsPosts(state, chunk!, unreadChunkTimeStamp); @@ -93,6 +102,7 @@ function makeMapStateToProps() { } return { + latestPostNoChunkId, lastViewedAt, isFirstLoad: isFirstLoad(state, channelId), formattedPostIds, @@ -124,3 +134,4 @@ function mapDispatchToProps(dispatch: Dispatch) { } export default connect(makeMapStateToProps, mapDispatchToProps)(PostList); + diff --git a/webapp/channels/src/components/post_view/post_list/post_list.tsx b/webapp/channels/src/components/post_view/post_list/post_list.tsx index a346eb5995..1597f62612 100644 --- a/webapp/channels/src/components/post_view/post_list/post_list.tsx +++ b/webapp/channels/src/components/post_view/post_list/post_list.tsx @@ -106,6 +106,8 @@ export interface Props { lastViewedAt: number; + latestPostNoChunkId?: string; + toggleShouldStartFromBottomWhenUnread: () => void; shouldStartFromBottomWhenUnread: boolean; hasInaccessiblePosts: boolean; @@ -204,6 +206,9 @@ export default class PostList extends React.PureComponent { if (this.props.channelId !== prevProps.channelId) { this.postsOnLoad(this.props.channelId); } + if (this.props.latestPostNoChunkId !== prevProps.latestPostNoChunkId && this.props.latestPostNoChunkId) { + this.loadMissingPosts(); + } if (this.props.postListIds != null && prevProps.postListIds == null) { markAndMeasureChannelSwitchEnd(true); } @@ -213,6 +218,12 @@ export default class PostList extends React.PureComponent { this.mounted = false; } + loadMissingPosts = async () => { + if (this.props.latestPostNoChunkId) { + await this.props.actions.loadPostsAround(this.props.channelId, this.props.latestPostNoChunkId); + } + }; + postsOnLoad = async (channelId: string) => { const {focusedPostId, isFirstLoad, latestPostTimeStamp, isPrefetchingInProcess, actions} = this.props; if (focusedPostId) { diff --git a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/posts.ts b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/posts.ts index 0ad07b2b03..e2819a98e7 100644 --- a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/posts.ts +++ b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/posts.ts @@ -589,6 +589,16 @@ export function getRecentPostsChunkInChannel(state: GlobalState, channelId: Chan return postsForChannel.find((block) => block.recent); } +export function getNotRecentPostsChunkInChannel(state: GlobalState, channelId: Channel['id']): PostOrderBlock | null | undefined { + const postsForChannel = state.entities.posts.postsInChannel[channelId]; + + if (!postsForChannel) { + return null; + } + + return postsForChannel.find((block) => !block.recent); +} + export function getOldestPostsChunkInChannel(state: GlobalState, channelId: Channel['id']): PostOrderBlock | null | undefined { const postsForChannel = state.entities.posts.postsInChannel[channelId];