From cae0ec5448b0f50bad659b5b4a5ed6cc288237bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 5 Jun 2020 16:21:16 +0100
Subject: [PATCH] fix(ui): drop useLocalStore from History

---
 .../Components/NavBar/FilterInput/History.js  | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index c012705ac..d68d76789 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver, useLocalStore } from "mobx-react";
+import { useObserver } from "mobx-react";
 import { localStored } from "mobx-stored";
 
 import { Manager, Reference, Popper } from "react-popper";
@@ -154,15 +154,9 @@ const History = ({ alertStore, settingsStore }) => {
     }
   );
 
-  const collapse = useLocalStore(() => ({
-    isHidden: true,
-    toggle() {
-      this.isHidden = !this.isHidden;
-    },
-    hide() {
-      this.isHidden = true;
-    },
-  }));
+  const [isVisible, setIsVisible] = useState(false);
+  const hide = useCallback(() => setIsVisible(false), []);
+  const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);
 
   const mountRef = useRef(false);
 
@@ -196,7 +190,7 @@ const History = ({ alertStore, settingsStore }) => {
   });
 
   const ref = useRef(null);
-  useOnClickOutside(ref, collapse.hide, !collapse.isHidden);
+  useOnClickOutside(ref, hide, isVisible);
 
   return useObserver(() => (
     // data-filters is there to register filters for observation in mobx
@@ -217,7 +211,7 @@ const History = ({ alertStore, settingsStore }) => {
           {({ ref }) => (
             <button
               ref={ref}
-              onClick={collapse.toggle}
+              onClick={toggle}
               className="border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon"
               type="button"
               data-toggle="dropdown"
@@ -228,7 +222,7 @@ const History = ({ alertStore, settingsStore }) => {
             </button>
           )}
         </Reference>
-        <DropdownSlide in={!collapse.isHidden} unmountOnExit>
+        <DropdownSlide in={isVisible} unmountOnExit>
           <Popper modifiers={[{ name: "arrow", enabled: false }]}>
             {({ placement, ref, style }) => (
               <HistoryMenu
@@ -241,7 +235,7 @@ const History = ({ alertStore, settingsStore }) => {
                 }}
                 alertStore={alertStore}
                 settingsStore={settingsStore}
-                afterClick={collapse.hide}
+                afterClick={hide}
               />
             )}
           </Popper>