From e644f4e4bbdd0ddd5d00bb843019a7ef5809dae8 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Thu, 14 Dec 2023 13:36:28 +0500
Subject: [PATCH] [MM-56009] Convert
 `./components/post_view/embedded_bindings/embedded_bindings.tsx` from Class
 Component to Function Component (#25717)

* [MM-56009] Convert `./components/post_view/embedded_bindings/embedded_bindings.tsx` from Class Component to Function Component

* refactor: use Map instead of forEach
---
 .../embedded_bindings/embedded_bindings.tsx   | 49 ++++++++-----------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/webapp/channels/src/components/post_view/embedded_bindings/embedded_bindings.tsx b/webapp/channels/src/components/post_view/embedded_bindings/embedded_bindings.tsx
index 671167a8a19..81892ea3ddb 100644
--- a/webapp/channels/src/components/post_view/embedded_bindings/embedded_bindings.tsx
+++ b/webapp/channels/src/components/post_view/embedded_bindings/embedded_bindings.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 {AppBinding} from '@mattermost/types/apps';
 import type {Post} from '@mattermost/types/posts';
@@ -29,31 +29,24 @@ type Props = {
 
 }
 
-export default class EmbeddedBindings extends React.PureComponent<Props> {
-    static defaultProps = {
-        imagesMetadata: {},
-    };
+const EmbeddedBindings = ({
+    embeds,
+    post,
+    options,
+}: Props) => (
+    <div
+        id={`messageAttachmentList_${post.id}`}
+        className='attachment__list'
+    >
+        {embeds.map((embed, i) => (
+            <EmbeddedBinding
+                embed={embed}
+                post={post}
+                key={'att_' + i}
+                options={options}
+            />
+        ))}
+    </div>
+);
 
-    render() {
-        const content = [] as JSX.Element[];
-        this.props.embeds.forEach((embed, i) => {
-            content.push(
-                <EmbeddedBinding
-                    embed={embed}
-                    post={this.props.post}
-                    key={'att_' + i}
-                    options={this.props.options}
-                />,
-            );
-        });
-
-        return (
-            <div
-                id={`messageAttachmentList_${this.props.post.id}`}
-                className='attachment__list'
-            >
-                {content}
-            </div>
-        );
-    }
-}
+export default memo(EmbeddedBindings);