fix(ui): drop useLocalStore from modals

2026-05-19 04:26:41 +00:00 · 2020-06-05 16:14:55 +01:00
parent c15b3afb78
commit ca0a0b3077
7 changed files with 71 additions and 110 deletions
--- a/ui/src/Components/MainModal/MainModalContent.js
+++ b/ui/src/Components/MainModal/MainModalContent.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";

-import { useObserver, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";

 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
@@ -21,12 +21,7 @@ const MainModalContent = ({
  openTab,
  expandAllOptions,
 }) => {
-  const tab = useLocalStore(() => ({
-    current: openTab,
-    setTab(newTab) {
-      this.current = newTab;
-    },
-  }));
+  const [tab, setTab] = useState(openTab);

  return useObserver(() => (
    <React.Fragment>
@@ -34,13 +29,13 @@ const MainModalContent = ({
        <nav className="nav nav-pills nav-justified w-100">
          <Tab
            title="Configuration"
-            active={tab.current === TabNames.Configuration}
-            onClick={() => tab.setTab(TabNames.Configuration)}
+            active={tab === TabNames.Configuration}
+            onClick={() => setTab(TabNames.Configuration)}
          />
          <Tab
            title="Help"
-            active={tab.current === TabNames.Help}
-            onClick={() => tab.setTab(TabNames.Help)}
+            active={tab === TabNames.Help}
+            onClick={() => setTab(TabNames.Help)}
          />
          <button type="button" className="close" onClick={onHide}>
            <span>&times;</span>
@@ -48,10 +43,10 @@ const MainModalContent = ({
        </nav>
      </div>
      <div className="modal-body">
-        {tab.current === TabNames.Help ? (
+        {tab === TabNames.Help ? (
          <Help defaultIsOpen={expandAllOptions} />
        ) : null}
-        {tab.current === TabNames.Configuration ? (
+        {tab === TabNames.Configuration ? (
          <Configuration
            settingsStore={settingsStore}
            defaultIsOpen={expandAllOptions}
--- a/ui/src/Components/MainModal/index.js
+++ b/ui/src/Components/MainModal/index.js
@@ -1,8 +1,6 @@
-import React from "react";
+import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";

-import { observer, useLocalStore } from "mobx-react";
-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
@@ -19,35 +17,29 @@ const MainModalContent = React.lazy(() =>
  }))
 );

-const MainModal = observer(({ alertStore, settingsStore }) => {
-  const toggle = useLocalStore(() => ({
-    show: false,
-    toggle() {
-      this.show = !this.show;
-    },
-    hide() {
-      this.show = false;
-    },
-  }));
+const MainModal = ({ alertStore, settingsStore }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);

  return (
    <React.Fragment>
      <li
        className={`nav-item components-navbar-button ${
-          toggle.show ? "border-info" : ""
+          isVisible ? "border-info" : ""
        }`}
      >
        <TooltipWrapper title="Settings">
          <span
            id="components-settings"
            className="nav-link cursor-pointer"
-            onClick={toggle.toggle}
+            onClick={toggle}
          >
            <FontAwesomeIcon icon={faCog} />
          </span>
        </TooltipWrapper>
      </li>
-      <Modal isOpen={toggle.show} toggleOpen={toggle.toggle}>
+      <Modal isOpen={isVisible} toggleOpen={toggle}>
        <React.Suspense
          fallback={
            <h1 className="display-1 text-placeholder p-5 m-auto">
@@ -58,15 +50,15 @@ const MainModal = observer(({ alertStore, settingsStore }) => {
          <MainModalContent
            alertStore={alertStore}
            settingsStore={settingsStore}
-            onHide={toggle.hide}
-            isVisible={toggle.show}
+            onHide={() => setIsVisible(false)}
+            isVisible={isVisible}
            expandAllOptions={false}
          />
        </React.Suspense>
      </Modal>
    </React.Fragment>
  );
-});
+};
 MainModal.propTypes = {
  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
  settingsStore: PropTypes.instanceOf(Settings).isRequired,
--- a/ui/src/Components/OverviewModal/OverviewModalContent.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";

-import { observer, useLocalStore } from "mobx-react";
+import { observer } from "mobx-react";

 import { AlertStore } from "Stores/AlertStore";
 import { TooltipWrapper } from "Components/TooltipWrapper";
@@ -100,12 +100,7 @@ const NothingToShow = () => (
 );

 const OverviewModalContent = observer(({ alertStore, onHide }) => {
-  const allLabels = useLocalStore(() => ({
-    show: false,
-    toggle() {
-      this.show = !this.show;
-    },
-  }));
+  const [showAllLabels, setShowAllLabels] = useState(false);
  return (
    <React.Fragment>
      <div className="modal-header">
@@ -120,8 +115,8 @@ const OverviewModalContent = observer(({ alertStore, onHide }) => {
        ) : (
          <LabelsTable
            alertStore={alertStore}
-            showAllLabels={allLabels.show}
-            toggleAllLabels={allLabels.toggle}
+            showAllLabels={showAllLabels}
+            toggleAllLabels={() => setShowAllLabels(!showAllLabels)}
          />
        )}
      </div>
--- a/ui/src/Components/OverviewModal/index.js
+++ b/ui/src/Components/OverviewModal/index.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";

-import { observer, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";

 import Flash from "react-reveal/Flash";

@@ -19,32 +19,26 @@ const OverviewModalContent = React.lazy(() =>
  }))
 );

-const OverviewModal = observer(({ alertStore }) => {
-  const toggle = useLocalStore(() => ({
-    show: false,
-    toggle() {
-      this.show = !this.show;
-    },
-    hide() {
-      this.show = false;
-    },
-  }));
+const OverviewModal = ({ alertStore }) => {
+  const [isVisible, setIsVisible] = useState(false);

-  return (
+  const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);
+
+  return useObserver(() => (
    <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" : ""
+              isVisible ? "border-info" : ""
            }`}
-            onClick={toggle.toggle}
+            onClick={toggle}
          >
            {alertStore.info.totalAlerts}
          </div>
        </Flash>
      </TooltipWrapper>
-      <Modal size="xl" isOpen={toggle.show} toggleOpen={toggle.toggle}>
+      <Modal size="xl" isOpen={isVisible} toggleOpen={toggle}>
        <React.Suspense
          fallback={
            <h1 className="display-1 text-placeholder p-5 m-auto">
@@ -54,14 +48,14 @@ const OverviewModal = observer(({ alertStore }) => {
        >
          <OverviewModalContent
            alertStore={alertStore}
-            onHide={toggle.hide}
-            isVisible={toggle.show}
+            onHide={() => setIsVisible(false)}
+            isVisible={isVisible}
          />
        </React.Suspense>
      </Modal>
    </React.Fragment>
-  );
-});
+  ));
+};
 OverviewModal.propTypes = {
  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
 };
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";

-import { useObserver, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";

 import moment from "moment";

@@ -165,32 +165,21 @@ TabContentDuration.propTypes = {
 };

 const DateTimeSelect = ({ silenceFormStore, openTab }) => {
-  const tab = useLocalStore(() => ({
-    current: openTab,
-    setStart() {
-      this.current = TabNames.Start;
-    },
-    setEnd() {
-      this.current = TabNames.End;
-    },
-    setDuration() {
-      this.current = TabNames.Duration;
-    },
-    timeNow: moment().seconds(0),
-    updateTimeNow() {
-      this.timeNow = moment().seconds(0);
-    },
-  }));
+  const [currentTab, setCurrentTab] = useState(openTab);
+  const [timeNow, setTimeNow] = useState(moment().seconds(0));
+
+  const updateTimeNow = useCallback(() => {
+    setTimeNow(moment().seconds(0));
+  }, []);

  useEffect(() => {
-    tab.updateTimeNow();
-    const nowUpdateTimer = setInterval(tab.updateTimeNow, 30 * 1000);
+    const nowUpdateTimer = setInterval(updateTimeNow, 30 * 1000);
    return () => {
      clearInterval(nowUpdateTimer);
    };
-  }, [tab]);
+  }, [updateTimeNow]);

-  return useObserver(() => (
+  return (
    <React.Fragment>
      <ul className="nav nav-tabs nav-fill">
        <Tab
@@ -199,13 +188,13 @@ const DateTimeSelect = ({ silenceFormStore, openTab }) => {
              <span className="mr-1">Starts</span>
              <OffsetBadge
                prefixLabel="in "
-                startDate={tab.timeNow}
+                startDate={timeNow}
                endDate={silenceFormStore.data.startsAt}
              />
            </React.Fragment>
          }
-          active={tab.current === TabNames.Start}
-          onClick={tab.setStart}
+          active={currentTab === TabNames.Start}
+          onClick={() => setCurrentTab(TabNames.Start)}
        />
        <Tab
          title={
@@ -213,13 +202,13 @@ const DateTimeSelect = ({ silenceFormStore, openTab }) => {
              <span className="mr-1">Ends</span>
              <OffsetBadge
                prefixLabel="in "
-                startDate={tab.timeNow}
+                startDate={timeNow}
                endDate={silenceFormStore.data.endsAt}
              />
            </React.Fragment>
          }
-          active={tab.current === TabNames.End}
-          onClick={tab.setEnd}
+          active={currentTab === TabNames.End}
+          onClick={() => setCurrentTab(TabNames.End)}
        />
        <Tab
          title={
@@ -232,23 +221,23 @@ const DateTimeSelect = ({ silenceFormStore, openTab }) => {
              />
            </React.Fragment>
          }
-          active={tab.current === TabNames.Duration}
-          onClick={tab.setDuration}
+          active={currentTab === TabNames.Duration}
+          onClick={() => setCurrentTab(TabNames.Duration)}
        />
      </ul>
      <div className="tab-content mb-3">
-        {tab.current === TabNames.Duration ? (
+        {currentTab === TabNames.Duration ? (
          <TabContentDuration silenceFormStore={silenceFormStore} />
        ) : null}
-        {tab.current === TabNames.Start ? (
+        {currentTab === TabNames.Start ? (
          <TabContentStart silenceFormStore={silenceFormStore} />
        ) : null}
-        {tab.current === TabNames.End ? (
+        {currentTab === TabNames.End ? (
          <TabContentEnd silenceFormStore={silenceFormStore} />
        ) : null}
      </div>
    </React.Fragment>
-  ));
+  );
 };
 DateTimeSelect.propTypes = {
  silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { act } from "react-dom/test-utils";

 import { mount, shallow } from "enzyme";

@@ -127,7 +128,7 @@ describe("<DateTimeSelect />", () => {
    expect(tree.find(".nav-link").at(1).text()).toBe("Endsin 1h ");

    advanceTo(new Date(2060, 1, 1, 12, 1, 0));
-    jest.runOnlyPendingTimers();
+    act(() => jest.runOnlyPendingTimers());

    expect(tree.find(".nav-link").at(1).text()).toBe("Endsin 59m ");
  });
--- a/ui/src/Components/SilenceModal/SilenceForm.js
+++ b/ui/src/Components/SilenceModal/SilenceForm.js
@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";

-import { useObserver, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";

 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
@@ -33,12 +33,7 @@ const SilenceForm = ({
  settingsStore,
  previewOpen,
 }) => {
-  const previewCollapse = useLocalStore(() => ({
-    hidden: !previewOpen,
-    toggle() {
-      this.hidden = !this.hidden;
-    },
-  }));
+  const [showPreview, setShowPreview] = useState(previewOpen);

  useEffect(() => {
    // reset startsAt & endsAt on every mount, unless we're editing a silence
@@ -167,9 +162,9 @@ const SilenceForm = ({
      <div className="d-flex flex-row justify-content-between">
        <span
          className="btn px-0 cursor-pointer text-muted"
-          onClick={previewCollapse.toggle}
+          onClick={() => setShowPreview(!showPreview)}
        >
-          <ToggleIcon isOpen={!previewCollapse.hidden} />
+          <ToggleIcon isOpen={showPreview} />
        </span>
        <span>
          {silenceFormStore.data.silenceID === null ? null : (
@@ -188,9 +183,9 @@ const SilenceForm = ({
          </button>
        </span>
      </div>
-      {previewCollapse.hidden ? null : (
+      {showPreview ? (
        <PayloadPreview silenceFormStore={silenceFormStore} />
-      )}
+      ) : null}
    </form>
  ));
 };