From 1fd09d0a0b5838866e18ef275f2a9bdab7d34c09 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Wed, 24 Apr 2024 23:43:25 +0500
Subject: [PATCH] [MM-57718] Convert
 `./components/post_view/message_attachments/action_button/action_button.tsx`
 from Class Component to Function Component (#26728)

* [MM-57718] Convert `./components/post_view/message_attachments/action_button/action_button.tsx` from Class Component to Function Component

* :refactor: improve code structure
---
 .../action_button/action_button.tsx           | 106 ++++++++++--------
 .../message_attachment.test.tsx.snap          |   6 +-
 2 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.tsx b/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.tsx
index 477974a89d..83543a69dc 100644
--- a/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.tsx
+++ b/webapp/channels/src/components/post_view/message_attachments/action_button/action_button.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, {memo, useCallback} from 'react';
 import styled, {css} from 'styled-components';
 
 import type {PostAction, PostActionOption} from '@mattermost/types/integration_actions';
@@ -12,6 +12,22 @@ import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 import Markdown from 'components/markdown';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
+const getStatusColors = (theme: Theme) => {
+    return {
+        good: '#339970',
+        warning: '#CC8F00',
+        danger: theme.errorTextColor,
+        default: theme.centerChannelColor,
+        primary: theme.buttonBg,
+        success: '#339970',
+    } as Record<string, string>;
+};
+const markdownOptions = {
+    mentionHighlight: false,
+    markdown: false,
+    autolinkedUrlSchemes: [],
+};
+
 type Props = {
     action: PostAction;
     handleAction: (e: React.MouseEvent, options?: PostActionOption[]) => void;
@@ -21,57 +37,47 @@ type Props = {
     actionExecutingMessage?: string;
 }
 
-export default class ActionButton extends React.PureComponent<Props> {
-    getStatusColors(theme: Theme) {
-        return {
-            good: '#339970',
-            warning: '#CC8F00',
-            danger: theme.errorTextColor,
-            default: theme.centerChannelColor,
-            primary: theme.buttonBg,
-            success: '#339970',
-        } as Record<string, string>;
+const ActionButton = ({
+    action,
+    handleAction,
+    disabled,
+    theme,
+    actionExecuting,
+    actionExecutingMessage,
+}: Props) => {
+    const handleActionClick = useCallback((e) => handleAction(e, action.options), [action.options, handleAction]);
+    let hexColor: string | null | undefined;
+
+    if (action.style) {
+        const STATUS_COLORS = getStatusColors(theme);
+        hexColor =
+            STATUS_COLORS[action.style] ||
+            theme[action.style] ||
+            (action.style.match('^#(?:[0-9a-fA-F]{3}){1,2}$') && action.style);
     }
 
-    render() {
-        const {action, handleAction, disabled, theme} = this.props;
-        let hexColor: string | null | undefined;
-
-        if (action.style) {
-            const STATUS_COLORS = this.getStatusColors(theme);
-            hexColor =
-                STATUS_COLORS[action.style] ||
-                theme[action.style] ||
-                (action.style.match('^#(?:[0-9a-fA-F]{3}){1,2}$') && action.style);
-        }
-
-        return (
-            <ActionBtn
-                data-action-id={action.id}
-                data-action-cookie={action.cookie}
-                disabled={disabled}
-                key={action.id}
-                onClick={(e) => handleAction(e, this.props.action.options)}
-                className='btn btn-sm'
-                hexColor={hexColor}
+    return (
+        <ActionBtn
+            data-action-id={action.id}
+            data-action-cookie={action.cookie}
+            disabled={disabled}
+            key={action.id}
+            onClick={handleActionClick}
+            className='btn btn-sm'
+            hexColor={hexColor}
+        >
+            <LoadingWrapper
+                loading={actionExecuting}
+                text={actionExecutingMessage}
             >
-                <LoadingWrapper
-                    loading={this.props.actionExecuting}
-                    text={this.props.actionExecutingMessage}
-                >
-                    <Markdown
-                        message={action.name}
-                        options={{
-                            mentionHighlight: false,
-                            markdown: false,
-                            autolinkedUrlSchemes: [],
-                        }}
-                    />
-                </LoadingWrapper>
-            </ActionBtn>
-        );
-    }
-}
+                <Markdown
+                    message={action.name}
+                    options={markdownOptions}
+                />
+            </LoadingWrapper>
+        </ActionBtn>
+    );
+};
 
 type ActionBtnProps = {hexColor: string | null | undefined};
 const ActionBtn = styled.button<ActionBtnProps>`
@@ -86,3 +92,5 @@ const ActionBtn = styled.button<ActionBtnProps>`
         }
     `}
 `;
+
+export default memo(ActionButton);
diff --git a/webapp/channels/src/components/post_view/message_attachments/message_attachment/__snapshots__/message_attachment.test.tsx.snap b/webapp/channels/src/components/post_view/message_attachments/message_attachment/__snapshots__/message_attachment.test.tsx.snap
index 069f8ced2a..0097c46359 100644
--- a/webapp/channels/src/components/post_view/message_attachments/message_attachment/__snapshots__/message_attachment.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/message_attachments/message_attachment/__snapshots__/message_attachment.test.tsx.snap
@@ -104,7 +104,7 @@ exports[`components/post_view/MessageAttachment should call actions.doPostAction
           <div
             className="attachment-actions"
           >
-            <Connect(ActionButton)
+            <Connect(Component)
               action={
                 Object {
                   "cookie": "cookie-contents",
@@ -685,7 +685,7 @@ exports[`components/post_view/MessageAttachment should match value on renderPost
 <div
   className="attachment-actions"
 >
-  <Memo(Connect(ActionButton))
+  <Memo(Connect(Component))
     action={
       Object {
         "id": "action_id_1",
@@ -695,7 +695,7 @@ exports[`components/post_view/MessageAttachment should match value on renderPost
     actionExecuting={false}
     handleAction={[Function]}
   />
-  <Memo(Connect(ActionButton))
+  <Memo(Connect(Component))
     action={
       Object {
         "id": "action_id_2",