fix(ui): rewrite MainModal with hooks

ui/src/Components/MainModal/index.js

@@ -1,8 +1,7 @@
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
-import { observable, action } from "mobx";
+import { observer, useLocalStore } from "mobx-react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
@@ -20,66 +19,53 @@ const MainModalContent = React.lazy(() =>
   }))
 );
 
-const MainModal = observer(
-  class MainModal extends Component {
-    static propTypes = {
-      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-      settingsStore: PropTypes.instanceOf(Settings).isRequired,
-    };
+const MainModal = observer(({ alertStore, settingsStore }) => {
+  const toggle = useLocalStore(() => ({
+    show: false,
+    toggle() {
+      this.show = !this.show;
+    },
+    hide() {
+      this.show = false;
+    },
+  }));
 
-    toggle = observable(
-      {
-        show: false,
-        toggle() {
-          this.show = !this.show;
-        },
-        hide() {
-          this.show = false;
-        },
-      },
-      { toggle: action.bound, hide: action.bound }
-    );
-
-    render() {
-      const { alertStore, settingsStore } = this.props;
-
-      return (
-        <React.Fragment>
-          <li
-            className={`nav-item components-navbar-button ${
-              this.toggle.show ? "border-info" : ""
-            }`}
-          >
-            <TooltipWrapper title="Settings">
-              <span
-                className="nav-link cursor-pointer"
-                onClick={this.toggle.toggle}
-              >
-                <FontAwesomeIcon icon={faCog} />
-              </span>
-            </TooltipWrapper>
-          </li>
-          <Modal isOpen={this.toggle.show} toggleOpen={this.toggle.toggle}>
-            <React.Suspense
-              fallback={
-                <h1 className="display-1 text-placeholder p-5 m-auto">
-                  <FontAwesomeIcon icon={faSpinner} size="lg" spin />
-                </h1>
-              }
-            >
-              <MainModalContent
-                alertStore={alertStore}
-                settingsStore={settingsStore}
-                onHide={this.toggle.hide}
-                isVisible={this.toggle.show}
-                expandAllOptions={false}
-              />
-            </React.Suspense>
-          </Modal>
-        </React.Fragment>
-      );
-    }
-  }
-);
+  return (
+    <React.Fragment>
+      <li
+        className={`nav-item components-navbar-button ${
+          toggle.show ? "border-info" : ""
+        }`}
+      >
+        <TooltipWrapper title="Settings">
+          <span className="nav-link cursor-pointer" onClick={toggle.toggle}>
+            <FontAwesomeIcon icon={faCog} />
+          </span>
+        </TooltipWrapper>
+      </li>
+      <Modal isOpen={toggle.show} toggleOpen={toggle.toggle}>
+        <React.Suspense
+          fallback={
+            <h1 className="display-1 text-placeholder p-5 m-auto">
+              <FontAwesomeIcon icon={faSpinner} size="lg" spin />
+            </h1>
+          }
+        >
+          <MainModalContent
+            alertStore={alertStore}
+            settingsStore={settingsStore}
+            onHide={toggle.hide}
+            isVisible={toggle.show}
+            expandAllOptions={false}
+          />
+        </React.Suspense>
+      </Modal>
+    </React.Fragment>
+  );
+});
+MainModal.propTypes = {
+  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+  settingsStore: PropTypes.instanceOf(Settings).isRequired,
+};
 
 export { MainModal };

ui/src/Components/MainModal/index.test.js

@@ -81,15 +81,14 @@ describe("<MainModal />", () => {
     expect(tree.find("MainModalContent")).toHaveLength(0);
   });
 
-  it("hides the modal when hide() is called", () => {
+  it("hides the modal when button.close is clicked", () => {
     const tree = MountedMainModal();
     const toggle = tree.find(".nav-link");
 
     toggle.simulate("click");
     expect(tree.find("MainModalContent")).toHaveLength(1);
 
-    const instance = tree.instance();
-    instance.toggle.hide();
+    tree.find("button.close").simulate("click");
     jest.runOnlyPendingTimers();
     tree.update();
     expect(tree.find("MainModalContent")).toHaveLength(0);