From b59280e7d7cda0b74157cf949cef525c7fe14fcf Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 15 Apr 2024 09:46:26 -0700 Subject: [PATCH] MM-57292 - Adding root post divider component (#26614) --- .../root_post_divider/root_post_divider.tsx | 43 +++++++++++++++++++ .../thread_viewer_row.tsx | 18 +------- .../virtualized_thread_viewer.tsx | 20 +-------- 3 files changed, 46 insertions(+), 35 deletions(-) create mode 100644 webapp/channels/src/components/root_post_divider/root_post_divider.tsx diff --git a/webapp/channels/src/components/root_post_divider/root_post_divider.tsx b/webapp/channels/src/components/root_post_divider/root_post_divider.tsx new file mode 100644 index 0000000000..0be3a020b3 --- /dev/null +++ b/webapp/channels/src/components/root_post_divider/root_post_divider.tsx @@ -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 = ({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 ( +
+
+ +
+
+ ); +}; + +export default RootPostDivider; 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 6916b80050..527629a745 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 @@ -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 && ( -
-
- -
-
- )} + ); case PostListUtils.isCombinedUserActivityPost(listId): { 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 d4bfdaf12e..3d91d10757 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 @@ -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 { 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 { isRootPost={isRootPost} isLastPost={isLastPost} listId={itemId} - replyCount={totalReplies} onCardClick={this.props.onCardClick} previousPostId={getPreviousPostId(data, index)} timestampProps={this.props.useRelativeTimestamp ? THREADING_TIME : undefined}