[MM-56004] Convert ./components/post_view/new_message_separator/new_message_separator.tsx from Class Component to Function Component (#25647)

* [MM-56004] Convert `./components/post_view/new_message_separator/new_message_separator.tsx` from Class Component to Function Component

* refactor: update snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/post_view/new_message_separator/new_message_separator.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import NotificationSeparator from 'components/widgets/separator/notification-separator';
@@ -17,38 +17,45 @@ type Props = {
     threadId?: string;
 }
 
-export default class NewMessageSeparator extends React.PureComponent<Props> {
+const NewMessageSeparator = ({
-    render(): JSX.Element {
+    newMessagesSeparatorActions,
-        const pluginItems = this.props.newMessagesSeparatorActions?.
+    lastViewedAt,
-            map((item) => {
+    channelId,
-                if (!item.component) {
+    threadId,
-                    return null;
+    wrapperRef,
-                }
+    separatorId,
+}: Props) => {
+    const pluginItems = newMessagesSeparatorActions?.
+        map((item) => {
+            if (!item.component) {
+                return null;
+            }
 
-                const Component = item.component as any;
+            const Component = item.component as any;
-                return (
+            return (
-                    <Component
+                <Component
-                        key={item.id}
+                    key={item.id}
-                        lastViewedAt={this.props.lastViewedAt}
+                    lastViewedAt={lastViewedAt}
-                        channelId={this.props.channelId}
+                    channelId={channelId}
-                        threadId={this.props.threadId}
+                    threadId={threadId}
-                    />
+                />
-                );
+            );
-            });
+        });
 
-        return (
+    return (
-            <div
+        <div
-                ref={this.props.wrapperRef}
+            ref={wrapperRef}
-                className='new-separator'
+            className='new-separator'
-            >
+        >
-                <NotificationSeparator id={this.props.separatorId}>
+            <NotificationSeparator id={separatorId}>
-                    <FormattedMessage
+                <FormattedMessage
-                        id='posts_view.newMsg'
+                    id='posts_view.newMsg'
-                        defaultMessage='New Messages'
+                    defaultMessage='New Messages'
-                    />
+                />
-                    {pluginItems}
+                {pluginItems}
-                </NotificationSeparator>
+            </NotificationSeparator>
-            </div>
+        </div>
-        );
+    );
-    }
+};
-}
+
+export default memo(NewMessageSeparator);

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

@@ -93,7 +93,7 @@ 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`] = `
-<NewMessageSeparator
+<Memo(NewMessageSeparator)
   channelId="channel_id_1"
   lastViewedAt={0}
   newMessagesSeparatorActions={Array []}