fixes filters loop

Vizzuality · Nov 29, 2023 · 38404ad · 38404ad
1 parent e82d3b7
commit 38404ad
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 22 deletions.
diff --git a/frontend/src/containers/data-tool/content/details/table/filters-button/index.tsx b/frontend/src/containers/data-tool/content/details/table/filters-button/index.tsx
@@ -1,8 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useForm } from 'react-hook-form';
 
-import { xor } from 'lodash-es';
 import { Filter } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
@@ -39,15 +38,6 @@ const FiltersButton: React.FC<FiltersButtonProps> = ({ field, options, values, o
 
   const filters = watch('filters');
 
-  useEffect(() => {
-    const filtersChanged = xor(filters, values).length > 0;
-    const allFiltersSelected = filters.length === allFilterValues.length;
-
-    if (filtersChanged || allFiltersSelected) {
-      onChange(field, filters);
-    }
-  }, [field, filters, values, onChange, allFilterValues.length]);
-
   const handleSelectAll = () => {
     setValue('filters', allFilterValues);
   };
@@ -58,12 +48,13 @@ const FiltersButton: React.FC<FiltersButtonProps> = ({ field, options, values, o
 
   const handleOnCheckedChange = (type, checked) => {
     if (checked) {
-      setValue('filters', [...filters, type]);
+      const filtersValues = [...filters, type];
+      setValue('filters', filtersValues);
+      onChange(field, filtersValues);
     } else {
-      setValue(
-        'filters',
-        filters.filter((entry) => entry !== type)
-      );
+      const filtersValues = filters.filter((entry) => entry !== type);
+      setValue('filters', filtersValues);
+      onChange(field, filtersValues);
     }
   };
 

diff --git a/frontend/src/containers/data-tool/content/details/table/tooltip-button/index.tsx b/frontend/src/containers/data-tool/content/details/table/tooltip-button/index.tsx
@@ -24,7 +24,7 @@ const TooltipButton: React.FC<TooltipButtonProps> = ({ column, tooltips }) => {
 
   return (
     <Popover open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
-      <PopoverTrigger>
+      <PopoverTrigger asChild>
         <Button className="mt-1 h-auto w-auto pl-2" size="icon" variant="ghost">
           <span className="sr-only">Info</span>
           <Info className="h-4 w-4" aria-hidden="true" />

diff --git a/frontend/src/containers/data-tool/content/details/tables/global-regional/useColumns.tsx b/frontend/src/containers/data-tool/content/details/tables/global-regional/useColumns.tsx
@@ -182,9 +182,7 @@ const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
         },
       },
     ];
-    // ! If we add dependencies, the columns will re-render and the popovers will close on updates / act funny
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [filters, locationTypesOptions, onFiltersChange, searchParams, tooltips]);
 
   return columns;
 };

diff --git a/frontend/src/containers/data-tool/content/details/tables/national-highseas/useColumns.tsx b/frontend/src/containers/data-tool/content/details/tables/national-highseas/useColumns.tsx
@@ -162,9 +162,10 @@ const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
         },
       },
     ];
-    // ! If we add the filters dependency, the columns will re-render and the popovers will close on updates / act funny
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
+    filters,
+    onFiltersChange,
+    tooltips,
     protectionStatusOptions,
     establishmentStageOptions,
     protectionLevelOptions,