From 164d5f986d917b686b5c11d23850e78ca34e2a42 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Mon, 26 Feb 2024 12:01:30 +0000 Subject: [PATCH 1/5] National/Highseas tables to not have filters selected by default --- .../details/tables/national-highseas/index.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) 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) => { From 918eae31c098b3d3b6637f26a1c5f00bc125d560 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Mon, 26 Feb 2024 12:03:25 +0000 Subject: [PATCH 2/5] When no filters are selected, return all data --- frontend/src/containers/map/content/details/helpers.ts | 1 + 1 file changed, 1 insertion(+) 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; From eaaf3a2deb9ee06567ce1ecc97a9d7b417155034 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Mon, 26 Feb 2024 12:42:10 +0000 Subject: [PATCH 3/5] Remove FiltersButton import from global/regional's useColumns - not in use --- .../map/content/details/tables/global-regional/useColumns.tsx | 1 - 1 file changed, 1 deletion(-) 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'; From 6bbef5efe7f3fc5243d3ce920ed22ee39afa74d8 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Mon, 26 Feb 2024 12:43:19 +0000 Subject: [PATCH 4/5] Fix FiltersButton's 'Select all' and 'Clear all' buttons not working --- frontend/src/components/filters-button/index.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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); } }; From 1f4e9d9ea731ff44247f44fe5fe29c382fe5deee Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Mon, 26 Feb 2024 13:52:26 +0000 Subject: [PATCH 5/5] Remove useFiltersOptions from global/regional tables - no longer in use --- .../details/tables/global-regional/useFiltersOptions.ts | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 frontend/src/containers/map/content/details/tables/global-regional/useFiltersOptions.ts 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;