fix: delete saved filters

vish9812 · Dec 6, 2024 · 0d44822 · 0d44822
1 parent bb952e7
commit 0d44822
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/ui/src/components/filters/index.tsx b/ui/src/components/filters/index.tsx
@@ -13,7 +13,6 @@ import useViewModel, {
   FiltersProps,
   GridsRefs,
   savedFiltersNames,
-  deleteAllSavedFilters,
 } from "./useViewModel";
 import { AgGridSolidRef } from "ag-grid-solid";
 import { GridOptions } from "ag-grid-community";
@@ -75,6 +74,7 @@ function Filters(props: FiltersProps) {
     handleNewSearchTerm,
     handleSaveFilter,
     handleLoadFilter,
+    handleDeleteFilters,
   } = useViewModel(props);
 
   const commonGridOptions: GridOptions<GroupedMsg> = {
@@ -276,7 +276,7 @@ function Filters(props: FiltersProps) {
             label="Load Filter"
             labelPlacement="start"
           />
-          <Button variant="contained" onClick={deleteAllSavedFilters}>
+          <Button variant="contained" onClick={handleDeleteFilters}>
             Delete Filters
           </Button>
         </Stack>

diff --git a/ui/src/components/filters/useViewModel.test.tsx b/ui/src/components/filters/useViewModel.test.tsx
@@ -3,7 +3,6 @@ import useViewModel, {
   FiltersData,
   GridsRefs,
   defaultFilters,
-  deleteAllSavedFilters,
   savedFilterKey,
 } from "./useViewModel";
 import { FiltersProps } from "./useViewModel";
@@ -172,7 +171,7 @@ describe("useViewModel", () => {
       });
     });
 
-    test("deleteAllSavedFilters", () => {
+    test("handleDeleteFilters", () => {
       createRoot((dispose) => {
         const vm = useViewModel(props);
 
@@ -183,10 +182,11 @@ describe("useViewModel", () => {
         vm.handleSaveFilter();
 
         expect(localStorage.length, "localStorage.length-pre-clear").toEqual(1);
-        deleteAllSavedFilters();
+        vm.handleDeleteFilters();
         expect(localStorage.length, "localStorage.length-post-clear").toEqual(
           0
         );
+        expect(vm.savedFilterName(), "savedFilterName").toEqual("");
 
         dispose();
       });
@@ -199,11 +199,9 @@ describe("useViewModel", () => {
 
           vm.handleLoadFilter(filterName);
 
-          expect(vm.savedFilterName(), "savedFilterName").toEqual(filterName);
+          expect(vm.savedFilterName(), "savedFilterName").toEqual("");
           expect(vm.filters, "filters").toEqual(defaultFilters());
-          expect(props.onFiltersChange, "onFiltersChange").toBeCalledWith(
-            vm.filters
-          );
+          expect(props.onFiltersChange, "onFiltersChange").toBeCalledTimes(0);
 
           dispose();
         });
@@ -272,8 +270,11 @@ describe("useViewModel", () => {
       }));
       expect(vm.filters.regex, "regex").toEqual("some regex");
 
+      vm.setSavedFilterName("test_filter")
+
       vm.handleResetClick(gridsRefs);
 
+      expect(vm.savedFilterName(), "savedFilterName").toEqual("");
       expect(vm.filters, "filters").toEqual(defaultFilters());
       expect(vm.addedLogs(), "addedLogs").toEqual(comparer.added);
       expect(vm.removedLogs(), "removedLogs").toEqual(comparer.removed);

diff --git a/ui/src/components/filters/useViewModel.tsx b/ui/src/components/filters/useViewModel.tsx
@@ -72,10 +72,6 @@ function savedFiltersNames(): string[] {
   return savedFiltersKeys().map((key) => key.split("|")[1]);
 }
 
-function deleteAllSavedFilters(): void {
-  savedFiltersKeys().forEach((key) => localStorage.removeItem(key));
-}
-
 function useViewModel(props: FiltersProps) {
   const [savedFilterName, setSavedFilterName] = createSignal("");
   const [filters, setFilters] = createStore(defaultFilters());
@@ -97,16 +93,24 @@ function useViewModel(props: FiltersProps) {
 
   function handleLoadFilter(filterName: string) {
     const filtersStr = localStorage.getItem(savedFilterKey(filterName));
+    if (!filtersStr) return;
+
     setSavedFilterName(filterName);
-    setFilters(filtersStr ? JSON.parse(filtersStr) : defaultFilters());
+    setFilters(JSON.parse(filtersStr));
     handleFiltersChange();
   }
 
+  function handleDeleteFilters() {
+    savedFiltersKeys().forEach((key) => localStorage.removeItem(key));
+    setSavedFilterName("");
+  }
+
   function handleFiltersChange() {
     props.onFiltersChange(filters);
   }
-
+  
   function handleResetClick(gridsRefs: GridsRefs) {
+    setSavedFilterName("");
     setFilters(defaultFilters());
     handleErrorsOnlyChange(false);
 
@@ -225,6 +229,7 @@ function useViewModel(props: FiltersProps) {
     handleNewSearchTerm,
     handleSaveFilter,
     handleLoadFilter,
+    handleDeleteFilters,
   };
 }
 
@@ -233,6 +238,5 @@ export {
   defaultFilters,
   savedFiltersNames,
   savedFilterKey,
-  deleteAllSavedFilters,
 };
 export type { SearchTerm, FiltersData, FiltersProps, GridsRefs };