compare first and new filter to know if changes

package.json

@@ -246,6 +246,7 @@
     "react-range": "^1.8.14",
     "react-router-dom": "^6.3.0",
     "regedit": "^5.1.1",
+    "rfdc": "^1.3.0",
     "rxjs": "^7.5.6",
     "sanitize-filename": "^1.6.3",
     "semver": "^7.3.8",

src/renderer/components/maps-mangement-components/filter-panel.component.tsx

@@ -12,6 +12,8 @@ import { MAP_SPECIFICITIES } from "renderer/partials/maps/map-general/map-specif
 import { MAP_REQUIREMENTS } from "renderer/partials/maps/map-requirements/map-requirements"
 import { MAP_DIFFICULTIES_COLORS } from "renderer/partials/maps/map-difficulties/map-difficulties-colors"
 import { BsmButton } from "../shared/bsm-button.component"
+import equal from "fast-deep-equal/es6";
+import clone from "rfdc";
 
 export type Props = {
     className?: string,
@@ -28,6 +30,7 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange,
     const t = useTranslation();
 
     const [haveChanged, setHaveChanged] = useState(false);
+    const [firstFilter,] = useState(clone()(filter));
     const firstRun = useRef(true);
 
     const MIN_NPS = 0;
@@ -47,7 +50,8 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange,
             firstRun.current = false;
             return; 
         }
-        setHaveChanged(() => true);
+        console.log(filter, firstFilter);
+        setHaveChanged(() => !equal(filter, firstFilter));
     }, [filter])
     
 
@@ -89,6 +93,9 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange,
         if(max === MAX_NPS){
             delete newFilter["maxNps"];
         }
+        if(min === MIN_NPS){
+            delete newFilter["minNps"];
+        }
         onChange(newFilter);
     }
 
@@ -97,6 +104,9 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange,
         if(max === MAX_DURATION){
             delete newFilter["maxDuration"];
         }
+        if(min === MIN_DURATION){
+            delete newFilter["minDuration"];
+        }
         onChange(newFilter);
     }
 
@@ -116,11 +126,17 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange,
             enabledTags.add(tag);
         }
 
-        onChange({
-            ...filter,
-            enabledTags,
-            excludedTags
-        });
+        const newFilter = {...filter, enabledTags, excludedTags};
+
+        if(newFilter.enabledTags.size === 0){
+            delete newFilter["enabledTags"];
+        }
+
+        if(newFilter.excludedTags.size === 0){
+            delete newFilter["excludedTags"];
+        }
+
+        onChange(newFilter);
 
     }