From ddefb1f9c5d90bd8f24ea47667abec14317295e1 Mon Sep 17 00:00:00 2001
From: Jamin <okpusjamin@gmail.com>
Date: Mon, 4 Dec 2023 09:25:35 +0000
Subject: [PATCH] [MM-54791]: Convert email icon component to function
 component (#25548)

* refactor: convert email icon to rfc

* chore: update snapshot
---
 .../system_user_detail.test.tsx.snap          | 12 +++---
 .../components/widgets/icons/email_icon.tsx   | 38 ++++++++++---------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
index 43e42f23d8..08c4b5ab8a 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`components/admin_console/system_user_detail should match default snapsh
               Email
             </span>
             <div>
-              <EmailIcon
+              <Memo(EmailIcon)
                 className="SystemUserDetail__field-icon"
               />
               <input
@@ -272,7 +272,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if LD
               Email
             </span>
             <div>
-              <EmailIcon
+              <Memo(EmailIcon)
                 className="SystemUserDetail__field-icon"
               />
               <input
@@ -510,7 +510,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if MF
               Email
             </span>
             <div>
-              <EmailIcon
+              <Memo(EmailIcon)
                 className="SystemUserDetail__field-icon"
               />
               <input
@@ -754,7 +754,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if SA
               Email
             </span>
             <div>
-              <EmailIcon
+              <Memo(EmailIcon)
                 className="SystemUserDetail__field-icon"
               />
               <input
@@ -992,7 +992,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if no
               Email
             </span>
             <div>
-              <EmailIcon
+              <Memo(EmailIcon)
                 className="SystemUserDetail__field-icon"
               />
               <input
@@ -1228,7 +1228,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if us
               Email
             </span>
             <div>
-              <EmailIcon
+              <Memo(EmailIcon)
                 className="SystemUserDetail__field-icon"
               />
               <input
diff --git a/webapp/channels/src/components/widgets/icons/email_icon.tsx b/webapp/channels/src/components/widgets/icons/email_icon.tsx
index bfb0a84b2e..91f0c32f17 100644
--- a/webapp/channels/src/components/widgets/icons/email_icon.tsx
+++ b/webapp/channels/src/components/widgets/icons/email_icon.tsx
@@ -3,21 +3,23 @@
 
 import React from 'react';
 
-export default class EmailIcon extends React.PureComponent<React.HTMLAttributes<HTMLSpanElement>> {
-    render() {
-        return (
-            <span {...this.props}>
-                <svg
-                    width='100%'
-                    height='100%'
-                    viewBox='0 0 24 24'
-                >
-                    <path
-                        fill='inherit'
-                        d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'
-                    />
-                </svg>
-            </span>
-        );
-    }
-}
+type Props = React.HTMLAttributes<HTMLSpanElement>;
+
+const EmailIcon: React.FC<Props> = (props) => {
+    return (
+        <span {...props}>
+            <svg
+                width='100%'
+                height='100%'
+                viewBox='0 0 24 24'
+            >
+                <path
+                    fill='inherit'
+                    d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'
+                />
+            </svg>
+        </span>
+    );
+};
+
+export default React.memo(EmailIcon);