From 38404adaf3dc6b6c4f18e22743e9ca1ed251633d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Wed, 29 Nov 2023 12:17:26 +0100
Subject: [PATCH] fixes filters loop

---
 .../details/table/filters-button/index.tsx    | 23 ++++++-------------
 .../details/table/tooltip-button/index.tsx    |  2 +-
 .../tables/global-regional/useColumns.tsx     |  4 +---
 .../tables/national-highseas/useColumns.tsx   |  5 ++--
 4 files changed, 12 insertions(+), 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
index c6c7a8a1..27cd4e87 100644
--- 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
index b378ffae..25f847e9 100644
--- 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
index 3fd568b6..4150e255 100644
--- 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
index f49e8090..16631a34 100644
--- 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,