IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

MM-56983 Change how lastViewedAt is passed to NewMessageSeparator and remove some duplicated code (#26294)

Browse Source
This commit is contained in:
Harrison Healey 2024-03-12 09:56:49 -04:00 committed by GitHub
parent 76bab25199
commit 2480a6c646
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 87 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/channels/src/components/post_view/new_message_separator/new_message_separator.test.tsx
View File

@ -13,7 +13,6 @@ describe('components/post_view/new_message_separator', () => {
<NewMessageSeparator <NewMessageSeparator
separatorId='1234' separatorId='1234'
newMessagesSeparatorActions={[]} newMessagesSeparatorActions={[]}
lastViewedAt={0}
/>, />,
); );

8
webapp/channels/src/components/post_view/new_message_separator/new_message_separator.tsx
View File

@ -4,6 +4,8 @@
import React, {memo} from 'react'; import React, {memo} from 'react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import * as PostList from 'mattermost-redux/utils/post_list';
import NotificationSeparator from 'components/widgets/separator/notification-separator'; import NotificationSeparator from 'components/widgets/separator/notification-separator';
import type {PluginComponent} from 'types/store/plugins'; import type {PluginComponent} from 'types/store/plugins';
@ -12,19 +14,19 @@ type Props = {
separatorId: string; separatorId: string;
wrapperRef?: React.RefObject<HTMLDivElement>; wrapperRef?: React.RefObject<HTMLDivElement>;
newMessagesSeparatorActions: PluginComponent[]; newMessagesSeparatorActions: PluginComponent[];
lastViewedAt: number;
channelId?: string; channelId?: string;
threadId?: string; threadId?: string;
} }
const NewMessageSeparator = ({ const NewMessageSeparator = ({
newMessagesSeparatorActions, newMessagesSeparatorActions,
lastViewedAt,
channelId, channelId,
threadId, threadId,
wrapperRef, wrapperRef,
separatorId, separatorId,
}: Props) => { }: Props) => {
const lastViewedAt = PostList.getTimestampForStartOfNewMessages(separatorId);
const pluginItems = newMessagesSeparatorActions?. const pluginItems = newMessagesSeparatorActions?.
map((item) => { map((item) => {
if (!item.component) { if (!item.component) {
@ -47,7 +49,7 @@ const NewMessageSeparator = ({
ref={wrapperRef} ref={wrapperRef}
className='new-separator' className='new-separator'
> >
<NotificationSeparator id={separatorId}> <NotificationSeparator>
<FormattedMessage <FormattedMessage
id='posts_view.newMsg' id='posts_view.newMsg'
defaultMessage='New Messages' defaultMessage='New Messages'

3
webapp/channels/src/components/post_view/post_list_row/__snapshots__/post_list_row.test.tsx.snap
View File

@ -95,9 +95,8 @@ exports[`components/post_view/post_list_row should render more messages loading
exports[`components/post_view/post_list_row should render new messages line 1`] = ` exports[`components/post_view/post_list_row should render new messages line 1`] = `
<Memo(NewMessageSeparator) <Memo(NewMessageSeparator)
channelId="channel_id_1" channelId="channel_id_1"
lastViewedAt={0}
newMessagesSeparatorActions={Array []} newMessagesSeparatorActions={Array []}
separatorId="start-of-new-messages" separatorId="start-of-new-messages-1553106600000"
/> />
`; `;

3
webapp/channels/src/components/post_view/post_list_row/post_list_row.test.tsx
View File

@ -41,7 +41,6 @@ describe('components/post_view/post_list_row', () => {
post: TestHelper.getPostMock({id: 'post_id_1'}), post: TestHelper.getPostMock({id: 'post_id_1'}),
currentUserId: 'user_id_1', currentUserId: 'user_id_1',
newMessagesSeparatorActions: [], newMessagesSeparatorActions: [],
lastViewedAt: 0,
channelId: 'channel_id_1', channelId: 'channel_id_1',
}; };
@ -107,7 +106,7 @@ describe('components/post_view/post_list_row', () => {
}); });
test('should render new messages line', () => { test('should render new messages line', () => {
const listId = PostListRowListIds.START_OF_NEW_MESSAGES; const listId = PostListRowListIds.START_OF_NEW_MESSAGES + '1553106600000';
const props = { const props = {
...defaultProps, ...defaultProps,
listId, listId,

2
webapp/channels/src/components/post_view/post_list_row/post_list_row.tsx
View File

@ -57,7 +57,6 @@ export type PostListRowProps = {
limitsLoaded: boolean; limitsLoaded: boolean;
exceededLimitChannelId?: string; exceededLimitChannelId?: string;
firstInaccessiblePostTime?: number; firstInaccessiblePostTime?: number;
lastViewedAt: number;
channelId: string; channelId: string;
newMessagesSeparatorActions: PluginComponent[]; newMessagesSeparatorActions: PluginComponent[];
@ -120,7 +119,6 @@ export default class PostListRow extends React.PureComponent<PostListRowProps> {
separatorId={listId} separatorId={listId}
newMessagesSeparatorActions={this.props.newMessagesSeparatorActions} newMessagesSeparatorActions={this.props.newMessagesSeparatorActions}
channelId={this.props.channelId} channelId={this.props.channelId}
lastViewedAt={this.props.lastViewedAt}
/> />
); );
} }

12
webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx
View File

@ -51,7 +51,7 @@ describe('PostList', () => {
'post3', 'post3',
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000,
'post5', 'post5',
]; ];
@ -459,7 +459,7 @@ describe('PostList', () => {
for (let i = 0; i < 120; i++) { for (let i = 0; i < 120; i++) {
postListIds.push(`post${i}`); postListIds.push(`post${i}`);
} }
postListIds[65] = PostListRowListIds.START_OF_NEW_MESSAGES; postListIds[65] = PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000;
const props = { const props = {
...baseProps, ...baseProps,
@ -506,7 +506,7 @@ describe('PostList', () => {
'post3', 'post3',
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000,
'post5', 'post5',
], ],
}; };
@ -531,7 +531,7 @@ describe('PostList', () => {
'post3', 'post3',
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000,
'post5', 'post5',
], ],
}; };
@ -614,7 +614,7 @@ describe('PostList', () => {
'post2', 'post2',
'post3', 'post3',
'post4', 'post4',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post5', 'post5',
]; ];
@ -637,7 +637,7 @@ describe('PostList', () => {
'post2', 'post2',
'post3', 'post3',
'post4', 'post4',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711601000,
'post5', 'post5',
]; ];

21
webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx
View File

@ -9,7 +9,7 @@ import React from 'react';
import AutoSizer from 'react-virtualized-auto-sizer'; import AutoSizer from 'react-virtualized-auto-sizer';
import EventEmitter from 'mattermost-redux/utils/event_emitter'; 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 {updateNewMessagesAtInChannel} from 'actions/global_actions';
import type {CanLoadMorePosts} from 'actions/views/channel'; import type {CanLoadMorePosts} from 'actions/views/channel';
@ -22,7 +22,7 @@ import ToastWrapper from 'components/toast_wrapper';
import Pluggable from 'plugins/pluggable'; import Pluggable from 'plugins/pluggable';
import Constants, {PostListRowListIds, EventTypes, PostRequestTypes} from 'utils/constants'; import Constants, {PostListRowListIds, EventTypes, PostRequestTypes} from 'utils/constants';
import DelayedAction from 'utils/delayed_action'; 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 * as Utils from 'utils/utils';
import LatestPostReader from './latest_post_reader'; import LatestPostReader from './latest_post_reader';
@ -193,9 +193,9 @@ export default class PostList extends React.PureComponent<Props, State> {
if (props.focusedPostId) { if (props.focusedPostId) {
postIndex = (this.props.postListIds || []).findIndex((postId) => postId === this.props.focusedPostId); postIndex = (this.props.postListIds || []).findIndex((postId) => postId === this.props.focusedPostId);
} else { } 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; const maxPostsForSlicing = props.focusedPostId ? MAXIMUM_POSTS_FOR_SLICING.permalink : MAXIMUM_POSTS_FOR_SLICING.channel;
this.initRangeToRender = [ this.initRangeToRender = [
@ -241,7 +241,7 @@ export default class PostList extends React.PureComponent<Props, State> {
const prevPostsCount = (prevProps.postListIds || []).length; const prevPostsCount = (prevProps.postListIds || []).length;
const presentPostsCount = (this.props.postListIds || []).length; const presentPostsCount = (this.props.postListIds || []).length;
this.newMessageLineIndex = this.getNewMessagesSeparatorIndex(this.props.postListIds || []); this.newMessageLineIndex = getNewMessagesIndex(this.props.postListIds || []);
if (snapshot) { if (snapshot) {
const postlistScrollHeight = this.postListRef.current.scrollHeight; const postlistScrollHeight = this.postListRef.current.scrollHeight;
@ -309,12 +309,6 @@ export default class PostList extends React.PureComponent<Props, State> {
return nextState; return nextState;
} }
getNewMessagesSeparatorIndex = (postListIds: string[]) => {
return postListIds.findIndex(
(item) => item.indexOf(PostListRowListIds.START_OF_NEW_MESSAGES) === 0,
);
};
handleWindowResize = () => { handleWindowResize = () => {
this.showSearchHintThreshold = this.getShowSearchHintThreshold(); this.showSearchHintThreshold = this.getShowSearchHintThreshold();
}; };
@ -377,7 +371,6 @@ export default class PostList extends React.PureComponent<Props, State> {
isLastPost={isLastPost} isLastPost={isLastPost}
loadingNewerPosts={this.props.loadingNewerPosts} loadingNewerPosts={this.props.loadingNewerPosts}
loadingOlderPosts={this.props.loadingOlderPosts} loadingOlderPosts={this.props.loadingOlderPosts}
lastViewedAt={this.props.lastViewedAt}
channelId={this.props.channelId} channelId={this.props.channelId}
/> />
</div> </div>
@ -599,7 +592,7 @@ export default class PostList extends React.PureComponent<Props, State> {
}; };
} }
const newMessagesSeparatorIndex = getNewMessageIndex(this.state.postListIds); const newMessagesSeparatorIndex = getNewMessagesIndex(this.state.postListIds);
if (newMessagesSeparatorIndex > 0) { if (newMessagesSeparatorIndex > 0) {
// if there is a dateLine above START_OF_NEW_MESSAGES then scroll to date line // 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<Props, State> {
}; };
scrollToNewMessage = () => { 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()) => { updateNewMessagesAtInChannel = (lastViewedAt = Date.now()) => {

1
webapp/channels/src/components/threading/virtualized_thread_viewer/index.ts
View File

@ -54,7 +54,6 @@ function makeMapStateToProps() {
isMobileView: getIsMobileView(state), isMobileView: getIsMobileView(state),
lastPost, lastPost,
replyListIds, replyListIds,
lastViewedAt,
newMessagesSeparatorActions, newMessagesSeparatorActions,
}; };
}; };

3
webapp/channels/src/components/threading/virtualized_thread_viewer/thread_viewer_row.tsx
View File

@ -29,7 +29,6 @@ type Props = {
onCardClick: (post: Post) => void; onCardClick: (post: Post) => void;
previousPostId: string; previousPostId: string;
timestampProps?: Partial<TimestampProps>; timestampProps?: Partial<TimestampProps>;
lastViewedAt: number;
threadId: string; threadId: string;
newMessagesSeparatorActions: PluginComponent[]; newMessagesSeparatorActions: PluginComponent[];
}; };
@ -45,7 +44,6 @@ function ThreadViewerRow({
onCardClick, onCardClick,
previousPostId, previousPostId,
timestampProps, timestampProps,
lastViewedAt,
threadId, threadId,
newMessagesSeparatorActions, newMessagesSeparatorActions,
}: Props) { }: Props) {
@ -64,7 +62,6 @@ function ThreadViewerRow({
return ( return (
<NewMessageSeparator <NewMessageSeparator
separatorId={listId} separatorId={listId}
lastViewedAt={lastViewedAt}
threadId={threadId} threadId={threadId}
newMessagesSeparatorActions={newMessagesSeparatorActions} newMessagesSeparatorActions={newMessagesSeparatorActions}
/> />

1
webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.test.tsx
View File

@ -41,7 +41,6 @@ function getBasePropsAndState(): [Props, DeepPartial<GlobalState>] {
useRelativeTimestamp: true, useRelativeTimestamp: true,
isMobileView: false, isMobileView: false,
isThreadView: false, isThreadView: false,
lastViewedAt: 0,
newMessagesSeparatorActions: [], newMessagesSeparatorActions: [],
fromSuppressed: false, fromSuppressed: false,
}; };

14
webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx
View File

@ -14,7 +14,7 @@ import type {UserProfile} from '@mattermost/types/users';
import {getPost} from 'mattermost-redux/selectors/entities/posts'; import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {makeGetThreadOrSynthetic} from 'mattermost-redux/selectors/entities/threads'; 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 NewRepliesBanner from 'components/new_replies_banner';
import FloatingTimestamp from 'components/post_view/floating_timestamp'; 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 Constants from 'utils/constants';
import DelayedAction from 'utils/delayed_action'; 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 * as Utils from 'utils/utils';
import type {GlobalState} from 'types/store'; import type {GlobalState} from 'types/store';
@ -45,7 +45,6 @@ type Props = {
useRelativeTimestamp: boolean; useRelativeTimestamp: boolean;
isMobileView: boolean; isMobileView: boolean;
isThreadView: boolean; isThreadView: boolean;
lastViewedAt: number;
newMessagesSeparatorActions: PluginComponent[]; newMessagesSeparatorActions: PluginComponent[];
inputPlaceholder?: string; inputPlaceholder?: string;
fromSuppressed?: boolean; fromSuppressed?: boolean;
@ -172,7 +171,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
}; };
} }
const newMessagesSeparatorIndex = getNewMessageIndex(replyListIds); const newMessagesSeparatorIndex = getNewMessagesIndex(replyListIds);
if (newMessagesSeparatorIndex > 0) { if (newMessagesSeparatorIndex > 0) {
return { return {
index: newMessagesSeparatorIndex, index: newMessagesSeparatorIndex,
@ -254,7 +253,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
if (this.props.highlightedPostId) { if (this.props.highlightedPostId) {
postIndex = this.props.replyListIds.findIndex((postId) => postId === this.props.highlightedPostId); postIndex = this.props.replyListIds.findIndex((postId) => postId === this.props.highlightedPostId);
} else { } else {
postIndex = getNewMessageIndex(this.props.replyListIds); postIndex = getNewMessagesIndex(this.props.replyListIds);
} }
return postIndex === -1 ? 0 : postIndex; return postIndex === -1 ? 0 : postIndex;
@ -307,7 +306,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
}; };
handleToastClick = () => { handleToastClick = () => {
const index = getNewMessageIndex(this.props.replyListIds); const index = getNewMessagesIndex(this.props.replyListIds);
if (index >= 0) { if (index >= 0) {
this.scrollToItem(index, 'start', OFFSET_TO_SHOW_TOAST); this.scrollToItem(index, 'start', OFFSET_TO_SHOW_TOAST);
} else { } else {
@ -395,7 +394,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
onCardClick={this.props.onCardClick} onCardClick={this.props.onCardClick}
previousPostId={getPreviousPostId(data, index)} previousPostId={getPreviousPostId(data, index)}
timestampProps={this.props.useRelativeTimestamp ? THREADING_TIME : undefined} timestampProps={this.props.useRelativeTimestamp ? THREADING_TIME : undefined}
lastViewedAt={this.props.lastViewedAt}
threadId={this.props.selected.id} threadId={this.props.selected.id}
newMessagesSeparatorActions={this.props.newMessagesSeparatorActions} newMessagesSeparatorActions={this.props.newMessagesSeparatorActions}
/> />
@ -413,7 +411,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
isNewMessagesVisible = (): boolean => { isNewMessagesVisible = (): boolean => {
const {visibleStopIndex} = this.state; const {visibleStopIndex} = this.state;
const newMessagesSeparatorIndex = getNewMessageIndex(this.props.replyListIds); const newMessagesSeparatorIndex = getNewMessagesIndex(this.props.replyListIds);
if (visibleStopIndex != null) { if (visibleStopIndex != null) {
return visibleStopIndex < newMessagesSeparatorIndex; return visibleStopIndex < newMessagesSeparatorIndex;
} }

30
webapp/channels/src/components/toast_wrapper/toast_wrapper.test.tsx
View File

@ -85,7 +85,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -104,7 +104,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -162,7 +162,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -191,7 +191,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -247,7 +247,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -277,7 +277,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -312,7 +312,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -334,7 +334,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -356,7 +356,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -381,7 +381,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -403,7 +403,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -426,7 +426,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -464,7 +464,7 @@ describe('components/ToastWrapper', () => {
postListIds: [ postListIds: [
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -480,7 +480,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',
@ -497,7 +497,7 @@ describe('components/ToastWrapper', () => {
'post1', 'post1',
'post2', 'post2',
'post3', 'post3',
PostListRowListIds.START_OF_NEW_MESSAGES, PostListRowListIds.START_OF_NEW_MESSAGES + 1551711599000,
DATE_LINE + 1551711600000, DATE_LINE + 1551711600000,
'post4', 'post4',
'post5', 'post5',

5
webapp/channels/src/components/toast_wrapper/toast_wrapper.tsx
View File

@ -7,6 +7,7 @@ import type {IntlShape, WrappedComponentProps} from 'react-intl';
import type {RouteComponentProps} from 'react-router-dom'; import type {RouteComponentProps} from 'react-router-dom';
import {Preferences} from 'mattermost-redux/constants'; import {Preferences} from 'mattermost-redux/constants';
import {getNewMessagesIndex} from 'mattermost-redux/utils/post_list';
import {HintToast} from 'components/hint-toast/hint_toast'; import {HintToast} from 'components/hint-toast/hint_toast';
import ScrollToBottomToast from 'components/scroll_to_bottom_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 Constants from 'utils/constants';
import {isToday} from 'utils/datetime'; import {isToday} from 'utils/datetime';
import {isKeyPressed} from 'utils/keyboard'; import {isKeyPressed} from 'utils/keyboard';
import {isIdNotPost, getNewMessageIndex} from 'utils/post_utils'; import {isIdNotPost} from 'utils/post_utils';
import {localizeMessage} from 'utils/utils'; import {localizeMessage} from 'utils/utils';
import './toast__wrapper.scss'; import './toast__wrapper.scss';
@ -91,7 +92,7 @@ export class ToastWrapperClass extends React.PureComponent<Props, State> {
} }
static countNewMessages = (rootPosts: Record<string, boolean>, isCollapsedThreadsEnabled: boolean, postListIds: string[] = []) => { static countNewMessages = (rootPosts: Record<string, boolean>, isCollapsedThreadsEnabled: boolean, postListIds: string[] = []) => {
const mark = getNewMessageIndex(postListIds); const mark = getNewMessagesIndex(postListIds);
if (mark <= 0) { if (mark <= 0) {
return 0; return 0;
} }

4
webapp/channels/src/components/widgets/separator/notification-separator.tsx
View File

@ -5,7 +5,9 @@ import React from 'react';
import './separator.scss'; import './separator.scss';
import './notification-separator.scss'; import './notification-separator.scss';
type Props = React.PropsWithChildren<any>; type Props = {
children?: React.ReactNode;
};
const NotificationSeparator = ({children}: Props) => { const NotificationSeparator = ({children}: Props) => {
return ( return (

50
webapp/channels/src/packages/mattermost-redux/src/utils/post_list.test.ts
View File

@ -208,7 +208,7 @@ describe('makeFilterPostsAndAddSeparators', () => {
'1010', '1010',
'1005', '1005',
'1000', '1000',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + (time + 999),
'date-' + (today.getTime() + 1000), 'date-' + (today.getTime() + 1000),
]); ]);
@ -217,7 +217,7 @@ describe('makeFilterPostsAndAddSeparators', () => {
expect(now).toEqual([ expect(now).toEqual([
'1010', '1010',
'1005', '1005',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + (time + 1003),
'1000', '1000',
'date-' + (today.getTime() + 1000), 'date-' + (today.getTime() + 1000),
]); ]);
@ -225,7 +225,7 @@ describe('makeFilterPostsAndAddSeparators', () => {
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt: time + 1006, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt: time + 1006, indicateNewMessages: true});
expect(now).toEqual([ expect(now).toEqual([
'1010', '1010',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + (time + 1006),
'1005', '1005',
'1000', '1000',
'date-' + (today.getTime() + 1000), 'date-' + (today.getTime() + 1000),
@ -296,7 +296,7 @@ describe('makeFilterPostsAndAddSeparators', () => {
'1004', '1004',
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'1001', '1001',
'date-' + today.getTime(), 'date-' + today.getTime(),
]); ]);
@ -304,13 +304,13 @@ describe('makeFilterPostsAndAddSeparators', () => {
// No changes // No changes
let prev = now; let prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).toEqual(prev); expect(now).toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1006', '1006',
'1004', '1004',
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'1001', '1001',
'date-' + today.getTime(), 'date-' + today.getTime(),
]); ]);
@ -320,13 +320,13 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).toEqual(prev); expect(now).not.toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1006', '1006',
'1004', '1004',
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'1001', '1001',
'date-' + today.getTime(), 'date-' + today.getTime(),
]); ]);
@ -336,11 +336,11 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).not.toEqual(prev); expect(now).not.toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1006', '1006',
'1004', '1004',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
'1001', '1001',
@ -349,11 +349,11 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).toEqual(prev); expect(now).toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1006', '1006',
'1004', '1004',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
'1001', '1001',
@ -365,11 +365,11 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).toEqual(prev); expect(now).toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1006', '1006',
'1004', '1004',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
'1001', '1001',
@ -393,11 +393,11 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).toEqual(prev); expect(now).toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1006', '1006',
'1004', '1004',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
'1001', '1001',
@ -421,11 +421,11 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).toEqual(prev); expect(now).toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1006', '1006',
'1004', '1004',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
'1001', '1001',
@ -453,10 +453,10 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).not.toEqual(prev); expect(now).not.toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1004', '1004',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
'1001', '1001',
@ -465,10 +465,10 @@ describe('makeFilterPostsAndAddSeparators', () => {
prev = now; prev = now;
now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true}); now = filterPostsAndAddSeparators(state, {postIds, lastViewedAt, indicateNewMessages: true});
expect(now).toEqual(prev); expect(now).toBe(prev);
expect(now).toEqual([ expect(now).toEqual([
'1004', '1004',
START_OF_NEW_MESSAGES, START_OF_NEW_MESSAGES + lastViewedAt,
'date-' + tomorrow.getTime(), 'date-' + tomorrow.getTime(),
'1003', '1003',
'1001', '1001',
@ -908,7 +908,7 @@ describe('getFirstPostId', () => {
}); });
test('should skip the new message line', () => { 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', () => { 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', () => { 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);
}); });
}); });

16
webapp/channels/src/packages/mattermost-redux/src/utils/post_list.ts
View File

@ -20,7 +20,7 @@ import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
export const COMBINED_USER_ACTIVITY = 'user-activity-'; export const COMBINED_USER_ACTIVITY = 'user-activity-';
export const CREATE_COMMENT = 'create-comment'; export const CREATE_COMMENT = 'create-comment';
export const DATE_LINE = 'date-'; 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 const MAX_COMBINED_SYSTEM_POSTS = 100;
export function shouldShowJoinLeaveMessages(state: GlobalState) { export function shouldShowJoinLeaveMessages(state: GlobalState) {
@ -111,7 +111,7 @@ export function makeFilterPostsAndAddSeparators() {
!addedNewMessagesIndicator && !addedNewMessagesIndicator &&
indicateNewMessages indicateNewMessages
) { ) {
out.push(START_OF_NEW_MESSAGES); out.push(START_OF_NEW_MESSAGES + lastViewedAt);
addedNewMessagesIndicator = true; addedNewMessagesIndicator = true;
} }
@ -140,7 +140,7 @@ export function makeCombineUserActivityPosts() {
for (let i = 0; i < postIds.length; i++) { for (let i = 0; i < postIds.length; i++) {
const postId = postIds[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 // Not a post, so it won't be combined
out.push(postId); out.push(postId);
@ -187,7 +187,15 @@ export function makeCombineUserActivityPosts() {
} }
export function isStartOfNewMessages(item: string) { 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) { export function isCreateComment(item: string) {

6
webapp/channels/src/utils/post_utils.test.tsx
View File

@ -801,7 +801,7 @@ describe('PostUtils.getOldestPostId', () => {
}); });
test('Should not return START_OF_NEW_MESSAGES', () => { 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'); expect(postId).toEqual('postId2');
}); });
}); });
@ -813,7 +813,7 @@ describe('PostUtils.getPreviousPostId', () => {
}); });
test('Should skip START_OF_NEW_MESSAGES', () => { 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'); expect(postId).toEqual('postId3');
}); });
@ -845,7 +845,7 @@ describe('PostUtils.getLatestPostId', () => {
}); });
test('Should not return START_OF_NEW_MESSAGES', () => { 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'); expect(postId).toEqual('postId1');
}); });

6
webapp/channels/src/utils/post_utils.ts
View File

@ -626,12 +626,6 @@ export function splitMessageBasedOnTextSelection(selectionStart: number, selecti
return {firstPiece, lastPiece}; 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 { export function areConsecutivePostsBySameUser(post: Post, previousPost: Post): boolean {
if (!(post && previousPost)) { if (!(post && previousPost)) {
return false; return false;