Convert ./components/file_info_preview/file_info_preview.tsx from Class Component to Function Component (#26368)

* Class to functional component

* Add react.memo

* Fix Lint Issues

* Format props declaration in FileInfoPreview component

* fix: Updated snapshots for failing tests

---------

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

webapp/channels/src/components/__snapshots__/pdf_preview.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`component/PDFPreview should match snapshot, loading 1`] = `
 `;
 
 exports[`component/PDFPreview should match snapshot, not successful 1`] = `
-<Connect(FileInfoPreview)
+<Connect(Component)
   fileInfo={
     Object {
       "archived": false,

webapp/channels/src/components/audio_video_preview/__snapshots__/audio_video_preview.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`AudioVideoPreview should match snapshot without children 1`] = `
 `;
 
 exports[`AudioVideoPreview should match snapshot, cannot play 1`] = `
-<Connect(FileInfoPreview)
+<Connect(Component)
   fileInfo={
     Object {
       "archived": false,

webapp/channels/src/components/file_info_preview/file_info_preview.tsx

@@ -13,58 +13,65 @@ type Props = {
     canDownloadFiles: boolean;
 };
 
-export default class FileInfoPreview extends React.PureComponent<Props> {
+const FileInfoPreview = ({
-    render() {
+    fileInfo,
-        const fileInfo = this.props.fileInfo;
+    fileUrl,
-        const fileUrl = this.props.fileUrl;
+    canDownloadFiles,
+}: Props) => {
+    // non-image files include a section providing details about the file
+    const infoParts = [];
 
-        // non-image files include a section providing details about the file
+    if (fileInfo.extension !== '') {
-        const infoParts = [];
+        infoParts.push(
-
+            Utils.localizeMessage('file_info_preview.type', 'File type ') +
-        if (fileInfo.extension !== '') {
+        fileInfo.extension.toUpperCase(),
-            infoParts.push(Utils.localizeMessage('file_info_preview.type', 'File type ') + fileInfo.extension.toUpperCase());
-        }
-
-        if (fileInfo.size) {
-            infoParts.push(Utils.localizeMessage('file_info_preview.size', 'Size ') + Utils.fileSizeToString(fileInfo.size));
-        }
-
-        const infoString = infoParts.join(', ');
-
-        let preview = null;
-        if (this.props.canDownloadFiles) {
-            preview = (
-                <a
-                    className='file-details__preview'
-                    href={fileUrl}
-                >
-                    <span className='file-details__preview-helper'/>
-                    <img
-                        alt={'file preview'}
-                        src={Utils.getFileIconPath(fileInfo)}
-                    />
-                </a>
-            );
-        } else {
-            preview = (
-                <span className='file-details__preview'>
-                    <span className='file-details__preview-helper'/>
-                    <img
-                        alt={'file preview'}
-                        src={Utils.getFileIconPath(fileInfo)}
-                    />
-                </span>
-            );
-        }
-
-        return (
-            <div className='file-details__container'>
-                {preview}
-                <div className='file-details'>
-                    <div className='file-details__name'>{fileInfo.name}</div>
-                    <div className='file-details__info'>{infoString}</div>
-                </div>
-            </div>
         );
     }
-}
+
+    if (fileInfo.size) {
+        infoParts.push(
+            Utils.localizeMessage('file_info_preview.size', 'Size ') +
+        Utils.fileSizeToString(fileInfo.size),
+        );
+    }
+
+    const infoString = infoParts.join(', ');
+
+    let preview = null;
+    if (canDownloadFiles) {
+        preview = (
+            <a
+                className='file-details__preview'
+                href={fileUrl}
+            >
+                <span className='file-details__preview-helper'/>
+                <img
+                    alt={'file preview'}
+                    src={Utils.getFileIconPath(fileInfo)}
+                />
+            </a>
+        );
+    } else {
+        preview = (
+            <span className='file-details__preview'>
+                <span className='file-details__preview-helper'/>
+                <img
+                    alt={'file preview'}
+                    src={Utils.getFileIconPath(fileInfo)}
+                />
+            </span>
+        );
+    }
+
+    return (
+        <div className='file-details__container'>
+            {preview}
+            <div className='file-details'>
+                <div className='file-details__name'>{fileInfo.name}</div>
+                <div className='file-details__info'>{infoString}</div>
+            </div>
+        </div>
+    );
+};
+
+export default React.memo(FileInfoPreview);

webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap

@@ -1765,7 +1765,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded with other fi
           className="file-preview-modal__content"
           onClick={[Function]}
         >
-          <Connect(FileInfoPreview)
+          <Connect(Component)
             fileInfo={
               Object {
                 "archived": false,