From 3c16e008f52ee2863575d13611649f4fae964152 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 25 Apr 2020 19:54:13 +0100
Subject: [PATCH] fix(ui): rewrite OverviewModal with hooks

---
 ui/src/Components/OverviewModal/index.js      | 107 ++++++++----------
 ui/src/Components/OverviewModal/index.test.js |   5 +-
 2 files changed, 48 insertions(+), 64 deletions(-)

diff --git a/ui/src/Components/OverviewModal/index.js b/ui/src/Components/OverviewModal/index.js
index 28a97b11a..d274d7526 100644
--- a/ui/src/Components/OverviewModal/index.js
+++ b/ui/src/Components/OverviewModal/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 Flash from "react-reveal/Flash";
 
@@ -20,65 +19,51 @@ const OverviewModalContent = React.lazy(() =>
   }))
 );
 
-const OverviewModal = observer(
-  class OverviewModal extends Component {
-    static propTypes = {
-      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-    };
+const OverviewModal = observer(({ alertStore }) => {
+  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 } = this.props;
-
-      return (
-        <React.Fragment>
-          <TooltipWrapper title="Show alert overview">
-            <Flash spy={alertStore.info.totalAlerts}>
-              <div
-                className={`text-center d-inline-block cursor-pointer navbar-brand m-0 components-navbar-button  ${
-                  this.toggle.show ? "border-info" : ""
-                }`}
-                onClick={this.toggle.toggle}
-              >
-                {alertStore.info.totalAlerts}
-              </div>
-            </Flash>
-          </TooltipWrapper>
-          <Modal
-            size="xl"
-            isOpen={this.toggle.show}
-            toggleOpen={this.toggle.toggle}
+  return (
+    <React.Fragment>
+      <TooltipWrapper title="Show alert overview">
+        <Flash spy={alertStore.info.totalAlerts}>
+          <div
+            className={`text-center d-inline-block cursor-pointer navbar-brand m-0 components-navbar-button  ${
+              toggle.show ? "border-info" : ""
+            }`}
+            onClick={toggle.toggle}
           >
-            <React.Suspense
-              fallback={
-                <h1 className="display-1 text-placeholder p-5 m-auto">
-                  <FontAwesomeIcon icon={faSpinner} size="lg" spin />
-                </h1>
-              }
-            >
-              <OverviewModalContent
-                alertStore={alertStore}
-                onHide={this.toggle.hide}
-                isVisible={this.toggle.show}
-              />
-            </React.Suspense>
-          </Modal>
-        </React.Fragment>
-      );
-    }
-  }
-);
+            {alertStore.info.totalAlerts}
+          </div>
+        </Flash>
+      </TooltipWrapper>
+      <Modal size="xl" 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>
+          }
+        >
+          <OverviewModalContent
+            alertStore={alertStore}
+            onHide={toggle.hide}
+            isVisible={toggle.show}
+          />
+        </React.Suspense>
+      </Modal>
+    </React.Fragment>
+  );
+});
+OverviewModal.propTypes = {
+  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+};
 
 export { OverviewModal };
diff --git a/ui/src/Components/OverviewModal/index.test.js b/ui/src/Components/OverviewModal/index.test.js
index 14c3228ca..7fc6b8294 100644
--- a/ui/src/Components/OverviewModal/index.test.js
+++ b/ui/src/Components/OverviewModal/index.test.js
@@ -57,15 +57,14 @@ describe("<OverviewModal />", () => {
     expect(tree.find(".modal-title")).toHaveLength(0);
   });
 
-  it("hides the modal when hide() is called", () => {
+  it("hides the modal when button.close is clicked", () => {
     const tree = MountedOverviewModal();
     const toggle = tree.find("div.navbar-brand");
 
     toggle.simulate("click");
     expect(tree.find(".modal-title").text()).toBe("Overview");
 
-    const instance = tree.instance();
-    instance.toggle.hide();
+    tree.find("button.close").simulate("click");
     jest.runOnlyPendingTimers();
     tree.update();
     expect(tree.find("OverviewModalContent")).toHaveLength(0);