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-57292 - Adding root post divider component (#26614)

Browse Source
This commit is contained in:
Asaad Mahmood 2024-04-15 09:46:26 -07:00 committed by GitHub
parent 2825ab689c
commit b59280e7d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
webapp/channels/src/components/root_post_divider/root_post_divider.tsx Normal file
View File

@ -0,0 +1,43 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useMemo} from 'react';
import {FormattedMessage} from 'react-intl';
import {useSelector} from 'react-redux';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {makeGetThreadOrSynthetic} from 'mattermost-redux/selectors/entities/threads';
import type {GlobalState} from 'types/store';
type Props = {
postId: string;
};
const RootPostDivider: React.FC<Props> = ({postId}) => {
const post = useSelector((state: GlobalState) => getPost(state, postId));
const getThreadOrSynthetic = useMemo(makeGetThreadOrSynthetic, []);
const totalReplies = useSelector((state: GlobalState) => {
const thread = getThreadOrSynthetic(state, post);
return thread.reply_count || 0;
});
if (totalReplies === 0) {
return null; // Return null if there are no replies
}
return (
<div className='root-post__divider'>
<div>
<FormattedMessage
id='threading.numReplies'
defaultMessage='{totalReplies, plural, =0 {Reply} =1 {# reply} other {# replies}}'
values={{totalReplies}}
/>
</div>
</div>
);
};
export default RootPostDivider;

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

@ -2,7 +2,6 @@
// See LICENSE.txt for license information.
import React, {memo} from 'react';
import {FormattedMessage} from 'react-intl';
import type {Post} from '@mattermost/types/posts';
@ -12,6 +11,7 @@ import PostComponent from 'components/post';
import CombinedUserActivityPost from 'components/post_view/combined_user_activity_post';
import DateSeparator from 'components/post_view/date_separator';
import NewMessageSeparator from 'components/post_view/new_message_separator/new_message_separator';
import RootPostDivider from 'components/root_post_divider/root_post_divider';
import type {Props as TimestampProps} from 'components/timestamp/timestamp';
import {Locations} from 'utils/constants';
@ -23,7 +23,6 @@ import Reply from './reply';
type Props = {
a11yIndex: number;
currentUserId: string;
replyCount: number;
isRootPost: boolean;
isLastPost: boolean;
listId: string;
@ -41,7 +40,6 @@ function ThreadViewerRow({
isRootPost,
isLastPost,
listId,
replyCount,
onCardClick,
previousPostId,
timestampProps,
@ -78,19 +76,7 @@ function ThreadViewerRow({
timestampProps={timestampProps}
location={Locations.RHS_ROOT}
/>
{replyCount > 0 && (
<div className='root-post__divider'>
<div>
<FormattedMessage
id='threading.numReplies'
defaultMessage='{totalReplies, plural, =0 {Reply} =1 {# reply} other {# replies}}'
values={{
totalReplies: replyCount,
}}
/>
</div>
</div>
)}
<RootPostDivider postId={listId}/>
</>
);
case PostListUtils.isCombinedUserActivityPost(listId): {

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

@ -3,17 +3,14 @@
import {DynamicSizeList} from 'dynamic-virtualized-list';
import type {OnScrollArgs, OnItemsRenderedArgs} from 'dynamic-virtualized-list';
import React, {PureComponent, useMemo} from 'react';
import React, {PureComponent} from 'react';
import type {RefObject} from 'react';
import {useSelector} from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
import type {Channel} from '@mattermost/types/channels';
import type {Post} from '@mattermost/types/posts';
import type {UserProfile} from '@mattermost/types/users';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {makeGetThreadOrSynthetic} from 'mattermost-redux/selectors/entities/threads';
import {getNewMessagesIndex, isDateLine, isStartOfNewMessages, isCreateComment} from 'mattermost-redux/utils/post_list';
import NewRepliesBanner from 'components/new_replies_banner';
@ -25,7 +22,6 @@ import DelayedAction from 'utils/delayed_action';
import {getPreviousPostId, getLatestPostId} from 'utils/post_utils';
import * as Utils from 'utils/utils';
import type {GlobalState} from 'types/store';
import type {PluginComponent} from 'types/store/plugins';
import type {FakePost} from 'types/store/rhs';
@ -353,19 +349,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
const isLastPost = itemId === this.props.lastPost.id;
const isRootPost = itemId === this.props.selected.id;
/* eslint-disable react-hooks/rules-of-hooks */
// Temporarily allow these while MM-56831 is fixed
const post = useSelector((state: GlobalState) => getPost(state, this.props.selected.id));
const getThreadOrSynthetic = useMemo(makeGetThreadOrSynthetic, []);
const totalReplies = useSelector((state: GlobalState) => {
const thread = getThreadOrSynthetic(state, post);
return thread.reply_count || 0;
});
/* eslint-enable react-hooks/rules-of-hooks */
if (!isDateLine(itemId) && !isStartOfNewMessages(itemId) && !isCreateComment(itemId) && !isRootPost) {
a11yIndex++;
}
@ -395,7 +378,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
isRootPost={isRootPost}
isLastPost={isLastPost}
listId={itemId}
replyCount={totalReplies}
onCardClick={this.props.onCardClick}
previousPostId={getPreviousPostId(data, index)}
timestampProps={this.props.useRelativeTimestamp ? THREADING_TIME : undefined}