[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>

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> {
+const PostEmoji = ({name, imageUrl}: Props) => {
-    public render() {
+    const emojiText = `:${name}:`;
-        const emojiText = ':' + this.props.name + ':';
+    const backgroundImageUrl = `url(${imageUrl})`;
 
-        if (!this.props.imageUrl) {
+    if (!imageUrl) {
-            return emojiText;
+        return <>{emojiText}</>;
-        }
-
-        return (
-            <span
-                alt={emojiText}
-                className='emoticon'
-                title={emojiText}
-                style={{backgroundImage: 'url(' + this.props.imageUrl + ')'}}
-            >
-                {emojiText}
-            </span>
-        );
     }
-}
+
+    return (
+        <span
+            alt={emojiText}
+            className='emoticon'
+            title={emojiText}
+            style={{backgroundImage: backgroundImageUrl}}
+        >
+            {emojiText}
+        </span>
+    );
+};
+
+export default React.memo(PostEmoji);