Merge pull request #1653 from nymtech/ne-stak-sat-filter

NE: fix upper saturation value used on filters

explorer/src/components/Filters/Filters.tsx

@@ -60,6 +60,7 @@ export const Filters = () => {
   const [showFilters, setShowFilters] = useState(false);
   const [isFiltered, setIsFiltered] = useState(false);
   const [filters, setFilters] = React.useState<TFilters>();
+  const [upperSaturationValue, setUpperSaturationValue] = React.useState<number>(100);
 
   const baseFilters = useRef<TFilters>();
   const prevFilters = useRef<TFilters>();
@@ -67,11 +68,10 @@ export const Filters = () => {
   const handleToggleShowFilters = () => setShowFilters(!showFilters);
 
   const initialiseFilters = useCallback(async () => {
-    let upperSaturationValue;
     const allMixnodes = await Api.fetchMixnodes();
     if (allMixnodes) {
-      upperSaturationValue = Math.round(Math.max(...allMixnodes.map((m) => m.stake_saturation)) * 100 + 1);
-      const initFilters = generateFilterSchema(upperSaturationValue);
+      setUpperSaturationValue(Math.round(Math.max(...allMixnodes.map((m) => m.stake_saturation)) * 100 + 1));
+      const initFilters = generateFilterSchema();
       baseFilters.current = initFilters;
       prevFilters.current = initFilters;
       setFilters(initFilters);
@@ -79,8 +79,18 @@ export const Filters = () => {
   }, []);
 
   const handleOnChange = (id: EnumFilterKey, newValue: number[]) => {
+    if (id === 'stakeSaturation' && newValue[1] === 100) {
+      newValue.splice(1, 1, upperSaturationValue);
+    }
     setFilters((ftrs) => {
-      if (ftrs) return { ...ftrs, [id]: { ...ftrs[id], value: newValue } };
+      if (ftrs)
+        return {
+          ...ftrs,
+          [id]: {
+            ...ftrs[id],
+            value: newValue,
+          },
+        };
       return undefined;
     });
   };

explorer/src/components/Filters/filterSchema.ts

@@ -1,6 +1,6 @@
 import { EnumFilterKey, TFilters } from '../../typeDefs/filters';
 
-export const generateFilterSchema = (upperSaturationValue?: number) => ({
+export const generateFilterSchema = () => ({
   profitMargin: {
     label: 'Profit margin (%)',
     id: EnumFilterKey.profitMargin,
@@ -25,13 +25,12 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({
   stakeSaturation: {
     label: 'Stake saturation (%)',
     id: EnumFilterKey.stakeSaturation,
-    value: [0, upperSaturationValue || 100],
+    value: [0, 100],
     isSmooth: true,
-    marks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, upperSaturationValue || 100].map((value) => ({
+    marks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((value) => ({
       value: value < 100 ? value : 100,
       label: value < 100 ? value : '>100',
     })),
-    max: 100,
     tooltipInfo: "Select nodes with <100% saturation. Any additional stake above 100% saturation won't get rewards",
   },
   routingScore: {