@star-insure/sdk 6.0.6 → 6.0.8

package/src/components/filter/FilterItem.tsx

@@ -20,37 +20,58 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
         if (typeof window !== 'undefined') {
             const search = new URLSearchParams(window.location.search);
 
+            // Strip all index keys from the square brackets
+            const filtersFromUrl = [];
+            for (const [key, value] of search.entries()) {
+                const updatedKey = key.replaceAll(/\[\d+\]/g, '[]');
+                filtersFromUrl.push([updatedKey, value]);
+            }
+
+            // Conditional logic dependent on the filter type
             if (filter.type === 'date') {
-                const fromDate = search.get(`${filter.name}[from]`);
-                const toDate = search.get(`${filter.name}[to]`);
+                const fromDate = filtersFromUrl.find(([key]) => key === `${filter.name}[from]`)?.[1];
+                const toDate = filtersFromUrl.find(([key]) => key === `${filter.name}[to]`)?.[1];
                 if (fromDate && toDate) {
                     setSelected([fromDate, toDate]);
                 }
             } else if (filter.type === 'greaterThan') {
-                const selectedFromUrl = search.getAll(`${filter.name}-GTE`);
-                if (selectedFromUrl) {
+                const selectedFromUrl = filtersFromUrl
+                    .filter(([key]) => key === `${filter.name}-GTE`)
+                    .map(([_, value]) => value);
+                if (selectedFromUrl.length > 0) {
                     setSelected(selectedFromUrl);
                 }
             } else if (filter.type === 'scope') {
-                const selectedFromUrl = search.getAll(`scope${filter.name}`);
-                if (selectedFromUrl) {
+                const selectedFromUrl = filtersFromUrl
+                    .filter(([key]) => key === `scope${filter.name}`)
+                    .map(([_, value]) => value);
+                if (selectedFromUrl.length > 0) {
                     setSelected(selectedFromUrl);
                 }
             } else if (filter.type === 'select') {
-                const selectedFromUrl = search.getAll(`${filter.name}[]`);
-                if (selectedFromUrl) {
+                const selectedFromUrl = filtersFromUrl
+                    .filter(([key]) => key === `${filter.name}[]`)
+                    .map(([_, value]) => value);
+                if (selectedFromUrl.length > 0) {
                     setSelected(selectedFromUrl);
-                    const selectedOptions = filter.options && filter.options.filter(item => selectedFromUrl.includes(item.value.toString()));
-                    selectedOptions && setSelectedOptions(selectedOptions);
+                    const selectedOptions = filter.options && filter.options.filter(item =>
+                        selectedFromUrl.includes(item.value.toString())
+                    );
+                    if (selectedOptions && selectedOptions.length > 0) {
+                        setSelectedOptions(selectedOptions);
+                    }
                 }
             } else {
-                const selectedFromUrl = search.getAll(`${filter.name}[]`);
-                if (selectedFromUrl) {
+                // Default case for 'options' type and others
+                const selectedFromUrl = filtersFromUrl
+                    .filter(([key]) => key === `${filter.name}[]`)
+                    .map(([_, value]) => value);
+                if (selectedFromUrl.length > 0) {
                     setSelected(selectedFromUrl);
                 }
             }
         }
-    }, []);
+    }, [filter]);
 
     function handleInput(e: React.SyntheticEvent<HTMLInputElement>) {
         const { value, checked } = e.currentTarget;
@@ -181,6 +202,10 @@ export function FilterItem({ filter }: { filter: FilterOption, path?: string })
             search.delete(`${filter.name}[]`);
         }
 
+        // Reset the local state
+        setSelected([]);
+        setSelectedOptions([]);
+
         // Fetch new data
         router.get(`${window.location.pathname}?${search.toString()}`);
     }