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,26 +13,32 @@ 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 = [];
 
     if (fileInfo.extension !== '') {
-            infoParts.push(Utils.localizeMessage('file_info_preview.type', 'File type ') + 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));
+        infoParts.push(
+            Utils.localizeMessage('file_info_preview.size', 'Size ') +
+        Utils.fileSizeToString(fileInfo.size),
+        );
     }
 
     const infoString = infoParts.join(', ');
 
     let preview = null;
-        if (this.props.canDownloadFiles) {
+    if (canDownloadFiles) {
         preview = (
             <a
                 className='file-details__preview'
@@ -66,5 +72,6 @@ export default class FileInfoPreview extends React.PureComponent<Props> {
             </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,