From ca0a0b30779d37ea77dbd402c9979edf2f1b104e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Fri, 5 Jun 2020 16:14:55 +0100 Subject: [PATCH] fix(ui): drop useLocalStore from modals --- .../Components/MainModal/MainModalContent.js | 23 +++----- ui/src/Components/MainModal/index.js | 30 ++++------ .../OverviewModal/OverviewModalContent.js | 15 ++--- ui/src/Components/OverviewModal/index.js | 34 +++++------ .../SilenceModal/DateTimeSelect/index.js | 57 ++++++++----------- .../SilenceModal/DateTimeSelect/index.test.js | 3 +- ui/src/Components/SilenceModal/SilenceForm.js | 19 +++---- 7 files changed, 71 insertions(+), 110 deletions(-) diff --git a/ui/src/Components/MainModal/MainModalContent.js b/ui/src/Components/MainModal/MainModalContent.js index f7af2b618..7eeb89fc6 100644 --- 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(() => ( @@ -34,13 +29,13 @@ const MainModalContent = ({
- {tab.current === TabNames.Help ? ( + {tab === TabNames.Help ? ( ) : null} - {tab.current === TabNames.Configuration ? ( + {tab === TabNames.Configuration ? ( })) ); -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 (
    • - + @@ -58,15 +50,15 @@ const MainModal = observer(({ alertStore, settingsStore }) => { setIsVisible(false)} + isVisible={isVisible} expandAllOptions={false} />     ); -}); +}; MainModal.propTypes = { alertStore: PropTypes.instanceOf(AlertStore).isRequired, settingsStore: PropTypes.instanceOf(Settings).isRequired, diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.js b/ui/src/Components/OverviewModal/OverviewModalContent.js index 347dff4de..967fcd574 100644 --- 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 (
    @@ -120,8 +115,8 @@ const OverviewModalContent = observer(({ alertStore, onHide }) => { ) : ( setShowAllLabels(!showAllLabels)} /> )}
    diff --git a/ui/src/Components/OverviewModal/index.js b/ui/src/Components/OverviewModal/index.js index d274d7526..b7b29e511 100644 --- 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(() => (
    {alertStore.info.totalAlerts}
    - + @@ -54,14 +48,14 @@ const OverviewModal = observer(({ alertStore }) => { > setIsVisible(false)} + isVisible={isVisible} />     - ); -}); + )); +}; OverviewModal.propTypes = { alertStore: PropTypes.instanceOf(AlertStore).isRequired, }; diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js index 8c0f6ecfb..8c60886f2 100644 --- 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 (
      { Starts } - active={tab.current === TabNames.Start} - onClick={tab.setStart} + active={currentTab === TabNames.Start} + onClick={() => setCurrentTab(TabNames.Start)} /> { Ends } - active={tab.current === TabNames.End} - onClick={tab.setEnd} + active={currentTab === TabNames.End} + onClick={() => setCurrentTab(TabNames.End)} /> { /> } - active={tab.current === TabNames.Duration} - onClick={tab.setDuration} + active={currentTab === TabNames.Duration} + onClick={() => setCurrentTab(TabNames.Duration)} />
    - {tab.current === TabNames.Duration ? ( + {currentTab === TabNames.Duration ? ( ) : null} - {tab.current === TabNames.Start ? ( + {currentTab === TabNames.Start ? ( ) : null} - {tab.current === TabNames.End ? ( + {currentTab === TabNames.End ? ( ) : null}
    - )); + ); }; DateTimeSelect.propTypes = { silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired, diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js index e882edf38..3e4e1f46e 100644 --- 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("", () => { 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 "); }); diff --git a/ui/src/Components/SilenceModal/SilenceForm.js b/ui/src/Components/SilenceModal/SilenceForm.js index c05e9258e..576bda3e6 100644 --- 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 = ({
    setShowPreview(!showPreview)} > - + {silenceFormStore.data.silenceID === null ? null : ( @@ -188,9 +183,9 @@ const SilenceForm = ({
    - {previewCollapse.hidden ? null : ( + {showPreview ? ( - )} + ) : null} )); };