makes filters reactive

Vizzuality · Mar 19, 2024 · 93188d6 · 93188d6
1 parent de0f9a4
commit 93188d6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/client/src/containers/analysis-eudr/filters/more-filters/index.tsx b/client/src/containers/analysis-eudr/filters/more-filters/index.tsx
@@ -101,7 +101,11 @@ const MoreFilters = () => {
   ]);
 
   const { data: materialOptions, isLoading: materialOptionsIsLoading } = useEUDRMaterialsTree(
-    undefined,
+    {
+      producerIds: selectedFilters.suppliers.map((supplier) => supplier.value),
+      originIds: selectedFilters.origins.map((origin) => origin.value),
+      geoRegionIds: selectedFilters.plots.map((plot) => plot.value),
+    },
     {
       ...DEFAULT_QUERY_OPTIONS,
       select: (_materials) => {
@@ -118,22 +122,37 @@ const MoreFilters = () => {
   );
 
   const { data: originOptions, isLoading: originOptionsIsLoading } = useEUDRAdminRegionsTree(
-    undefined,
+    {
+      producerIds: selectedFilters.suppliers.map((supplier) => supplier.value),
+      materialIds: selectedFilters.materials.map((material) => material.value),
+      geoRegionIds: selectedFilters.plots.map((plot) => plot.value),
+    },
     DEFAULT_QUERY_OPTIONS,
   );
 
   const { data: supplierOptions, isLoading: supplierOptionsIsLoading } = useEUDRSuppliers(
-    undefined,
+    {
+      originIds: selectedFilters.origins.map((origin) => origin.value),
+      materialIds: selectedFilters.materials.map((material) => material.value),
+      geoRegionIds: selectedFilters.plots.map((plot) => plot.value),
+    },
     {
       ...DEFAULT_QUERY_OPTIONS,
       initialData: [],
     },
   );
 
-  const { data: plotOptions, isLoading: plotOptionsIsLoading } = useEUDRPlotsTree(undefined, {
-    ...DEFAULT_QUERY_OPTIONS,
-    initialData: [],
-  });
+  const { data: plotOptions, isLoading: plotOptionsIsLoading } = useEUDRPlotsTree(
+    {
+      producerIds: selectedFilters.suppliers.map((supplier) => supplier.value),
+      originIds: selectedFilters.origins.map((origin) => origin.value),
+      materialIds: selectedFilters.materials.map((material) => material.value),
+    },
+    {
+      ...DEFAULT_QUERY_OPTIONS,
+      initialData: [],
+    },
+  );
 
   useEffect(() => {
     const counters = Object.values(filters).map((value) => value.length);

diff --git a/client/src/hooks/eudr/index.ts b/client/src/hooks/eudr/index.ts
@@ -3,12 +3,18 @@ import { useQuery } from '@tanstack/react-query';
 import { apiService } from 'services/api';
 
 import type { Supplier as SupplierRow } from '@/containers/analysis-eudr/supplier-list-table/table';
-import type { AdminRegionsTreesParams } from '@/hooks/admin-regions';
 import type { MaterialTreeItem, OriginRegion, Supplier } from '@/types';
 import type { UseQueryOptions } from '@tanstack/react-query';
 
+interface EUDRParams {
+  producerIds?: string[];
+  originIds?: string[];
+  materialIds?: string[];
+  geoRegionIds?: string[];
+}
+
 export const useEUDRSuppliers = <T = Supplier[]>(
-  params?: { producersIds: string[]; originsId: string[]; materialsId: string[] },
+  params?: EUDRParams,
   options: UseQueryOptions<Supplier[], unknown, T> = {},
 ) => {
   return useQuery(
@@ -28,12 +34,7 @@ export const useEUDRSuppliers = <T = Supplier[]>(
 };
 
 export const usePlotGeometries = <T = Supplier[]>(
-  params?: {
-    producerIds: string[];
-    originIds: string[];
-    materialIds: string[];
-    geoRegionIds: string[];
-  },
+  params?: EUDRParams,
   options: UseQueryOptions<Supplier[], unknown, T> = {},
 ) => {
   return useQuery(
@@ -55,7 +56,7 @@ export const usePlotGeometries = <T = Supplier[]>(
 };
 
 export const useEUDRMaterialsTree = <T = MaterialTreeItem[]>(
-  params?: { producersIds: string[]; originsId: string[]; materialsId: string[] },
+  params?: EUDRParams,
   options: UseQueryOptions<MaterialTreeItem[], unknown, T> = {},
 ) => {
   return useQuery(
@@ -75,7 +76,7 @@ export const useEUDRMaterialsTree = <T = MaterialTreeItem[]>(
 };
 
 export const useEUDRAdminRegionsTree = <T = OriginRegion[]>(
-  params: AdminRegionsTreesParams,
+  params: EUDRParams,
   options: UseQueryOptions<OriginRegion[], unknown, T> = {},
 ) => {
   const query = useQuery(
@@ -97,7 +98,7 @@ export const useEUDRAdminRegionsTree = <T = OriginRegion[]>(
 };
 
 export const useEUDRPlotsTree = <T = OriginRegion[]>(
-  params: AdminRegionsTreesParams,
+  params: EUDRParams,
   options: UseQueryOptions<OriginRegion[], unknown, T> = {},
 ) => {
   const query = useQuery(