diff --git a/app/(prowler)/findings/page.tsx b/app/(prowler)/findings/page.tsx index c1da5ffbb9..53c0795f23 100644 --- a/app/(prowler)/findings/page.tsx +++ b/app/(prowler)/findings/page.tsx @@ -51,29 +51,30 @@ export default async function Findings({ const resourceDict = createDict("resources", findingsData); // Get unique regions and services - const allRegionsAndServices = findingsData?.data - ?.flatMap((finding: FindingProps) => { - const resource = - resourceDict[finding.relationships?.resources?.data?.[0]?.id]; - return { - region: resource?.attributes?.region, - service: resource?.attributes?.service, - }; - }) - .filter(Boolean); + const allRegionsAndServices = + findingsData?.data + ?.flatMap((finding: FindingProps) => { + const resource = + resourceDict[finding.relationships?.resources?.data?.[0]?.id]; + return { + region: resource?.attributes?.region, + service: resource?.attributes?.service, + }; + }) + .filter(Boolean) || []; const uniqueRegions = Array.from( new Set( allRegionsAndServices .map((item: { region: string }) => item.region) - .filter(Boolean), + .filter(Boolean) || [], ), ); const uniqueServices = Array.from( new Set( allRegionsAndServices .map((item: { service: string }) => item.service) - .filter(Boolean), + .filter(Boolean) || [], ), ); diff --git a/components/ui/custom/custom-dropdown-filter.tsx b/components/ui/custom/custom-dropdown-filter.tsx index c1fc5ace9d..da7f2e72a8 100644 --- a/components/ui/custom/custom-dropdown-filter.tsx +++ b/components/ui/custom/custom-dropdown-filter.tsx @@ -44,55 +44,57 @@ export const CustomDropdownFilter: React.FC = ({ return currentFilters; }, [searchParams, filter]); + const memoizedFilterValues = useMemo( + () => filter?.values || [], + [filter?.values], + ); + useEffect(() => { if (filter && getActiveFilter[filter.key]) { const activeValues = getActiveFilter[filter.key].split(","); const newSelection = new Set(activeValues); - if (newSelection.size === allFilterKeys.length) { + if (newSelection.size === memoizedFilterValues.length) { newSelection.add("all"); } setGroupSelected(newSelection); } else { setGroupSelected(new Set()); } - }, [getActiveFilter, filter, allFilterKeys]); + }, [getActiveFilter, filter?.key, memoizedFilterValues]); const onSelectionChange = useCallback( (keys: string[]) => { - const newSelection = new Set(keys); + setGroupSelected((prevGroupSelected) => { + const newSelection = new Set(keys); - if ( - newSelection.size === allFilterKeys.length && - !newSelection.has("all") - ) { - setGroupSelected(new Set(["all", ...allFilterKeys])); - } else if (groupSelected.has("all")) { - newSelection.delete("all"); - const remainingValues = allFilterKeys.filter((key) => - newSelection.has(key), - ); - setGroupSelected(new Set(remainingValues)); - } else { - setGroupSelected(newSelection); - } + if ( + newSelection.size === allFilterKeys.length && + !newSelection.has("all") + ) { + return new Set(["all", ...allFilterKeys]); + } else if (prevGroupSelected.has("all")) { + newSelection.delete("all"); + return new Set(allFilterKeys.filter((key) => newSelection.has(key))); + } + return newSelection; + }); if (onFilterChange && filter) { - const selectedValues = Array.from(newSelection).filter( - (key) => key !== "all", - ); + const selectedValues = keys.filter((key) => key !== "all"); onFilterChange(filter.key, selectedValues); } }, - [allFilterKeys, groupSelected, onFilterChange, filter], + [allFilterKeys, onFilterChange, filter], ); const handleSelectAllClick = useCallback(() => { - if (groupSelected.has("all")) { - setGroupSelected(new Set()); - } else { - setGroupSelected(new Set(["all", ...allFilterKeys])); - } - }, [groupSelected, allFilterKeys]); + setGroupSelected((prevGroupSelected) => { + if (prevGroupSelected.has("all")) { + return new Set(); + } + return new Set(["all", ...allFilterKeys]); + }); + }, [allFilterKeys]); const onClearFilter = useCallback( (filterKey: string) => { @@ -170,7 +172,7 @@ export const CustomDropdownFilter: React.FC = ({ hideScrollBar className="flex max-h-96 max-w-56 flex-col gap-y-2 py-2" > - {allFilterKeys.map((value) => ( + {memoizedFilterValues.map((value) => ( {value}