From bca4535150ad113ef445112b2ea03f7ce968f8d9 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:46:32 +0500
Subject: [PATCH] [MM-57712] Convert `./components/post_deleted_modal.tsx` from
 Class Component to Function Component (#26731)

* [MM-57712] Convert `./components/post_deleted_modal.tsx` from Class Component to Function Component

* :art: Improve code quality

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../src/components/post_deleted_modal.tsx     | 116 ++++++++----------
 1 file changed, 53 insertions(+), 63 deletions(-)

diff --git a/webapp/channels/src/components/post_deleted_modal.tsx b/webapp/channels/src/components/post_deleted_modal.tsx
index 9edaa1f624..034e1551a1 100644
--- a/webapp/channels/src/components/post_deleted_modal.tsx
+++ b/webapp/channels/src/components/post_deleted_modal.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, {useState, memo, useCallback} from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
@@ -9,68 +9,58 @@ type Props = {
     onExited: () => void;
 }
 
-type State = {
-    show: boolean;
-}
+const PostDeletedModal = ({
+    onExited,
+}: Props) => {
+    const [show, setShow] = useState(true);
 
-export default class PostDeletedModal extends React.PureComponent<Props, State> {
-    constructor(props: Props) {
-        super(props);
+    const handleHide = useCallback(() => setShow(false), []);
 
-        this.state = {
-            show: true,
-        };
-    }
+    return (
+        <Modal
+            dialogClassName='a11y__modal'
+            show={show}
+            onHide={handleHide}
+            onExited={onExited}
+            role='dialog'
+            aria-labelledby='postDeletedModalLabel'
+            data-testid='postDeletedModal'
+        >
+            <Modal.Header closeButton={true}>
+                <Modal.Title
+                    componentClass='h1'
+                    id='postDeletedModalLabel'
+                >
+                    <FormattedMessage
+                        id='post_delete.notPosted'
+                        defaultMessage='Comment could not be posted'
+                    />
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <p>
+                    <FormattedMessage
+                        id='post_delete.someone'
+                        defaultMessage='Someone deleted the message on which you tried to post a comment.'
+                    />
+                </p>
+            </Modal.Body>
+            <Modal.Footer>
+                <button
+                    type='button'
+                    className='btn btn-primary'
+                    autoFocus={true}
+                    onClick={handleHide}
+                    data-testid='postDeletedModalOkButton'
+                >
+                    <FormattedMessage
+                        id='post_delete.okay'
+                        defaultMessage='Okay'
+                    />
+                </button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
 
-    private handleHide = () => {
-        this.setState({show: false});
-    };
-
-    public render(): JSX.Element {
-        return (
-            <Modal
-                dialogClassName='a11y__modal'
-                show={this.state.show}
-                onHide={this.handleHide}
-                onExited={this.props.onExited}
-                role='dialog'
-                aria-labelledby='postDeletedModalLabel'
-                data-testid='postDeletedModal'
-            >
-                <Modal.Header closeButton={true}>
-                    <Modal.Title
-                        componentClass='h1'
-                        id='postDeletedModalLabel'
-                    >
-                        <FormattedMessage
-                            id='post_delete.notPosted'
-                            defaultMessage='Comment could not be posted'
-                        />
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <p>
-                        <FormattedMessage
-                            id='post_delete.someone'
-                            defaultMessage='Someone deleted the message on which you tried to post a comment.'
-                        />
-                    </p>
-                </Modal.Body>
-                <Modal.Footer>
-                    <button
-                        type='button'
-                        className='btn btn-primary'
-                        autoFocus={true}
-                        onClick={this.handleHide}
-                        data-testid='postDeletedModalOkButton'
-                    >
-                        <FormattedMessage
-                            id='post_delete.okay'
-                            defaultMessage='Okay'
-                        />
-                    </button>
-                </Modal.Footer>
-            </Modal>
-        );
-    }
-}
+export default memo(PostDeletedModal);