From f8f50ca882e7014baedfbcbbc4f6db9df34cba4d Mon Sep 17 00:00:00 2001
From: Atharva Joshi <atharvaj2160@gmail.com>
Date: Tue, 7 Nov 2023 15:21:53 +0530
Subject: [PATCH] [MM-54804] Convert ./components/post_emoji/post_emoji.tsx
 from Class Component to Function Component (#25080)

* ISSUE-#24767 | Convert post_emoji.tsx from Class Component to Function Component

* lint fix

* resolve changes

* lint fix

* lint fix

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../src/components/post_emoji/post_emoji.tsx  | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/webapp/channels/src/components/post_emoji/post_emoji.tsx b/webapp/channels/src/components/post_emoji/post_emoji.tsx
index 7cc74aad0a..e1c59be88d 100644
--- a/webapp/channels/src/components/post_emoji/post_emoji.tsx
+++ b/webapp/channels/src/components/post_emoji/post_emoji.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-interface PostEmojiProps {
+interface Props {
     name: string;
     imageUrl: string;
 }
@@ -13,23 +13,24 @@ declare module 'react' {
     }
 }
 
-export default class PostEmoji extends React.PureComponent<PostEmojiProps> {
-    public render() {
-        const emojiText = ':' + this.props.name + ':';
+const PostEmoji = ({name, imageUrl}: Props) => {
+    const emojiText = `:${name}:`;
+    const backgroundImageUrl = `url(${imageUrl})`;
 
-        if (!this.props.imageUrl) {
-            return emojiText;
-        }
-
-        return (
-            <span
-                alt={emojiText}
-                className='emoticon'
-                title={emojiText}
-                style={{backgroundImage: 'url(' + this.props.imageUrl + ')'}}
-            >
-                {emojiText}
-            </span>
-        );
+    if (!imageUrl) {
+        return <>{emojiText}</>;
     }
-}
+
+    return (
+        <span
+            alt={emojiText}
+            className='emoticon'
+            title={emojiText}
+            style={{backgroundImage: backgroundImageUrl}}
+        >
+            {emojiText}
+        </span>
+    );
+};
+
+export default React.memo(PostEmoji);