From 48117fb21f0c81f875d2758e9fc5ebd1ad20cb2a Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Tue, 27 Feb 2024 02:04:36 +0500
Subject: [PATCH] [MM-56850] Convert
 `./components/modal_controller/modal_controller.tsx` from Class Component to
 Function Component (#26259)

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

* fix: failing type check
---
 .../modal_controller/modal_controller.tsx     | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/webapp/channels/src/components/modal_controller/modal_controller.tsx b/webapp/channels/src/components/modal_controller/modal_controller.tsx
index 495e755830..442f11c4cd 100644
--- a/webapp/channels/src/components/modal_controller/modal_controller.tsx
+++ b/webapp/channels/src/components/modal_controller/modal_controller.tsx
@@ -32,39 +32,38 @@ type Props = {
     };
 }
 
-export default class ModalController extends React.PureComponent<Props> {
-    public render(): React.ReactNode {
-        const {modals, ...props} = this.props;
-        const {modalState} = modals;
+const ModalController = ({
+    modals,
+    actions,
+}: Props) => {
+    if (!modals) {
+        return null;
+    }
 
-        if (!modals) {
-            return null;
-        }
+    const {modalState} = modals;
+    const modalOutput = [];
 
-        const modalOutput = [];
+    for (const modalId in modalState) {
+        if (modalState.hasOwnProperty(modalId)) {
+            const modal = modalState[modalId];
+            if (modal.open) {
+                const modalComponent = React.createElement(modal.dialogType, Object.assign({}, modal.dialogProps, {
+                    onExited: () => {
+                        actions.closeModal(modalId);
 
-        for (const modalId in modalState) {
-            if (modalState.hasOwnProperty(modalId)) {
-                const modal = modalState[modalId];
-                if (modal.open) {
-                    const modalComponent = React.createElement(modal.dialogType, Object.assign({}, modal.dialogProps, {
-                        onExited: () => {
-                            props.actions.closeModal(modalId);
+                        // Call any onExited prop provided by whoever opened the modal, if one was provided
+                        modal.dialogProps?.onExited?.();
+                    },
+                    onHide: actions.closeModal.bind(this, modalId),
+                    key: `${modalId}_modal`,
+                }));
 
-                            // Call any onExited prop provided by whoever opened the modal, if one was provided
-                            modal.dialogProps?.onExited?.();
-                        },
-                        onHide: props.actions.closeModal.bind(this, modalId),
-                        key: `${modalId}_modal`,
-                    }));
-
-                    modalOutput.push(modalComponent);
-                }
+                modalOutput.push(modalComponent);
             }
         }
-
-        return (
-            modalOutput
-        );
     }
-}
+
+    return <>{modalOutput}</>;
+};
+
+export default ModalController;