From f3c53f40887550a7a1653cbc8fae112bf0f76db0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 12 Apr 2022 20:13:27 +0100
Subject: [PATCH] fix(ui): correctly save history

---
 CHANGELOG.md                                  |  6 +++
 .../Components/NavBar/FilterInput/History.tsx | 54 +++++++++++--------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2160c72c..1794707ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.102
+
+### Fixed
+
+- Correctly set filter history.
+
 ## v0.101
 
 ### Fixed
diff --git a/ui/src/Components/NavBar/FilterInput/History.tsx b/ui/src/Components/NavBar/FilterInput/History.tsx
index 5e95ed111..f2fd305c7 100644
--- a/ui/src/Components/NavBar/FilterInput/History.tsx
+++ b/ui/src/Components/NavBar/FilterInput/History.tsx
@@ -9,7 +9,7 @@ import {
   CSSProperties,
 } from "react";
 
-import { action } from "mobx";
+import { action, autorun } from "mobx";
 import { observer } from "mobx-react-lite";
 import { localStored } from "mobx-stored";
 
@@ -212,30 +212,38 @@ const History: FC<{
 
   // every time this component updates we will rewrite history
   // (if there are changes)
-  useEffect(() => {
-    // we don't store unapplied (we only have raw text for those, we need
-    // name & value for coloring) or invalid filters
-    // also check for value, name might be missing for fuzzy filters, but
-    // the value should always be set
-    const validAppliedFilters = alertStore.filters.values
-      .filter((f) => f.applied && f.isValid && f.value)
-      .map((f) => ReduceFilter(f));
+  useEffect(
+    () =>
+      autorun(() => {
+        // we don't store unapplied (we only have raw text for those, we need
+        // name & value for coloring) or invalid filters
+        // also check for value, name might be missing for fuzzy filters, but
+        // the value should always be set
+        const validAppliedFilters = alertStore.filters.values
+          .filter((f) => f.applied && f.isValid && f.value)
+          .map((f) => ReduceFilter(f));
 
-    // don't store empty filters in history
-    if (validAppliedFilters.length === 0) return;
-    // make a JSON dump for comparing later with what's already stored
-    const filtersJSON = JSON.stringify(validAppliedFilters);
+        // don't store empty filters in history
+        if (validAppliedFilters.length === 0) return;
+        // make a JSON dump for comparing later with what's already stored
+        const filtersJSON = JSON.stringify(validAppliedFilters);
 
-    // rewrite history putting current filter set on top, this will move
-    // it up if user selects a filter set that was already in history
-    const newHistory = [
-      ...[validAppliedFilters],
-      ...history.config.filters.filter(
-        (f) => JSON.stringify(f) !== filtersJSON
-      ),
-    ].slice(0, 8);
-    history.setFilters(newHistory);
-  }, [history, alertStore.filters.values]);
+        // rewrite history putting current filter set on top, this will move
+        // it up if user selects a filter set that was already in history
+        const newHistory = [
+          ...[validAppliedFilters],
+          ...history.config.filters.filter(
+            (f) => JSON.stringify(f) !== filtersJSON
+          ),
+        ].slice(0, 8);
+        if (
+          JSON.stringify(newHistory) !== JSON.stringify(history.config.filters)
+        ) {
+          history.setFilters(newHistory);
+        }
+      }),
+    [alertStore.filters.values, history]
+  );
 
   const ref = useRef<HTMLSpanElement | null>(null);
   useOnClickOutside(ref, hide, isVisible);