Merge pull request #47 from Vizzuality/SKY30-98-fe-add-the-labels-to-…

…the-map

[SKY30-98]: toggles on/off labels in map

frontend/src/containers/data-tool/content/map/index.tsx

@@ -9,6 +9,7 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import Map, { ZoomControls, Attributions, DrawControls, Drawing } from '@/components/map';
 import SidebarContent from '@/components/sidebar-content';
 // import Popup from '@/containers/map/popup';
+import LabelsManager from '@/containers/data-tool/content/map/labels-manager';
 import LayersToolbox from '@/containers/data-tool/content/map/layers-toolbox';
 import { useSyncMapSettings } from '@/containers/data-tool/content/map/sync-settings';
 import { cn } from '@/lib/classnames';
@@ -99,6 +100,7 @@ const DataToolMap: React.FC = () => {
           >
             {/* <Popup /> */}
           </div>
+          <LabelsManager />
           <LayersToolbox />
           <ZoomControls />
           <DrawControls />

frontend/src/containers/data-tool/content/map/labels-manager/index.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useEffect } from 'react';
+
+import { useMap } from 'react-map-gl';
+
+import { useSyncMapSettings } from '@/containers/data-tool/content/map/sync-settings';
+
+const LABELS_LAYER_ID = 'country-label';
+
+const LabelsManager = () => {
+  const { default: mapRef } = useMap();
+  const [{ labels }] = useSyncMapSettings();
+
+  const toggleLabels = useCallback(() => {
+    if (!mapRef) return;
+    const map = mapRef.getMap();
+
+    map.setLayoutProperty(LABELS_LAYER_ID, 'visibility', labels ? 'visible' : 'none');
+  }, [mapRef, labels]);
+
+  const handleStyleLoad = useCallback(() => {
+    toggleLabels();
+  }, [toggleLabels]);
+
+  useEffect(() => {
+    if (!mapRef) return;
+    mapRef.on('style.load', handleStyleLoad);
+
+    return () => {
+      mapRef.off('style.load', handleStyleLoad);
+    };
+  }, [mapRef, handleStyleLoad]);
+
+  useEffect(() => {
+    if (!mapRef) return;
+    toggleLabels();
+  }, [mapRef, toggleLabels]);
+
+  return null;
+};
+
+export default LabelsManager;

frontend/src/containers/data-tool/content/map/layers-toolbox/layers-list/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { ComponentProps, useCallback } from 'react';
 
 import { LuChevronDown, LuChevronUp } from 'react-icons/lu';
 
@@ -8,6 +8,7 @@ import { Switch } from '@/components/ui/switch';
 import {
   useSyncMapLayers,
   useSyncMapLayerSettings,
+  useSyncMapSettings,
 } from '@/containers/data-tool/content/map/sync-settings';
 import { useGetLayers } from '@/types/generated/layer';
 import { LayerResponseDataObject } from '@/types/generated/strapi.schemas';
@@ -19,6 +20,7 @@ const TABS_ICONS_CLASSES = 'w-5 h-5 -translate-y-[2px]';
 const LayersDropdown = (): JSX.Element => {
   const [activeLayers, setMapLayers] = useSyncMapLayers();
   const [, setLayerSettings] = useSyncMapLayerSettings();
+  const [{ labels }, setMapSettings] = useSyncMapSettings();
 
   const layersQuery = useGetLayers(
     {
@@ -51,6 +53,16 @@ const LayersDropdown = (): JSX.Element => {
     [activeLayers, setLayerSettings, setMapLayers]
   );
 
+  const handleLabelsChange = useCallback(
+    (active: Parameters<ComponentProps<typeof Switch>['onCheckedChange']>[0]) => {
+      setMapSettings((prev) => ({
+        ...prev,
+        labels: active,
+      }));
+    },
+    [setMapSettings]
+  );
+
   return (
     <div className="space-y-3">
       <Collapsible defaultOpen={Boolean(activeLayers.length)}>
@@ -83,7 +95,7 @@ const LayersDropdown = (): JSX.Element => {
           </ul>
         </CollapsibleContent>
       </Collapsible>
-      <Collapsible>
+      <Collapsible defaultOpen={labels}>
         <CollapsibleTrigger
           className={`${COLLAPSIBLE_TRIGGER_CLASSES} pb-0 data-[state=open]:pb-2`}
         >
@@ -94,11 +106,7 @@ const LayersDropdown = (): JSX.Element => {
         <CollapsibleContent>
           <ul className="my-3 flex flex-col space-y-5">
             <li className="flex items-start gap-2">
-              <Switch
-                id="labels-switch"
-                // checked={isActive}
-                onCheckedChange={() => {}}
-              />
+              <Switch id="labels-switch" checked={labels} onCheckedChange={handleLabelsChange} />
               <Label htmlFor="labels-switch" className="cursor-pointer">
                 Labels
               </Label>

frontend/src/containers/data-tool/content/map/sync-settings.ts

@@ -7,8 +7,10 @@ import { LayerSettings } from '@/types/layers';
 
 const DEFAULT_SYNC_MAP_SETTINGS: {
   bbox: LngLatBoundsLike;
+  labels: boolean;
 } = {
   bbox: null,
+  labels: true,
 };
 
 export const useSyncMapSettings = () => {