Merge pull request #189 from Vizzuality/fix-filters

Change how table filtering works + fix filters' select all and clear all buttons

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<FiltersButtonProps> = ({
   field,
   options,
   values,
-  headerButtons = false,
+  headerButtons = true,
   showNoFiltersError = false,
   onChange,
 }) => {
@@ -51,6 +52,11 @@ const FiltersButton: React.FC<FiltersButtonProps> = ({
     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<FiltersButtonProps> = ({
     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);
     }
   };
 

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;

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';

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) => {