Fix tag into zustand when coming via runway

Author: benjaminaaron

src/ui/screens/eligibilty-overview/EligibilityOverviewScreenContainer.js

@@ -20,7 +20,7 @@ const EligibilityOverviewScreenContainer = () => {
     const { validationReport } = useProduceValidationReport();
     const metadata = useMetadataStore((state) => state.metadata);
     const { eligibilityData, filterOptions } = useEligibilityData(validationReport, metadata, hydrationData, language);
-    const filters = useInitialiseFilters(filterOptions, searchParams, selectedFilters, setSearchParams);
+    const filters = useInitialiseFilters(filterOptions, searchParams, selectedFilters, setSearchParams, setSelectedFilters);
     const handleChangeFilters = useFilterChangeHandler({ filters, setSearchParams, setSelectedFilters });
     const filteredEligibilityData = useFilterEligibilityData(eligibilityData, filters);
 

src/ui/screens/eligibilty-overview/hooks/useBuildFilterSetup.js

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useEffect } from 'react';
 
-export const useInitialiseFilters = (filterOptions, searchParams, selectedFilters = {}, setSearchParams) => {
+export const useInitialiseFilters = (filterOptions, searchParams, selectedFilters = {}, setSearchParams, setSelectedFilters) => {
     const { filters, urlHadParams } = useMemo(() => {
         const f = {};
         let any = false;
@@ -12,7 +12,7 @@ export const useInitialiseFilters = (filterOptions, searchParams, selectedFilter
             }
         }
         return { filters: any ? f : selectedFilters, urlHadParams: any };
-    }, [filterOptions, searchParams, selectedFilters]);
+    }, [filterOptions, searchParams]);
 
     useEffect(() => {
         if (!urlHadParams && selectedFilters && Object.keys(selectedFilters).length > 0) {
@@ -24,6 +24,31 @@ export const useInitialiseFilters = (filterOptions, searchParams, selectedFilter
         }
     }, [urlHadParams, selectedFilters, setSearchParams]);
 
+    const areFiltersEqual = (a = {}, b = {}) => {
+        const aKeys = Object.keys(a);
+        const bKeys = Object.keys(b);
+        if (aKeys.length !== bKeys.length) return false;
+        for (const k of aKeys) {
+            const aVals = a[k] || [];
+            const bVals = b[k] || [];
+            if (aVals.length !== bVals.length) return false;
+            for (let i = 0; i < aVals.length; i++) {
+                if (aVals[i] !== bVals[i]) return false;
+            }
+        }
+        return true;
+    };
+
+    // if the URL contained filter params on first load, push them into selected state
+    useEffect(() => {
+        if (urlHadParams) {
+            // only set if different to avoid update loops
+            if (!areFiltersEqual(selectedFilters, filters)) {
+                setSelectedFilters(filters);
+            }
+        }
+    }, [urlHadParams, filters, selectedFilters, setSelectedFilters]);
+
     return filters;
 };