[MM-60072] Convert ./components/emoji/emoji_list_item/emoji_list_item.tsx from Class Component to Function Component (#27904)

* refactor: converted emoji_list_item to functional component

* feat: added suggested changes

* refactor: minor change

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/emoji/emoji_list_item/emoji_list_item.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, {useCallback, useMemo} from 'react';
 
 import type {CustomEmoji} from '@mattermost/types/emojis';
 
@@ -22,72 +22,71 @@ export type Props = {
     actions: {
         deleteCustomEmoji: (emojiId: string) => void;
     };
-}
+};
 
-export default class EmojiListItem extends React.PureComponent<Props> {
+const DELETE_PERMISSION = [Permissions.DELETE_EMOJIS];
-    static defaultProps = {
+const DELETE_OTHER_PERMISSION = [Permissions.DELETE_OTHERS_EMOJIS];
-        emoji: {} as CustomEmoji,
-        currentUserId: '',
-        creatorDisplayName: '',
-    };
 
-    handleDelete = (): void => {
+const EmojiListItem = ({
-        if (!this.props.emoji) {
+    actions: {
+        deleteCustomEmoji,
+    },
+    onDelete,
+    emoji = {} as CustomEmoji,
+    creatorUsername,
+    currentUserId = '',
+    creatorDisplayName = '',
+}: Props) => {
+    const emoticonStyle = useMemo(() => {
+        return {backgroundImage: `url(${Client4.getCustomEmojiImageUrl(emoji.id)})`};
+    }, [emoji.id]);
+
+    const handleDelete = useCallback((): void => {
+        if (!emoji) {
             return;
         }
-
+        if (onDelete) {
-        if (this.props.onDelete) {
+            onDelete(emoji.id);
-            this.props.onDelete(this.props.emoji.id);
         }
+        deleteCustomEmoji(emoji.id);
+    }, [deleteCustomEmoji, emoji, onDelete]);
 
-        this.props.actions.deleteCustomEmoji(this.props.emoji.id);
+    let displayName = creatorDisplayName;
-    };
+    if (creatorUsername && creatorUsername !== displayName) {
+        displayName += ' (@' + creatorUsername + ')';
+    }
 
-    render(): JSX.Element {
+    let deleteButton = <DeleteEmojiButton onDelete={handleDelete}/>;
-        const emoji = this.props.emoji as CustomEmoji;
-        const creatorUsername = this.props.creatorUsername;
-        let creatorDisplayName = this.props.creatorDisplayName;
 
-        if (creatorUsername && creatorUsername !== creatorDisplayName) {
+    if (emoji.creator_id === currentUserId) {
-            creatorDisplayName += ' (@' + creatorUsername + ')';
+        deleteButton = (
-        }
+            <AnyTeamPermissionGate permissions={DELETE_PERMISSION}>
-
+                {deleteButton}
-        let deleteButton = <DeleteEmojiButton onDelete={this.handleDelete}/>;
+            </AnyTeamPermissionGate>
-
+        );
-        if (emoji.creator_id === this.props.currentUserId) {
+    } else {
-            deleteButton = (
+        deleteButton = (
-                <AnyTeamPermissionGate permissions={[Permissions.DELETE_EMOJIS]}>
+            <AnyTeamPermissionGate permissions={DELETE_PERMISSION}>
+                <AnyTeamPermissionGate permissions={DELETE_OTHER_PERMISSION}>
                     {deleteButton}
                 </AnyTeamPermissionGate>
-            );
+            </AnyTeamPermissionGate>
-        } else {
-            deleteButton = (
-                <AnyTeamPermissionGate permissions={[Permissions.DELETE_EMOJIS]}>
-                    <AnyTeamPermissionGate permissions={[Permissions.DELETE_OTHERS_EMOJIS]}>
-                        {deleteButton}
-                    </AnyTeamPermissionGate>
-                </AnyTeamPermissionGate>
-            );
-        }
-
-        return (
-            <tr className='backstage-list__item'>
-                <td className='emoji-list__name'>
-                    {':' + emoji.name + ':'}
-                </td>
-                <td className='emoji-list__image'>
-                    <span
-                        className='emoticon'
-                        style={{backgroundImage: 'url(' + Client4.getCustomEmojiImageUrl(emoji.id) + ')'}}
-                    />
-                </td>
-                <td className='emoji-list__creator'>
-                    {creatorDisplayName}
-                </td>
-                <td className='emoji-list-item_actions'>
-                    {deleteButton}
-                </td>
-            </tr>
         );
     }
-}
+
+    return (
+        <tr className='backstage-list__item'>
+            <td className='emoji-list__name'>{':' + emoji.name + ':'}</td>
+            <td className='emoji-list__image'>
+                <span
+                    className='emoticon'
+                    style={emoticonStyle}
+                />
+            </td>
+            <td className='emoji-list__creator'>{displayName}</td>
+            <td className='emoji-list-item_actions'>{deleteButton}</td>
+        </tr>
+    );
+};
+
+export default React.memo(EmojiListItem);