From 4fb3d7a34992519868cbc6ca0f1a31d908978064 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:12:11 +0500
Subject: [PATCH] [MM-56295] Convert
 `./components/post_view/message_attachments/message_attachment_list.tsx` from
 Class Component to Function Component (#25767)

* [MM-56295] Convert `./components/post_view/message_attachments/message_attachment_list.tsx` from Class Component to Function Component

* refactor: update default prop

* refactor: update snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../message_attachment_list.tsx               | 52 +++++++++----------
 ...post_body_additional_content.test.tsx.snap |  3 +-
 2 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/webapp/channels/src/components/post_view/message_attachments/message_attachment_list.tsx b/webapp/channels/src/components/post_view/message_attachments/message_attachment_list.tsx
index d5d414949e..9d59641541 100644
--- a/webapp/channels/src/components/post_view/message_attachments/message_attachment_list.tsx
+++ b/webapp/channels/src/components/post_view/message_attachments/message_attachment_list.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 {MessageAttachment as MessageAttachmentType} from '@mattermost/types/message_attachments';
 import type {PostImage} from '@mattermost/types/posts';
@@ -33,32 +33,28 @@ type Props = {
     imagesMetadata?: Record<string, PostImage>;
 }
 
-export default class MessageAttachmentList extends React.PureComponent<Props> {
-    static defaultProps = {
-        imagesMetadata: {},
-    };
+const EMPTY_METADATA: Record<string, PostImage> = {};
 
-    render() {
-        const content = [] as JSX.Element[];
-        this.props.attachments.forEach((attachment, i) => {
-            content.push(
-                <MessageAttachment
-                    attachment={attachment}
-                    postId={this.props.postId}
-                    key={'att_' + i}
-                    options={this.props.options}
-                    imagesMetadata={this.props.imagesMetadata}
-                />,
-            );
-        });
+const MessageAttachmentList = ({
+    imagesMetadata = EMPTY_METADATA,
+    attachments,
+    postId,
+    options,
+}: Props) => (
+    <div
+        id={`messageAttachmentList_${postId}`}
+        className='attachment__list'
+    >
+        {attachments.map((attachment, i) => (
+            <MessageAttachment
+                attachment={attachment}
+                postId={postId}
+                key={'att_' + i}
+                options={options}
+                imagesMetadata={imagesMetadata}
+            />
+        ))}
+    </div>
+);
 
-        return (
-            <div
-                id={`messageAttachmentList_${this.props.postId}`}
-                className='attachment__list'
-            >
-                {content}
-            </div>
-        );
-    }
-}
+export default memo(MessageAttachmentList);
diff --git a/webapp/channels/src/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.tsx.snap b/webapp/channels/src/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.tsx.snap
index 996ef936a8..63ed6ad116 100644
--- a/webapp/channels/src/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/post_body_additional_content/__snapshots__/post_body_additional_content.test.tsx.snap
@@ -60,9 +60,8 @@ exports[`PostBodyAdditionalContent with a message attachment should render corre
   <span>
     some children
   </span>
-  <MessageAttachmentList
+  <Memo(MessageAttachmentList)
     attachments={Array []}
-    imagesMetadata={Object {}}
     postId="post_id_1"
   />
 </div>