Merge pull request #319 from Vizzuality/SKY30-480-fe-only-display-the…

…-layers-matching-the-tab-in-the-legend Only show relevant layers in the legend
Vizzuality · Oct 11, 2024 · 57e0cda · 57e0cda
2 parents 5728788 + 7bd0205
commit 57e0cda
Showing 1 changed file with 33 additions and 3 deletions.
diff --git a/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx
@@ -13,14 +13,18 @@ import {
   useSyncMapLayerSettings,
   useSyncMapLayers,
 } from '@/containers/map/content/map/sync-settings';
+import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
 import { cn } from '@/lib/classnames';
 import ArrowDownIcon from '@/styles/icons/arrow-down.svg';
 import ArrowTopIcon from '@/styles/icons/arrow-top.svg';
 import CloseIcon from '@/styles/icons/close.svg';
 import OpacityIcon from '@/styles/icons/opacity.svg';
 import { FCWithMessages } from '@/types';
 import { useGetLayers } from '@/types/generated/layer';
-import { LayerResponseDataObject } from '@/types/generated/strapi.schemas';
+import {
+  LayerListResponseDataItem,
+  LayerResponseDataObject,
+} from '@/types/generated/strapi.schemas';
 import { LayerTyped } from '@/types/layers';
 
 import LegendItem from './item';
@@ -31,12 +35,38 @@ const Legend: FCWithMessages = () => {
 
   const [activeLayers, setMapLayers] = useSyncMapLayers();
   const [layerSettings, setLayerSettings] = useSyncMapLayerSettings();
+  const [{ tab }] = useSyncMapContentSettings();
 
-  const layersQuery = useGetLayers(
+  const layersQuery = useGetLayers<LayerListResponseDataItem[]>(
     {
       locale,
       sort: 'title:asc',
-      populate: 'legend_config,legend_config.items',
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      fields: ['title'],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      populate: {
+        legend_config: {
+          populate: {
+            items: true,
+          },
+        },
+        environment: {
+          fields: ['slug'],
+        },
+      },
+      filters: {
+        ...(tab !== 'summary'
+          ? {
+              environment: {
+                slug: {
+                  $in: tab,
+                },
+              },
+            }
+          : {}),
+      },
     },
     {
       query: {