From 772abb726fa0ea685a4110c23d58fbe246b5a292 Mon Sep 17 00:00:00 2001
From: Pjero Nizetic <pjero@janeasystems.com>
Date: Wed, 8 May 2024 19:03:43 +0200
Subject: [PATCH] Use dynamic language tag

---
 src/pages/conversion/places-preview-map/index.js | 12 ++++++------
 src/pages/conversion/places-preview-map/utils.js |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/pages/conversion/places-preview-map/index.js b/src/pages/conversion/places-preview-map/index.js
index 518b73d..88ffea2 100644
--- a/src/pages/conversion/places-preview-map/index.js
+++ b/src/pages/conversion/places-preview-map/index.js
@@ -1,16 +1,16 @@
 import { Map, control, layer, source } from 'azure-maps-control';
 // import { indoor, control as indoorControl } from 'azure-maps-indoor';
-import { getDomain, useConversionStore, useUserStore } from 'common/store';
+import { getDomain, useConversionStore, useLevelsStore, useUserStore } from 'common/store';
 import { useEffect, useMemo, useState } from 'react';
 import LevelSelector from './level-selector';
-import { calculateBoundingBox, getFillStyles, getLineStyles, getTextStyle, processZip } from './utils';
+import { calculateBoundingBox, getFeatureLabel, getFillStyles, getLineStyles, getTextStyle, processZip } from './utils';
 
 import 'azure-maps-control/dist/atlas.min.css';
 
 const PlacesPreviewMap = ({ style }) => {
   const [geography, subscriptionKey] = useUserStore(s => [s.geography, s.subscriptionKey]);
-
   const [imdfPackageLocation] = useConversionStore(s => [s.imdfPackageLocation]);
+  const [language] = useLevelsStore(s => [s.language]);
 
   const [units, setUnits] = useState({ features: [] });
   const [levels, setLevels] = useState({ features: [] });
@@ -61,7 +61,7 @@ const PlacesPreviewMap = ({ style }) => {
           if (!groupedFeatures[category]) groupedFeatures[category] = { features: [] };
           groupedFeatures[category].features.push({
             ...feature,
-            properties: { ...feature.properties, label: feature.properties.name.en },
+            properties: { ...feature.properties, label: getFeatureLabel(feature, language) },
           });
         });
 
@@ -120,7 +120,7 @@ const PlacesPreviewMap = ({ style }) => {
     return () => {
       map.dispose();
     };
-  }, [units, levels, selectedLevel, subscriptionKey, geography]);
+  }, [units, levels, selectedLevel, subscriptionKey, geography, language]);
 
   const handleLevelChange = levelId => {
     setSelectedLevelId(levelId);
@@ -131,7 +131,7 @@ const PlacesPreviewMap = ({ style }) => {
       <LevelSelector
         selectedKey={selectedLevelId}
         onChange={handleLevelChange}
-        options={levels.features.map(level => ({ key: level.id, text: level.properties.name.en }))}
+        options={levels.features.map(level => ({ key: level.id, text: getFeatureLabel(level, language) }))}
       />
       <div id="azure-maps-container" style={{ width: '100%', height: '500px', ...style }} />
     </div>
diff --git a/src/pages/conversion/places-preview-map/utils.js b/src/pages/conversion/places-preview-map/utils.js
index 13aa06a..3be100f 100644
--- a/src/pages/conversion/places-preview-map/utils.js
+++ b/src/pages/conversion/places-preview-map/utils.js
@@ -170,3 +170,7 @@ export async function processZip(url) {
     }
   });
 }
+
+export const getFeatureLabel = (feature, language) => {
+  return feature?.properties?.name?.[language];
+};