[MM-56006] Convert ./components/discard_changes_modal.tsx from Class Component to Function Component (#25620)

* 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>

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> {
+const DiscardChangesModal = ({
-    public render(): JSX.Element {
+    show,
-        const title: JSX.Element = (
+    onConfirm,
-            <FormattedMessage
+    onCancel,
-                id='discard_changes_modal.title'
+}: Props) => {
-                defaultMessage='Discard Changes?'
+    const title = (
-            />
+        <FormattedMessage
-        );
+            id='discard_changes_modal.title'
+            defaultMessage='Discard Changes?'
+        />
+    );
 
-        const message: JSX.Element = (
+    const message = (
-            <FormattedMessage
+        <FormattedMessage
-                id='discard_changes_modal.message'
+            id='discard_changes_modal.message'
-                defaultMessage='You have unsaved changes, are you sure you want to discard them?'
+            defaultMessage='You have unsaved changes, are you sure you want to discard them?'
-            />
+        />
-        );
+    );
 
-        const buttonClass = 'btn btn-primary';
+    const buttonClass = 'btn btn-primary';
-        const button: JSX.Element = (
+    const button = (
-            <FormattedMessage
+        <FormattedMessage
-                id='discard_changes_modal.leave'
+            id='discard_changes_modal.leave'
-                defaultMessage='Yes, Discard'
+            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 (
+export default React.memo(DiscardChangesModal);
-            <ConfirmModal
-                show={show}
-                title={title}
-                message={message}
-                modalClass={modalClass}
-                confirmButtonClass={buttonClass}
-                confirmButtonText={button}
-                onConfirm={onConfirm}
-                onCancel={onCancel}
-            />
-        );
-    }
-}