From cac50f593b021e025eb7fdd294c3d8c82c421442 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Thu, 21 Dec 2023 15:13:08 +0500
Subject: [PATCH] [MM-56298] Convert
 `./components/file_attachment/file_thumbnail/file_thumbnail.tsx` from Class
 Component to Function Component (#25761)

* [MM-56298] Convert `./components/file_attachment/file_thumbnail/file_thumbnail.tsx` from Class Component to Function Component

* refactor: implement code review changes
---
 .../file_attachment.test.tsx.snap             |  8 +-
 .../file_thumbnail/file_thumbnail.tsx         | 77 +++++++++----------
 .../file_search_result_item.test.tsx.snap     |  8 +-
 3 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap b/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
index abe7d82192..39301daad6 100644
--- a/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
+++ b/webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`FileAttachment should match snapshot, after change from file to image 1
     href="#"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,
@@ -99,7 +99,7 @@ exports[`FileAttachment should match snapshot, regular file 1`] = `
     href="#"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,
@@ -332,7 +332,7 @@ exports[`FileAttachment should match snapshot, svg image 1`] = `
     href="#"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,
@@ -532,7 +532,7 @@ exports[`FileAttachment should match snapshot, without compact display and witho
     href="#"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,
diff --git a/webapp/channels/src/components/file_attachment/file_thumbnail/file_thumbnail.tsx b/webapp/channels/src/components/file_attachment/file_thumbnail/file_thumbnail.tsx
index 961c6fe672..98c361a9e9 100644
--- a/webapp/channels/src/components/file_attachment/file_thumbnail/file_thumbnail.tsx
+++ b/webapp/channels/src/components/file_attachment/file_thumbnail/file_thumbnail.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 type {FileInfo} from '@mattermost/types/files';
 
@@ -19,47 +19,46 @@ type Props = {
     fileInfo: FileInfo;
 }
 
-export default class FileThumbnail extends React.PureComponent<Props> {
-    render() {
-        const {fileInfo} = this.props;
-        const type = getFileType(fileInfo.extension);
+const FileThumbnail = ({
+    fileInfo,
+    enableSVGs,
+}: Props) => {
+    const type = getFileType(fileInfo.extension);
 
-        let thumbnail;
-        if (type === FileTypes.IMAGE) {
-            let className = 'post-image';
+    if (type === FileTypes.IMAGE) {
+        let className = 'post-image';
 
-            if (fileInfo.width < Constants.THUMBNAIL_WIDTH && fileInfo.height < Constants.THUMBNAIL_HEIGHT) {
-                className += ' small';
-            } else {
-                className += ' normal';
-            }
-
-            let thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
-            if (isGIFImage(fileInfo.extension) && !fileInfo.has_preview_image) {
-                thumbnailUrl = getFileUrl(fileInfo.id);
-            }
-
-            return (
-                <div
-                    className={className}
-                    style={{
-                        backgroundImage: `url(${thumbnailUrl})`,
-                        backgroundSize: 'cover',
-                    }}
-                />
-            );
-        } else if (fileInfo.extension === FileTypes.SVG && this.props.enableSVGs) {
-            thumbnail = (
-                <img
-                    alt={'file thumbnail image'}
-                    className='post-image normal'
-                    src={getFileUrl(fileInfo.id)}
-                />
-            );
+        if (fileInfo.width < Constants.THUMBNAIL_WIDTH && fileInfo.height < Constants.THUMBNAIL_HEIGHT) {
+            className += ' small';
         } else {
-            thumbnail = <div className={'file-icon ' + getIconClassName(type)}/>;
+            className += ' normal';
         }
 
-        return thumbnail;
+        let thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
+        if (isGIFImage(fileInfo.extension) && !fileInfo.has_preview_image) {
+            thumbnailUrl = getFileUrl(fileInfo.id);
+        }
+
+        return (
+            <div
+                className={className}
+                style={{
+                    backgroundImage: `url(${thumbnailUrl})`,
+                    backgroundSize: 'cover',
+                }}
+            />
+        );
+    } else if (fileInfo.extension === FileTypes.SVG && enableSVGs) {
+        return (
+            <img
+                alt={'file thumbnail image'}
+                className='post-image normal'
+                src={getFileUrl(fileInfo.id)}
+            />
+        );
     }
-}
+
+    return <div className={'file-icon ' + getIconClassName(type)}/>;
+};
+
+export default memo(FileThumbnail);
diff --git a/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap b/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap
index 9691b688d4..de5ba91462 100644
--- a/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap
+++ b/webapp/channels/src/components/file_search_results/__snapshots__/file_search_result_item.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
     className="FileSearchResultItem"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,
@@ -167,7 +167,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
     className="FileSearchResultItem"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,
@@ -334,7 +334,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
     className="FileSearchResultItem"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,
@@ -501,7 +501,7 @@ exports[`components/file_search_result/FileSearchResultItem should match snapsho
     className="FileSearchResultItem"
     onClick={[Function]}
   >
-    <Connect(FileThumbnail)
+    <Connect(Component)
       fileInfo={
         Object {
           "archived": false,