From 9b227aaa28c74e0aa75dfb5ccae987790541b855 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Tue, 23 Apr 2024 09:58:54 +0500
Subject: [PATCH] [MM-57725] Convert `./components/common/chip/chip.tsx` from
 Class Component to Function Component (#26729)

* [MM-57725] Convert `./components/common/chip/chip.tsx` from Class Component to Function Component

* :refactor: improve code structure
---
 .../src/components/common/chip/chip.tsx       | 73 +++++++++++--------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/webapp/channels/src/components/common/chip/chip.tsx b/webapp/channels/src/components/common/chip/chip.tsx
index fe15fdf611..a0ba19c647 100644
--- a/webapp/channels/src/components/common/chip/chip.tsx
+++ b/webapp/channels/src/components/common/chip/chip.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} from 'react';
 import {FormattedMessage} from 'react-intl';
 import styled from 'styled-components';
 
@@ -52,34 +52,45 @@ const StyledChip = styled.button<{ otherOption?: boolean }>`
     }
 `;
 
-export default class Chip extends React.PureComponent<Props> {
-    onClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        this.props.onClick?.();
-    };
+const emojiStyles = {marginRight: '11px'};
 
-    render() {
-        return (
-            <StyledChip
-                onClick={this.onClick}
-                otherOption={this.props.otherOption}
-                className={this.props.className || ''}
-            >
-                {this.props.leadingIcon && (
-                    <RenderEmoji
-                        emojiName={this.props.leadingIcon}
-                        emojiStyle={{marginRight: '11px'}}
-                    />
-                )}
-                {(this.props.id && this.props.defaultMessage && this.props.values) && (
-                    <FormattedMessage
-                        id={this.props.id}
-                        defaultMessage={this.props.defaultMessage}
-                        values={this.props.values}
-                    />
-                )}
-                {this.props.additionalMarkup}
-            </StyledChip>
-        );
-    }
-}
+const Chip = ({
+    onClick,
+    otherOption,
+    className,
+    leadingIcon,
+    id,
+    defaultMessage,
+    values,
+    additionalMarkup,
+}: Props) => {
+    const handleClick = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        onClick?.();
+    }, [onClick]);
+
+    return (
+        <StyledChip
+            onClick={handleClick}
+            otherOption={otherOption}
+            className={className || ''}
+        >
+            {leadingIcon && (
+                <RenderEmoji
+                    emojiName={leadingIcon}
+                    emojiStyle={emojiStyles}
+                />
+            )}
+            {(id && defaultMessage && values) && (
+                <FormattedMessage
+                    id={id}
+                    defaultMessage={defaultMessage}
+                    values={values}
+                />
+            )}
+            {additionalMarkup}
+        </StyledChip>
+    );
+};
+
+export default Chip;