[MM-55326] Convert ./components/post_view/commented_on_files_message/commented_on_files_message.tsx from Class Component to Function Component (#25407)

* covert to func component

* update snap

* minor fix

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

@@ -93,7 +93,7 @@ exports[`components/post_view/CommentedOn should match snapshot 3`] = `
       className="theme"
       onClick={[MockFunction]}
     >
-      <Connect(CommentedOnFilesMessage)
+      <Connect(Component)
         parentPostId="post_id"
       />
     </a>

webapp/channels/src/components/post_view/commented_on/commented_on.test.tsx

@@ -4,44 +4,33 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
-import type {Post} from '@mattermost/types/posts';
-
 import CommentedOn from 'components/post_view/commented_on/commented_on';
 import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message';
 
+import {TestHelper} from 'utils/test_helper';
+
 describe('components/post_view/CommentedOn', () => {
     const baseProps = {
         displayName: 'user_displayName',
         enablePostUsernameOverride: false,
         onCommentClick: jest.fn(),
-        post: {
+        post: TestHelper.getPostMock({
             id: 'post_id',
             message: 'text message',
             props: {
                 from_webhook: 'true',
                 override_username: 'override_username',
             },
-            create_at: 0,
             update_at: 10,
             edit_at: 20,
             delete_at: 30,
-            is_pinned: false,
-            user_id: 'user_id',
             channel_id: 'channel_id',
             root_id: 'root_id',
             original_id: 'original_id',
-            type: 'system_add_remove',
             hashtags: 'hashtags',
             pending_post_id: 'pending_post_id',
             reply_count: 1,
-            metadata: {
-                embeds: [],
-                emojis: [],
-                files: [],
-                images: {},
-                reactions: [],
-            },
-        } as Post,
+        }),
     };
 
     test('should match snapshot', () => {

webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.test.tsx

@@ -4,17 +4,14 @@
 import React from 'react';
 
 import {render, renderWithContext, screen} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
 
 import CommentedOnFilesMessage from './commented_on_files_message';
 
 describe('components/CommentedOnFilesMessage', () => {
-    const baseProps = {
-        parentPostId: 'parentPostId',
-    };
-
     test('component state when no files', () => {
         render(
-            <CommentedOnFilesMessage {...baseProps}/>,
+            <CommentedOnFilesMessage/>,
         );
 
         //no file is given in props
@@ -22,31 +19,25 @@ describe('components/CommentedOnFilesMessage', () => {
     });
 
     test('should match component state for single file', () => {
-        const props = {
-            ...baseProps,
-            fileInfos: [{id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1}],
-        };
+        const fileInfos = [
+            TestHelper.getFileInfoMock({id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1}),
+        ];
 
         render(
-            <CommentedOnFilesMessage {...props}/>,
+            <CommentedOnFilesMessage fileInfos={fileInfos}/>,
         );
         expect(screen.getByTestId('fileInfo')).toHaveTextContent('image_1.png');
     });
 
     test('should match component state for multiple files', () => {
         const fileInfos = [
-            {id: 'file_id_3', name: 'image_3.png', extension: 'png', create_at: 3},
-            {id: 'file_id_2', name: 'image_2.png', extension: 'png', create_at: 2},
-            {id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1},
+            TestHelper.getFileInfoMock({id: 'file_id_3', name: 'image_3.png', extension: 'png', create_at: 3}),
+            TestHelper.getFileInfoMock({id: 'file_id_2', name: 'image_2.png', extension: 'png', create_at: 2}),
+            TestHelper.getFileInfoMock({id: 'file_id_1', name: 'image_1.png', extension: 'png', create_at: 1}),
         ];
 
-        const props = {
-            ...baseProps,
-            fileInfos,
-        };
-
         renderWithContext(
-            <CommentedOnFilesMessage {...props}/>,
+            <CommentedOnFilesMessage fileInfos={fileInfos}/>,
         );
 
         // total files = 3

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

@@ -4,43 +4,42 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-interface Props {
+import type {FileInfo} from '@mattermost/types/files';
 
-    /*
-     * The id of the post that was commented on
-     */
-    parentPostId: string;
+interface Props {
 
     /*
      * An array of file metadata for the parent post
      */
-    fileInfos?: Array<{name: string}>;
+    fileInfos?: FileInfo[];
 }
 
-export default class CommentedOnFilesMessage extends React.PureComponent<Props> {
-    render() {
-        if (!this.props.fileInfos || this.props.fileInfos.length === 0) {
-            return null;
-        }
+const CommentedOnFilesMessage = ({
+    fileInfos,
+}: Props) => {
+    if (!fileInfos?.length) {
+        return null;
+    }
 
-        let plusMore = null;
-        if (this.props.fileInfos.length > 1) {
-            plusMore = (
-                <FormattedMessage
-                    id='post_body.plusMore'
-                    defaultMessage=' plus {count, number} other {count, plural, one {file} other {files}}'
-                    values={{
-                        count: this.props.fileInfos.length - 1,
-                    }}
-                />
-            );
-        }
-
-        return (
-            <span data-testid='fileInfo'>
-                {this.props.fileInfos[0].name}
-                {plusMore}
-            </span>
+    let plusMore = null;
+    if (fileInfos.length > 1) {
+        plusMore = (
+            <FormattedMessage
+                id='post_body.plusMore'
+                defaultMessage=' plus {count, number} other {count, plural, one {file} other {files}}'
+                values={{
+                    count: fileInfos.length - 1,
+                }}
+            />
         );
     }
-}
+
+    return (
+        <span data-testid='fileInfo'>
+            {fileInfos[0].name}
+            {plusMore}
+        </span>
+    );
+};
+
+export default React.memo(CommentedOnFilesMessage);

webapp/channels/src/components/post_view/commented_on_files_message/index.ts

@@ -9,10 +9,18 @@ import {makeGetFilesForPost} from 'mattermost-redux/selectors/entities/files';
 
 import CommentedOnFilesMessage from './commented_on_files_message';
 
+type OwnProps = {
+
+    /*
+     * The id of the post that was commented on
+     */
+    parentPostId: string;
+}
+
 function makeMapStateToProps() {
     const selectFileInfosForPost = makeGetFilesForPost();
 
-    return function mapStateToProps(state: GlobalState, ownProps: {parentPostId: string}) {
+    return function mapStateToProps(state: GlobalState, ownProps: OwnProps) {
         let fileInfos;
         if (ownProps.parentPostId) {
             fileInfos = selectFileInfosForPost(state, ownProps.parentPostId);