From 22611940051f91b22765632a91b78ba3d917104d Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:03:47 +0500
Subject: [PATCH] [MM-56849] Convert
 `./components/post_view/failed_post_options/failed_post_options.tsx` from
 Class Component to Function Component (#26234)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../failed_post_options.tsx                   | 79 ++++++++++---------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/webapp/channels/src/components/post_view/failed_post_options/failed_post_options.tsx b/webapp/channels/src/components/post_view/failed_post_options/failed_post_options.tsx
index 4bcc7828ec378..4cb569de9c26c 100644
--- a/webapp/channels/src/components/post_view/failed_post_options/failed_post_options.tsx
+++ b/webapp/channels/src/components/post_view/failed_post_options/failed_post_options.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 type {MouseEvent} from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -18,46 +18,49 @@ type Props = {
     };
 };
 
-export default class FailedPostOptions extends React.PureComponent<Props> {
-    retryPost = (e: MouseEvent): void => {
+const FailedPostOptions = ({
+    post,
+    actions,
+}: Props) => {
+    const retryPost = useCallback((e: MouseEvent): void => {
         e.preventDefault();
 
-        const post = {...this.props.post};
-        Reflect.deleteProperty(post, 'id');
-        this.props.actions.createPost(post, []);
-    };
+        const postDetails = {...post};
+        Reflect.deleteProperty(postDetails, 'id');
+        actions.createPost(postDetails, []);
+    }, [actions, post]);
 
-    cancelPost = (e: MouseEvent): void => {
+    const cancelPost = useCallback((e: MouseEvent): void => {
         e.preventDefault();
 
-        this.props.actions.removePost(this.props.post);
-    };
+        actions.removePost(post);
+    }, [actions, post]);
+
+    return (
+        <span className='pending-post-actions'>
+            <a
+                className='post-retry'
+                href='#'
+                onClick={retryPost}
+            >
+                <FormattedMessage
+                    id='pending_post_actions.retry'
+                    defaultMessage='Retry'
+                />
+            </a>
+            {' - '}
+            <a
+                className='post-cancel'
+                href='#'
+                onClick={cancelPost}
+            >
+                <FormattedMessage
+                    id='pending_post_actions.cancel'
+                    defaultMessage='Cancel'
+                />
+            </a>
+        </span>
+    );
+};
 
-    render(): JSX.Element {
-        return (
-            <span className='pending-post-actions'>
-                <a
-                    className='post-retry'
-                    href='#'
-                    onClick={this.retryPost}
-                >
-                    <FormattedMessage
-                        id='pending_post_actions.retry'
-                        defaultMessage='Retry'
-                    />
-                </a>
-                {' - '}
-                <a
-                    className='post-cancel'
-                    href='#'
-                    onClick={this.cancelPost}
-                >
-                    <FormattedMessage
-                        id='pending_post_actions.cancel'
-                        defaultMessage='Cancel'
-                    />
-                </a>
-            </span>
-        );
-    }
-}
+export default memo(FailedPostOptions);