From cdf3d07d85c983165f11b66e72e38bf7cbcfd6e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Fri, 30 Aug 2024 13:01:16 +0200
Subject: [PATCH] Translate the EEZ names

---
 .../map/content/map/popup/eez/index.tsx       | 20 +++++++++++++-
 .../map/content/map/popup/index.tsx           | 26 ++++++++++++++++---
 2 files changed, 41 insertions(+), 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
index 6b2ede50..3d96264a 100644
--- 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
index 7ebb432d..4db5a3c1 100644
--- 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>