From 2cb664c604587359e5f75049c72e8ef08263bac2 Mon Sep 17 00:00:00 2001
From: Dipak Sinha <47472075+dipaksinha1@users.noreply.github.com>
Date: Thu, 14 Mar 2024 05:52:09 -0400
Subject: [PATCH] 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>
---
 .../__snapshots__/pdf_preview.test.tsx.snap   |   2 +-
 .../audio_video_preview.test.tsx.snap         |   2 +-
 .../file_info_preview/file_info_preview.tsx   | 111 ++++++++++--------
 .../file_preview_modal.test.tsx.snap          |   2 +-
 4 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/pdf_preview.test.tsx.snap b/webapp/channels/src/components/__snapshots__/pdf_preview.test.tsx.snap
index e0111b47bb..3ce5fe6b95 100644
--- a/webapp/channels/src/components/__snapshots__/pdf_preview.test.tsx.snap
+++ b/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,
diff --git a/webapp/channels/src/components/audio_video_preview/__snapshots__/audio_video_preview.test.tsx.snap b/webapp/channels/src/components/audio_video_preview/__snapshots__/audio_video_preview.test.tsx.snap
index af059a0d7d..52ecc99fb5 100644
--- a/webapp/channels/src/components/audio_video_preview/__snapshots__/audio_video_preview.test.tsx.snap
+++ b/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,
diff --git a/webapp/channels/src/components/file_info_preview/file_info_preview.tsx b/webapp/channels/src/components/file_info_preview/file_info_preview.tsx
index 4c8d46edfd..1f456bd1f3 100644
--- a/webapp/channels/src/components/file_info_preview/file_info_preview.tsx
+++ b/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> {
-    render() {
-        const fileInfo = this.props.fileInfo;
-        const fileUrl = this.props.fileUrl;
+const FileInfoPreview = ({
+    fileInfo,
+    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
-        const infoParts = [];
-
-        if (fileInfo.extension !== '') {
-            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.extension !== '') {
+        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 (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);
diff --git a/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
index bca88467ed..854f2485dd 100644
--- a/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
+++ b/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,