From 1dae805ee15a0b0249fa3d561d497eecd95a0309 Mon Sep 17 00:00:00 2001
From: Arun_dadhwal <aarondadhwal@gmail.com>
Date: Tue, 5 Dec 2023 14:59:36 +0530
Subject: [PATCH] [MM-56006] Convert ./components/discard_changes_modal.tsx
 from Class Component to Function Component (#25620)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* MM-56006: Converted to React FC

* Update webapp/channels/src/components/discard_changes_modal.tsx

Co-authored-by: Daniel Espino García <larkox@gmail.com>

* lint changes

---------

Co-authored-by: Daniel Espino García <larkox@gmail.com>
---
 .../src/components/discard_changes_modal.tsx  | 76 ++++++++++---------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/webapp/channels/src/components/discard_changes_modal.tsx b/webapp/channels/src/components/discard_changes_modal.tsx
index 90034daaa7..050f450327 100644
--- a/webapp/channels/src/components/discard_changes_modal.tsx
+++ b/webapp/channels/src/components/discard_changes_modal.tsx
@@ -12,45 +12,47 @@ type Props = {
     onCancel: (checked: boolean) => void;
 }
 
-export default class DiscardChangesModal extends React.PureComponent<Props> {
-    public render(): JSX.Element {
-        const title: JSX.Element = (
-            <FormattedMessage
-                id='discard_changes_modal.title'
-                defaultMessage='Discard Changes?'
-            />
-        );
+const DiscardChangesModal = ({
+    show,
+    onConfirm,
+    onCancel,
+}: Props) => {
+    const title = (
+        <FormattedMessage
+            id='discard_changes_modal.title'
+            defaultMessage='Discard Changes?'
+        />
+    );
 
-        const message: JSX.Element = (
-            <FormattedMessage
-                id='discard_changes_modal.message'
-                defaultMessage='You have unsaved changes, are you sure you want to discard them?'
-            />
-        );
+    const message = (
+        <FormattedMessage
+            id='discard_changes_modal.message'
+            defaultMessage='You have unsaved changes, are you sure you want to discard them?'
+        />
+    );
 
-        const buttonClass = 'btn btn-primary';
-        const button: JSX.Element = (
-            <FormattedMessage
-                id='discard_changes_modal.leave'
-                defaultMessage='Yes, Discard'
-            />
-        );
+    const buttonClass = 'btn btn-primary';
+    const button = (
+        <FormattedMessage
+            id='discard_changes_modal.leave'
+            defaultMessage='Yes, Discard'
+        />
+    );
 
-        const modalClass = 'discard-changes-modal';
+    const modalClass = 'discard-changes-modal';
 
-        const {show, onConfirm, onCancel} = this.props;
+    return (
+        <ConfirmModal
+            show={show}
+            title={title}
+            message={message}
+            modalClass={modalClass}
+            confirmButtonClass={buttonClass}
+            confirmButtonText={button}
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+        />
+    );
+};
 
-        return (
-            <ConfirmModal
-                show={show}
-                title={title}
-                message={message}
-                modalClass={modalClass}
-                confirmButtonClass={buttonClass}
-                confirmButtonText={button}
-                onConfirm={onConfirm}
-                onCancel={onCancel}
-            />
-        );
-    }
-}
+export default React.memo(DiscardChangesModal);