From cde9a2459cd8772006000971d950b4beca4785f4 Mon Sep 17 00:00:00 2001
From: peter williams <peter.williams@canada.ca>
Date: Thu, 31 Oct 2024 11:20:21 -0400
Subject: [PATCH]  add language button

closes(53)
---
 src/components/GeoViewMap.tsx |  3 ---
 src/components/MapBuilder.tsx | 23 ++++++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/GeoViewMap.tsx b/src/components/GeoViewMap.tsx
index a75b150..666a5ac 100644
--- a/src/components/GeoViewMap.tsx
+++ b/src/components/GeoViewMap.tsx
@@ -4,8 +4,6 @@ import MenuIcon from '@mui/icons-material/Menu';
 import DrawerTabs from './DrawerTabs';
 import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider';
 import { MapRenderer } from './MapRenderer';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { useNavigate } from 'react-router-dom';
 import { AppToolbar } from './AppToolbar';
 import { useSearchParams } from "react-router-dom";
 import { DEFAULT_CONFIG_FILE } from '@/constants';
@@ -20,7 +18,6 @@ interface GeoViewMapProps {
 
 function GeoViewMap(props: GeoViewMapProps) {
   const cgpvContext = useContext(CGPVContext);
-  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
 
 
diff --git a/src/components/MapBuilder.tsx b/src/components/MapBuilder.tsx
index fe71112..e26252f 100644
--- a/src/components/MapBuilder.tsx
+++ b/src/components/MapBuilder.tsx
@@ -13,7 +13,7 @@ import { useContext, useState } from 'react';
 import { CGPVContext } from '@/providers/cgpvContextProvider/CGPVContextProvider';
 import _ from 'lodash';
 import PillsAutoComplete from './PillsAutoComplete';
-import { componentsOptions, footerTabslist, navBarOptions, appBarOptions, mapInteractionOptions, mapProjectionOptions, zoomOptions, themeOptions, CONFIG_FILES_LIST, corePackagesOptions } from '@/constants';
+import { componentsOptions, footerTabslist, languageOptions, navBarOptions, appBarOptions, mapInteractionOptions, mapProjectionOptions, zoomOptions, themeOptions, CONFIG_FILES_LIST, corePackagesOptions } from '@/constants';
 import SingleSelectComplete from './SingleSelectAutoComplete';
 import { ConfigSaveUploadButtons } from './ConfigSaveUploadButtons';
 
@@ -25,11 +25,13 @@ export function MapBuilder() {
   if (!cgpvContext) {
     throw new Error('CGPVContent must be used within a CGPVProvider');
   }
-
-  const { configJson,handleApplyStateToConfigFile, handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
+  const { mapId } = cgpvContext;
+  const { configJson, handleApplyStateToConfigFile,handleConfigFileChange, handleConfigJsonChange, configFilePath, mapWidth, mapHeight, setMapWidth, setMapHeight } = cgpvContext;
 
   const [modifiedConfigJson, setModifiedConfigJson] = useState<object>(configJson);
   const [isModified, setIsModified] = useState<boolean>(false);
+  const [isEn, setEn] = useState<boolean>(true);
+
 
   const _updateConfigProperty = (property: string, value: any) => {
     const newConfig = { ...modifiedConfigJson };
@@ -73,8 +75,8 @@ export function MapBuilder() {
     handleConfigJsonChange(modifiedConfigJson);
     setIsModified(false);
   }
-
-  return (
+  
+  return(
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
 
       <ConfigSaveUploadButtons />
@@ -129,7 +131,14 @@ export function MapBuilder() {
           </Box>
         </FormGroup>
 
-        <Divider sx={{ my: 2 }} />
+         <SingleSelectComplete
+          options={languageOptions}
+          defaultValue={(isEn) ? 'English' : 'French'}
+          onChange={(event) => { 
+           (isEn) ? cgpv.api.maps[mapId].setLanguage('fr') : cgpv.api.maps[mapId].setLanguage('en');
+           setEn(!isEn);
+          }}
+        label="Change Language" placeholder="" />
 
         <SingleSelectComplete
           options={themeOptions}
@@ -229,4 +238,4 @@ export function MapBuilder() {
       </FormControl>
     </Box>
   );
-}
+}
\ No newline at end of file