diff --git a/frontend/src/components/filters-button/index.tsx b/frontend/src/components/filters-button/index.tsx index 7b3bbcbb..681b011e 100644 --- a/frontend/src/components/filters-button/index.tsx +++ b/frontend/src/components/filters-button/index.tsx @@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'; import { useForm } from 'react-hook-form'; +import { isEqual } from 'lodash-es'; import { Filter } from 'lucide-react'; import { Button } from '@/components/ui/button'; @@ -30,7 +31,7 @@ const FiltersButton: React.FC = ({ field, options, values, - headerButtons = false, + headerButtons = true, showNoFiltersError = false, onChange, }) => { @@ -51,6 +52,11 @@ const FiltersButton: React.FC = ({ setValue('filters', values); }, [setValue, values]); + useEffect(() => { + if (isEqual(filters, values)) return; + onChange(field, filters); + }, [field, filters, values, onChange]); + const handleSelectAll = () => { setValue('filters', allFilterValues); }; @@ -63,11 +69,9 @@ const FiltersButton: React.FC = ({ if (checked) { const filtersValues = [...filters, type]; setValue('filters', filtersValues); - onChange(field, filtersValues); } else { const filtersValues = filters.filter((entry) => entry !== type); setValue('filters', filtersValues); - onChange(field, filtersValues); } }; diff --git a/frontend/src/containers/map/content/details/helpers.ts b/frontend/src/containers/map/content/details/helpers.ts index f892d33c..401c9c44 100644 --- a/frontend/src/containers/map/content/details/helpers.ts +++ b/frontend/src/containers/map/content/details/helpers.ts @@ -1,6 +1,7 @@ export const applyFilters = (data, filters) => { const filteredData = data.filter((item) => { for (const key in filters) { + if (!filters[key].length) continue; if (!filters[key].includes(item[key])) return false; } return true; diff --git a/frontend/src/containers/map/content/details/tables/global-regional/useColumns.tsx b/frontend/src/containers/map/content/details/tables/global-regional/useColumns.tsx index abc00aa9..61a69ead 100644 --- a/frontend/src/containers/map/content/details/tables/global-regional/useColumns.tsx +++ b/frontend/src/containers/map/content/details/tables/global-regional/useColumns.tsx @@ -4,7 +4,6 @@ import Link from 'next/link'; import { ColumnDef } from '@tanstack/react-table'; -import FiltersButton from '@/components/filters-button'; import { PAGES } from '@/constants/pages'; import HeaderItem from '@/containers/map/content/details/table/header-item'; import { cellFormatter } from '@/containers/map/content/details/table/helpers'; diff --git a/frontend/src/containers/map/content/details/tables/global-regional/useFiltersOptions.ts b/frontend/src/containers/map/content/details/tables/global-regional/useFiltersOptions.ts deleted file mode 100644 index b73db2a5..00000000 --- a/frontend/src/containers/map/content/details/tables/global-regional/useFiltersOptions.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { LOCATION_TYPES_FILTER_OPTIONS } from '@/containers/map/constants'; - -const useFiltersOptions = () => { - return { - locationTypes: LOCATION_TYPES_FILTER_OPTIONS, - }; -}; - -export default useFiltersOptions; diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx index 57e27398..2b613754 100644 --- a/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx +++ b/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx @@ -29,18 +29,10 @@ const NationalHighseasTable: React.FC = () => { ); const [filters, setFilters] = useState({ - // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here. - protectedAreaType: ['mpa', 'oecm'], - establishmentStage: [ - 'actively-managed', - 'designated', - 'designated-unimplemented', - 'implemented', - 'proposed-committed', - 'unknown', - ], - protectionLevel: ['fully-highly-protected', 'less-protected-unknown'], - fishingProtectionLevel: ['highly', 'less', 'moderately'], + protectedAreaType: [], + establishmentStage: [], + protectionLevel: [], + fishingProtectionLevel: [], }); const handleOnFiltersChange = (field, values) => {