diff --git a/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.test.tsx b/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.test.tsx index b10a5e2112..96f58ee87f 100644 --- a/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.test.tsx +++ b/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.test.tsx @@ -13,7 +13,6 @@ describe('components/post_view/new_message_separator', () => { , ); diff --git a/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.tsx b/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.tsx index eb5b2682f4..e1f77b2daa 100644 --- a/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.tsx +++ b/webapp/channels/src/components/post_view/new_message_separator/new_message_separator.tsx @@ -4,6 +4,8 @@ import React, {memo} from 'react'; import {FormattedMessage} from 'react-intl'; +import * as PostList from 'mattermost-redux/utils/post_list'; + import NotificationSeparator from 'components/widgets/separator/notification-separator'; import type {PluginComponent} from 'types/store/plugins'; @@ -12,19 +14,19 @@ type Props = { separatorId: string; wrapperRef?: React.RefObject; newMessagesSeparatorActions: PluginComponent[]; - lastViewedAt: number; channelId?: string; threadId?: string; } const NewMessageSeparator = ({ newMessagesSeparatorActions, - lastViewedAt, channelId, threadId, wrapperRef, separatorId, }: Props) => { + const lastViewedAt = PostList.getTimestampForStartOfNewMessages(separatorId); + const pluginItems = newMessagesSeparatorActions?. map((item) => { if (!item.component) { @@ -47,7 +49,7 @@ const NewMessageSeparator = ({ ref={wrapperRef} className='new-separator' > - + `; diff --git a/webapp/channels/src/components/post_view/post_list_row/post_list_row.test.tsx b/webapp/channels/src/components/post_view/post_list_row/post_list_row.test.tsx index f5839175e7..c27c3ddd16 100644 --- a/webapp/channels/src/components/post_view/post_list_row/post_list_row.test.tsx +++ b/webapp/channels/src/components/post_view/post_list_row/post_list_row.test.tsx @@ -41,7 +41,6 @@ describe('components/post_view/post_list_row', () => { post: TestHelper.getPostMock({id: 'post_id_1'}), currentUserId: 'user_id_1', newMessagesSeparatorActions: [], - lastViewedAt: 0, channelId: 'channel_id_1', }; @@ -107,7 +106,7 @@ describe('components/post_view/post_list_row', () => { }); test('should render new messages line', () => { - const listId = PostListRowListIds.START_OF_NEW_MESSAGES; + const listId = PostListRowListIds.START_OF_NEW_MESSAGES + '1553106600000'; const props = { ...defaultProps, listId, diff --git a/webapp/channels/src/components/post_view/post_list_row/post_list_row.tsx b/webapp/channels/src/components/post_view/post_list_row/post_list_row.tsx index 60fe76ee10..0a980164be 100644 --- a/webapp/channels/src/components/post_view/post_list_row/post_list_row.tsx +++ b/webapp/channels/src/components/post_view/post_list_row/post_list_row.tsx @@ -57,7 +57,6 @@ export type PostListRowProps = { limitsLoaded: boolean; exceededLimitChannelId?: string; firstInaccessiblePostTime?: number; - lastViewedAt: number; channelId: string; newMessagesSeparatorActions: PluginComponent[]; @@ -120,7 +119,6 @@ export default class PostListRow extends React.PureComponent { separatorId={listId} newMessagesSeparatorActions={this.props.newMessagesSeparatorActions} channelId={this.props.channelId} - lastViewedAt={this.props.lastViewedAt} /> ); } diff --git a/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx b/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx index f1799f7f96..294b6a6d32 100644 --- a/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx +++ b/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx @@ -51,7 +51,7 @@ describe('PostList', () => { 'post3', DATE_LINE + 1551711600000, 'post4', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000, 'post5', ]; @@ -459,7 +459,7 @@ describe('PostList', () => { for (let i = 0; i < 120; i++) { postListIds.push(`post${i}`); } - postListIds[65] = PostListRowListIds.START_OF_NEW_MESSAGES; + postListIds[65] = PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000; const props = { ...baseProps, @@ -506,7 +506,7 @@ describe('PostList', () => { 'post3', DATE_LINE + 1551711600000, 'post4', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000, 'post5', ], }; @@ -531,7 +531,7 @@ describe('PostList', () => { 'post3', DATE_LINE + 1551711600000, 'post4', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000, 'post5', ], }; @@ -614,7 +614,7 @@ describe('PostList', () => { 'post2', 'post3', 'post4', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post5', ]; @@ -637,7 +637,7 @@ describe('PostList', () => { 'post2', 'post3', 'post4', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000, 'post5', ]; diff --git a/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx b/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx index ce44adce45..d898cb14ce 100644 --- a/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx +++ b/webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx @@ -9,7 +9,7 @@ import React from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; -import {isDateLine, isStartOfNewMessages} from 'mattermost-redux/utils/post_list'; +import {getNewMessagesIndex, isDateLine, isStartOfNewMessages} from 'mattermost-redux/utils/post_list'; import type {updateNewMessagesAtInChannel} from 'actions/global_actions'; import type {CanLoadMorePosts} from 'actions/views/channel'; @@ -22,7 +22,7 @@ import ToastWrapper from 'components/toast_wrapper'; import Pluggable from 'plugins/pluggable'; import Constants, {PostListRowListIds, EventTypes, PostRequestTypes} from 'utils/constants'; import DelayedAction from 'utils/delayed_action'; -import {getPreviousPostId, getLatestPostId, getNewMessageIndex} from 'utils/post_utils'; +import {getPreviousPostId, getLatestPostId} from 'utils/post_utils'; import * as Utils from 'utils/utils'; import LatestPostReader from './latest_post_reader'; @@ -193,9 +193,9 @@ export default class PostList extends React.PureComponent { if (props.focusedPostId) { postIndex = (this.props.postListIds || []).findIndex((postId) => postId === this.props.focusedPostId); } else { - postIndex = this.getNewMessagesSeparatorIndex(props.postListIds || []); + postIndex = getNewMessagesIndex(props.postListIds || []); } - this.newMessageLineIndex = this.getNewMessagesSeparatorIndex(props.postListIds || []); + this.newMessageLineIndex = getNewMessagesIndex(props.postListIds || []); const maxPostsForSlicing = props.focusedPostId ? MAXIMUM_POSTS_FOR_SLICING.permalink : MAXIMUM_POSTS_FOR_SLICING.channel; this.initRangeToRender = [ @@ -241,7 +241,7 @@ export default class PostList extends React.PureComponent { const prevPostsCount = (prevProps.postListIds || []).length; const presentPostsCount = (this.props.postListIds || []).length; - this.newMessageLineIndex = this.getNewMessagesSeparatorIndex(this.props.postListIds || []); + this.newMessageLineIndex = getNewMessagesIndex(this.props.postListIds || []); if (snapshot) { const postlistScrollHeight = this.postListRef.current.scrollHeight; @@ -309,12 +309,6 @@ export default class PostList extends React.PureComponent { return nextState; } - getNewMessagesSeparatorIndex = (postListIds: string[]) => { - return postListIds.findIndex( - (item) => item.indexOf(PostListRowListIds.START_OF_NEW_MESSAGES) === 0, - ); - }; - handleWindowResize = () => { this.showSearchHintThreshold = this.getShowSearchHintThreshold(); }; @@ -377,7 +371,6 @@ export default class PostList extends React.PureComponent { isLastPost={isLastPost} loadingNewerPosts={this.props.loadingNewerPosts} loadingOlderPosts={this.props.loadingOlderPosts} - lastViewedAt={this.props.lastViewedAt} channelId={this.props.channelId} /> @@ -599,7 +592,7 @@ export default class PostList extends React.PureComponent { }; } - const newMessagesSeparatorIndex = getNewMessageIndex(this.state.postListIds); + const newMessagesSeparatorIndex = getNewMessagesIndex(this.state.postListIds); if (newMessagesSeparatorIndex > 0) { // if there is a dateLine above START_OF_NEW_MESSAGES then scroll to date line @@ -641,7 +634,7 @@ export default class PostList extends React.PureComponent { }; scrollToNewMessage = () => { - this.listRef.current?.scrollToItem(getNewMessageIndex(this.state.postListIds), 'start', OFFSET_TO_SHOW_TOAST); + this.listRef.current?.scrollToItem(getNewMessagesIndex(this.state.postListIds), 'start', OFFSET_TO_SHOW_TOAST); }; updateNewMessagesAtInChannel = (lastViewedAt = Date.now()) => { diff --git a/webapp/channels/src/components/threading/virtualized_thread_viewer/index.ts b/webapp/channels/src/components/threading/virtualized_thread_viewer/index.ts index c47389d11d..e5f074071f 100644 --- a/webapp/channels/src/components/threading/virtualized_thread_viewer/index.ts +++ b/webapp/channels/src/components/threading/virtualized_thread_viewer/index.ts @@ -54,7 +54,6 @@ function makeMapStateToProps() { isMobileView: getIsMobileView(state), lastPost, replyListIds, - lastViewedAt, newMessagesSeparatorActions, }; }; diff --git a/webapp/channels/src/components/threading/virtualized_thread_viewer/thread_viewer_row.tsx b/webapp/channels/src/components/threading/virtualized_thread_viewer/thread_viewer_row.tsx index ff758a4f00..0b5c25f03e 100644 --- a/webapp/channels/src/components/threading/virtualized_thread_viewer/thread_viewer_row.tsx +++ b/webapp/channels/src/components/threading/virtualized_thread_viewer/thread_viewer_row.tsx @@ -29,7 +29,6 @@ type Props = { onCardClick: (post: Post) => void; previousPostId: string; timestampProps?: Partial; - lastViewedAt: number; threadId: string; newMessagesSeparatorActions: PluginComponent[]; }; @@ -45,7 +44,6 @@ function ThreadViewerRow({ onCardClick, previousPostId, timestampProps, - lastViewedAt, threadId, newMessagesSeparatorActions, }: Props) { @@ -64,7 +62,6 @@ function ThreadViewerRow({ return ( diff --git a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.test.tsx b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.test.tsx index 1fd485777f..ece7523158 100644 --- a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.test.tsx +++ b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.test.tsx @@ -41,7 +41,6 @@ function getBasePropsAndState(): [Props, DeepPartial] { useRelativeTimestamp: true, isMobileView: false, isThreadView: false, - lastViewedAt: 0, newMessagesSeparatorActions: [], fromSuppressed: false, }; diff --git a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx index 015a168755..6bc57626ac 100644 --- a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx +++ b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx @@ -14,7 +14,7 @@ import type {UserProfile} from '@mattermost/types/users'; import {getPost} from 'mattermost-redux/selectors/entities/posts'; import {makeGetThreadOrSynthetic} from 'mattermost-redux/selectors/entities/threads'; -import {isDateLine, isStartOfNewMessages, isCreateComment} from 'mattermost-redux/utils/post_list'; +import {getNewMessagesIndex, isDateLine, isStartOfNewMessages, isCreateComment} from 'mattermost-redux/utils/post_list'; import NewRepliesBanner from 'components/new_replies_banner'; import FloatingTimestamp from 'components/post_view/floating_timestamp'; @@ -22,7 +22,7 @@ import {THREADING_TIME as BASE_THREADING_TIME} from 'components/threading/common import Constants from 'utils/constants'; import DelayedAction from 'utils/delayed_action'; -import {getNewMessageIndex, getPreviousPostId, getLatestPostId} from 'utils/post_utils'; +import {getPreviousPostId, getLatestPostId} from 'utils/post_utils'; import * as Utils from 'utils/utils'; import type {GlobalState} from 'types/store'; @@ -45,7 +45,6 @@ type Props = { useRelativeTimestamp: boolean; isMobileView: boolean; isThreadView: boolean; - lastViewedAt: number; newMessagesSeparatorActions: PluginComponent[]; inputPlaceholder?: string; fromSuppressed?: boolean; @@ -172,7 +171,7 @@ class ThreadViewerVirtualized extends PureComponent { }; } - const newMessagesSeparatorIndex = getNewMessageIndex(replyListIds); + const newMessagesSeparatorIndex = getNewMessagesIndex(replyListIds); if (newMessagesSeparatorIndex > 0) { return { index: newMessagesSeparatorIndex, @@ -254,7 +253,7 @@ class ThreadViewerVirtualized extends PureComponent { if (this.props.highlightedPostId) { postIndex = this.props.replyListIds.findIndex((postId) => postId === this.props.highlightedPostId); } else { - postIndex = getNewMessageIndex(this.props.replyListIds); + postIndex = getNewMessagesIndex(this.props.replyListIds); } return postIndex === -1 ? 0 : postIndex; @@ -307,7 +306,7 @@ class ThreadViewerVirtualized extends PureComponent { }; handleToastClick = () => { - const index = getNewMessageIndex(this.props.replyListIds); + const index = getNewMessagesIndex(this.props.replyListIds); if (index >= 0) { this.scrollToItem(index, 'start', OFFSET_TO_SHOW_TOAST); } else { @@ -395,7 +394,6 @@ class ThreadViewerVirtualized extends PureComponent { onCardClick={this.props.onCardClick} previousPostId={getPreviousPostId(data, index)} timestampProps={this.props.useRelativeTimestamp ? THREADING_TIME : undefined} - lastViewedAt={this.props.lastViewedAt} threadId={this.props.selected.id} newMessagesSeparatorActions={this.props.newMessagesSeparatorActions} /> @@ -413,7 +411,7 @@ class ThreadViewerVirtualized extends PureComponent { isNewMessagesVisible = (): boolean => { const {visibleStopIndex} = this.state; - const newMessagesSeparatorIndex = getNewMessageIndex(this.props.replyListIds); + const newMessagesSeparatorIndex = getNewMessagesIndex(this.props.replyListIds); if (visibleStopIndex != null) { return visibleStopIndex < newMessagesSeparatorIndex; } diff --git a/webapp/channels/src/components/toast_wrapper/toast_wrapper.test.tsx b/webapp/channels/src/components/toast_wrapper/toast_wrapper.test.tsx index c5b4723ca6..3a0973cd42 100644 --- a/webapp/channels/src/components/toast_wrapper/toast_wrapper.test.tsx +++ b/webapp/channels/src/components/toast_wrapper/toast_wrapper.test.tsx @@ -85,7 +85,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -104,7 +104,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -162,7 +162,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -191,7 +191,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -247,7 +247,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -277,7 +277,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -312,7 +312,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -334,7 +334,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -356,7 +356,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -381,7 +381,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -403,7 +403,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -426,7 +426,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -464,7 +464,7 @@ describe('components/ToastWrapper', () => { postListIds: [ 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -480,7 +480,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', @@ -497,7 +497,7 @@ describe('components/ToastWrapper', () => { 'post1', 'post2', 'post3', - PostListRowListIds.START_OF_NEW_MESSAGES, + PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, DATE_LINE + 1551711600000, 'post4', 'post5', diff --git a/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx b/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx index 0991a1be12..a4e9d07d4b 100644 --- a/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx +++ b/webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx @@ -7,6 +7,7 @@ import type {IntlShape, WrappedComponentProps} from 'react-intl'; import type {RouteComponentProps} from 'react-router-dom'; import {Preferences} from 'mattermost-redux/constants'; +import {getNewMessagesIndex} from 'mattermost-redux/utils/post_list'; import {HintToast} from 'components/hint-toast/hint_toast'; import ScrollToBottomToast from 'components/scroll_to_bottom_toast'; @@ -18,7 +19,7 @@ import {getHistory} from 'utils/browser_history'; import Constants from 'utils/constants'; import {isToday} from 'utils/datetime'; import {isKeyPressed} from 'utils/keyboard'; -import {isIdNotPost, getNewMessageIndex} from 'utils/post_utils'; +import {isIdNotPost} from 'utils/post_utils'; import {localizeMessage} from 'utils/utils'; import './toast__wrapper.scss'; @@ -91,7 +92,7 @@ export class ToastWrapperClass extends React.PureComponent { } static countNewMessages = (rootPosts: Record, isCollapsedThreadsEnabled: boolean, postListIds: string[] = []) => { - const mark = getNewMessageIndex(postListIds); + const mark = getNewMessagesIndex(postListIds); if (mark <= 0) { return 0; } diff --git a/webapp/channels/src/components/widgets/separator/notification-separator.tsx b/webapp/channels/src/components/widgets/separator/notification-separator.tsx index 2ceaaac41e..7362a1c348 100644 --- a/webapp/channels/src/components/widgets/separator/notification-separator.tsx +++ b/webapp/channels/src/components/widgets/separator/notification-separator.tsx @@ -5,7 +5,9 @@ import React from 'react'; import './separator.scss'; import './notification-separator.scss'; -type Props = React.PropsWithChildren; +type Props = { + children?: React.ReactNode; +}; const NotificationSeparator = ({children}: Props) => { return ( diff --git a/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.test.ts b/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.test.ts index fa5e87e388..ca31296336 100644 --- a/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.test.ts +++ b/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.test.ts @@ -208,7 +208,7 @@ describe('makeFilterPostsAndAddSeparators', () => { '1010', '1005', '1000', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + (time + 999), 'date-' + (today.getTime() + 1000), ]); @@ -217,7 +217,7 @@ describe('makeFilterPostsAndAddSeparators', () => { expect(now).toEqual([ '1010', '1005', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + (time + 1003), '1000', 'date-' + (today.getTime() + 1000), ]); @@ -225,7 +225,7 @@ describe('makeFilterPostsAndAddSeparators', () => { now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt: time + 1006, indicateNewMessages: true}); expect(now).toEqual([ '1010', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + (time + 1006), '1005', '1000', 'date-' + (today.getTime() + 1000), @@ -296,7 +296,7 @@ describe('makeFilterPostsAndAddSeparators', () => { '1004', 'date-' + tomorrow.getTime(), '1003', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, '1001', 'date-' + today.getTime(), ]); @@ -304,13 +304,13 @@ describe('makeFilterPostsAndAddSeparators', () => { // No changes let prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).toEqual(prev); + expect(now).toBe(prev); expect(now).toEqual([ '1006', '1004', 'date-' + tomorrow.getTime(), '1003', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, '1001', 'date-' + today.getTime(), ]); @@ -320,13 +320,13 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).toEqual(prev); + expect(now).not.toBe(prev); expect(now).toEqual([ '1006', '1004', 'date-' + tomorrow.getTime(), '1003', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, '1001', 'date-' + today.getTime(), ]); @@ -336,11 +336,11 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).not.toEqual(prev); + expect(now).not.toBe(prev); expect(now).toEqual([ '1006', '1004', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, 'date-' + tomorrow.getTime(), '1003', '1001', @@ -349,11 +349,11 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).toEqual(prev); + expect(now).toBe(prev); expect(now).toEqual([ '1006', '1004', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, 'date-' + tomorrow.getTime(), '1003', '1001', @@ -365,11 +365,11 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).toEqual(prev); + expect(now).toBe(prev); expect(now).toEqual([ '1006', '1004', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, 'date-' + tomorrow.getTime(), '1003', '1001', @@ -393,11 +393,11 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).toEqual(prev); + expect(now).toBe(prev); expect(now).toEqual([ '1006', '1004', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, 'date-' + tomorrow.getTime(), '1003', '1001', @@ -421,11 +421,11 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).toEqual(prev); + expect(now).toBe(prev); expect(now).toEqual([ '1006', '1004', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, 'date-' + tomorrow.getTime(), '1003', '1001', @@ -453,10 +453,10 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).not.toEqual(prev); + expect(now).not.toBe(prev); expect(now).toEqual([ '1004', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, 'date-' + tomorrow.getTime(), '1003', '1001', @@ -465,10 +465,10 @@ describe('makeFilterPostsAndAddSeparators', () => { prev = now; now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); - expect(now).toEqual(prev); + expect(now).toBe(prev); expect(now).toEqual([ '1004', - START_OF_NEW_MESSAGES, + START_OF_NEW_MESSAGES + lastViewedAt, 'date-' + tomorrow.getTime(), '1003', '1001', @@ -908,7 +908,7 @@ describe('getFirstPostId', () => { }); test('should skip the new message line', () => { - expect(getFirstPostId([START_OF_NEW_MESSAGES, 'post2', 'post3', 'post4'])).toBe('post2'); + expect(getFirstPostId([START_OF_NEW_MESSAGES + '1234', 'post2', 'post3', 'post4'])).toBe('post2'); }); }); @@ -926,7 +926,7 @@ describe('getLastPostId', () => { }); test('should skip the new message line', () => { - expect(getLastPostId(['post2', 'post3', 'post4', START_OF_NEW_MESSAGES])).toBe('post4'); + expect(getLastPostId(['post2', 'post3', 'post4', START_OF_NEW_MESSAGES + '1234'])).toBe('post4'); }); }); @@ -944,7 +944,7 @@ describe('getLastPostIndex', () => { }); test('should skip the new message line and return index of last post', () => { - expect(getLastPostIndex(['post2', 'post3', 'post4', START_OF_NEW_MESSAGES])).toBe(2); + expect(getLastPostIndex(['post2', 'post3', 'post4', START_OF_NEW_MESSAGES + '1234'])).toBe(2); }); }); diff --git a/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.ts b/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.ts index fdd69897b0..7421a9f078 100644 --- a/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.ts +++ b/webapp/channels/src/packages/mattermost-redux/src/utils/post_list.ts @@ -20,7 +20,7 @@ import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils'; export const COMBINED_USER_ACTIVITY = 'user-activity-'; export const CREATE_COMMENT = 'create-comment'; export const DATE_LINE = 'date-'; -export const START_OF_NEW_MESSAGES = 'start-of-new-messages'; +export const START_OF_NEW_MESSAGES = 'start-of-new-messages-'; export const MAX_COMBINED_SYSTEM_POSTS = 100; export function shouldShowJoinLeaveMessages(state: GlobalState) { @@ -111,7 +111,7 @@ export function makeFilterPostsAndAddSeparators() { !addedNewMessagesIndicator && indicateNewMessages ) { - out.push(START_OF_NEW_MESSAGES); + out.push(START_OF_NEW_MESSAGES + lastViewedAt); addedNewMessagesIndicator = true; } @@ -140,7 +140,7 @@ export function makeCombineUserActivityPosts() { for (let i = 0; i < postIds.length; i++) { const postId = postIds[i]; - if (postId === START_OF_NEW_MESSAGES || postId.startsWith(DATE_LINE) || isCreateComment(postId)) { + if (isStartOfNewMessages(postId) || isDateLine(postId) || isCreateComment(postId)) { // Not a post, so it won't be combined out.push(postId); @@ -187,7 +187,15 @@ export function makeCombineUserActivityPosts() { } export function isStartOfNewMessages(item: string) { - return item === START_OF_NEW_MESSAGES; + return item.startsWith(START_OF_NEW_MESSAGES); +} + +export function getTimestampForStartOfNewMessages(item: string) { + return parseInt(item.substring(START_OF_NEW_MESSAGES.length), 10); +} + +export function getNewMessagesIndex(postListIds: string[]): number { + return postListIds.findIndex(isStartOfNewMessages); } export function isCreateComment(item: string) { diff --git a/webapp/channels/src/utils/post_utils.test.tsx b/webapp/channels/src/utils/post_utils.test.tsx index af4d02cf42..769b8e8685 100644 --- a/webapp/channels/src/utils/post_utils.test.tsx +++ b/webapp/channels/src/utils/post_utils.test.tsx @@ -801,7 +801,7 @@ describe('PostUtils.getOldestPostId', () => { }); test('Should not return START_OF_NEW_MESSAGES', () => { - const postId = PostUtils.getOldestPostId(['postId1', 'postId2', PostListRowListIds.START_OF_NEW_MESSAGES]); + const postId = PostUtils.getOldestPostId(['postId1', 'postId2', PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000]); expect(postId).toEqual('postId2'); }); }); @@ -813,7 +813,7 @@ describe('PostUtils.getPreviousPostId', () => { }); test('Should skip START_OF_NEW_MESSAGES', () => { - const postId = PostUtils.getPreviousPostId(['postId1', 'postId2', PostListRowListIds.START_OF_NEW_MESSAGES, 'postId3'], 1); + const postId = PostUtils.getPreviousPostId(['postId1', 'postId2', PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, 'postId3'], 1); expect(postId).toEqual('postId3'); }); @@ -845,7 +845,7 @@ describe('PostUtils.getLatestPostId', () => { }); test('Should not return START_OF_NEW_MESSAGES', () => { - const postId = PostUtils.getLatestPostId([PostListRowListIds.START_OF_NEW_MESSAGES, 'postId1', 'postId2']); + const postId = PostUtils.getLatestPostId([PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000, 'postId1', 'postId2']); expect(postId).toEqual('postId1'); }); diff --git a/webapp/channels/src/utils/post_utils.ts b/webapp/channels/src/utils/post_utils.ts index df19146205..480a9a9afb 100644 --- a/webapp/channels/src/utils/post_utils.ts +++ b/webapp/channels/src/utils/post_utils.ts @@ -626,12 +626,6 @@ export function splitMessageBasedOnTextSelection(selectionStart: number, selecti return {firstPiece, lastPiece}; } -export function getNewMessageIndex(postListIds: string[]): number { - return postListIds.findIndex( - (item) => item.indexOf(PostListRowListIds.START_OF_NEW_MESSAGES) === 0, - ); -} - export function areConsecutivePostsBySameUser(post: Post, previousPost: Post): boolean { if (!(post && previousPost)) { return false;