MM-57292 - Adding root post divider component (#26614)

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<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;

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 && (
+                <RootPostDivider postId={listId}/>
-                    <div className='root-post__divider'>
-                        <div>
-                            <FormattedMessage
-                                id='threading.numReplies'
-                                defaultMessage='{totalReplies, plural, =0 {Reply} =1 {# reply} other {# replies}}'
-                                values={{
-                                    totalReplies: replyCount,
-                                }}
-                            />
-                        </div>
-                    </div>
-                )}
             </>
         );
     case PostListUtils.isCombinedUserActivityPost(listId): {

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<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}