Translate the EEZ names

Vizzuality · Aug 30, 2024 · cdf3d07 · cdf3d07
1 parent 892b0e6
commit cdf3d07
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/frontend/src/containers/map/content/map/popup/eez/index.tsx b/frontend/src/containers/map/content/map/popup/eez/index.tsx
@@ -210,6 +210,24 @@ const EEZLayerPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
     return '-';
   }, [locale, totalCumSumProtectedArea, totalMarineArea, locationsData]);
 
+  const EEZName = useMemo(() => {
+    let name = null;
+
+    if (!DATA) {
+      return name;
+    }
+
+    if (locale === 'es') {
+      name = DATA.GEONAME_ES;
+    }
+
+    if (locale === 'fr') {
+      name = DATA.GEONAME_FR;
+    }
+
+    return name ?? DATA.GEONAME;
+  }, [locale, DATA]);
+
   // handle renderer
   const handleMapRender = useCallback(() => {
     setRendered(map?.loaded() && map?.areTilesLoaded());
@@ -244,7 +262,7 @@ const EEZLayerPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
 
   return (
     <div className="space-y-2">
-      <h3 className="text-xl font-semibold">{DATA?.GEONAME}</h3>
+      <h3 className="text-xl font-semibold">{EEZName}</h3>
       {isFetchingLocations && <span className="text-sm">{t('loading')}</span>}
       {isEmptyLocations && <span className="text-sm">{t('no-data-available')}</span>}
       {!isEmptyLocations && (

diff --git a/frontend/src/containers/map/content/map/popup/index.tsx b/frontend/src/containers/map/content/map/popup/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Popup } from 'react-map-gl';
 
@@ -71,6 +71,26 @@ const PopupContainer: FCWithMessages = () => {
     }
   );
 
+  const hoverTooltipContent = useMemo(() => {
+    const properties = popup?.features?.find(({ source }) => source === 'ezz-source')?.properties;
+
+    let content = null;
+
+    if (!properties) {
+      return content;
+    }
+
+    if (locale === 'es') {
+      content = properties.GEONAME_ES;
+    }
+
+    if (locale === 'fr') {
+      content = properties.GEONAME_FR;
+    }
+
+    return content ?? properties.GEONAME;
+  }, [locale, popup]);
+
   const closePopup = useCallback(() => {
     setPopup({});
   }, [setPopup]);
@@ -138,9 +158,7 @@ const PopupContainer: FCWithMessages = () => {
           </Select>
         )}
         {isHoveredTooltip && (
-          <div className="font-mono text-sm text-gray-500">
-            {popup.features.find(({ source }) => source === 'ezz-source')?.properties?.GEONAME}
-          </div>
+          <div className="font-mono text-sm text-gray-500">{hoverTooltipContent}</div>
         )}
         {isClickedTooltip && selectedLayerId && <PopupItem id={selectedLayerId} />}
       </div>