Adding ability to change language dynamically

Author: alan412

src/App.tsx

@@ -47,7 +47,7 @@ import * as ChangeFramework from './blocks/utils/change_framework'
 import { mutatorOpenListener } from './blocks/mrc_param_container'
 import { TOOLBOX_UPDATE_EVENT } from './blocks/mrc_mechanism_component_holder';
 import { antdThemeFromString } from './reactComponents/ThemeModal';
-import i18n from './i18n/config';
+import { useTranslation } from 'react-i18next';
 
 /** Storage key for shown toolbox categories. */
 const SHOWN_TOOLBOX_CATEGORIES_KEY = 'shownPythonToolboxCategories';
@@ -87,6 +87,8 @@ const LAYOUT_BACKGROUND_COLOR = '#0F0';
  * project management, and user interface layout.
  */
 const App: React.FC = (): React.JSX.Element => {
+  const { t } = useTranslation();
+    
   const [alertErrorMessage, setAlertErrorMessage] = React.useState('');
   const [storage, setStorage] = React.useState<commonStorage.Storage | null>(null);
   const [currentModule, setCurrentModule] = React.useState<commonStorage.Module | null>(null);
@@ -102,7 +104,6 @@ const App: React.FC = (): React.JSX.Element => {
   const [rightCollapsed, setRightCollapsed] = React.useState(false);
   const [theme, setTheme] = React.useState('dark');
 
-
   const blocksEditor = React.useRef<editor.Editor | null>(null);
   const generatorContext = React.useRef<GeneratorContext | null>(null);
   const blocklyComponent = React.useRef<BlocklyComponentType | null>(null);
@@ -291,7 +292,8 @@ const App: React.FC = (): React.JSX.Element => {
     if (blocksEditor.current) {
       blocksEditor.current.loadModuleBlocks(currentModule);
     }
-  }, [currentModule]);
+  }, [currentModule]); 
+
 
   // Initialize Blockly workspace and editor when component and storage are ready
   React.useEffect(() => {

src/blocks/mrc_call_python_function.ts

@@ -421,12 +421,14 @@ const CALL_PYTHON_FUNCTION = {
       returnType: this.mrcReturnType,
       args: [],
     };
-    this.mrcArgs.forEach((arg) => {
-      extraState.args.push({
-        'name': arg.name,
-        'type': arg.type,
+    if(this.mrcArgs){
+      this.mrcArgs.forEach((arg) => {
+        extraState.args.push({
+          'name': arg.name,
+          'type': arg.type,
+        });
       });
-    });
+    }
     if (this.mrcTooltip) {
       extraState.tooltip = this.mrcTooltip;
     }

src/blocks/mrc_component.ts

@@ -82,12 +82,14 @@ const COMPONENT = {
     const extraState: ComponentExtraState = {
     };
     extraState.params = [];
-    this.mrcArgs.forEach((arg) => {
-      extraState.params!.push({
-        'name': arg.name,
-        'type': arg.type,
+    if(this.mrcArgs){
+      this.mrcArgs.forEach((arg) => {
+        extraState.params!.push({
+          'name': arg.name,
+          'type': arg.type,
+        });
       });
-    });
+    }
     if (this.mrcImportModule) {
       extraState.importModule = this.mrcImportModule;
     }

src/i18n/locales/en/translation.json

@@ -20,6 +20,20 @@
         "newItemPlaceholder": "Add Module",
         "search": "Search..."
     },
+    "PROJECT": "Project",
+    "SAVE": "Save",
+    "DEPLOY": "Deploy",
+    "MANAGE": "Manage",
+    "EXPLORER": "Explorer",
+    "ROBOT": "Robot",
+    "SETTINGS": "Settings",
+    "WPI_TOOLBOX": "WPI Toolbox",
+    "THEME": "Theme",
+    "LANGUAGE": "Language",
+    "ENGLISH": "English",
+    "SPANISH": "Spanish",
+    "HELP": "Help",
+    "ABOUT": "About",
     "BLOCKLY":{
         "OF_TYPE": "of type",
         "WITH": "with",

src/i18n/locales/es/translation.json

@@ -15,6 +15,20 @@
     "example_mechanism": "Por ejemplo: DisparadorDePiezas",
     "example_opmode": "Por ejemplo: AutoEstacionarYDisparar",
     "example_project": "Por ejemplo: RobotRuedasLocas",
+    "PROJECT": "Proyecto",
+    "SAVE": "Guardar",
+    "DEPLOY": "Desplegar",
+    "MANAGE": "Gestionar",
+    "EXPLORER": "Explorador",
+    "ROBOT": "Robot",
+    "SETTINGS": "Configuración",
+    "WPI_TOOLBOX": "Caja de Herramientas WPI",
+    "THEME": "Tema",
+    "LANGUAGE": "Idioma",
+    "ENGLISH": "Inglés",
+    "SPANISH": "Español",
+    "HELP": "Ayuda",
+    "ABOUT": "Acerca de",
     "addTabDialog": {
         "title": "Agregar Pestaña",
         "newItemPlaceholder": "Agregar Módulo",

src/reactComponents/BlocklyComponent.tsx

@@ -84,7 +84,6 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
       const workspaceRef = React.useRef<Blockly.WorkspaceSvg | null>(null);
 
       const { t, i18n } = useTranslation();
-      // const { t } = useTranslation();
 
 
       const getBlocklyTheme = (): Blockly.Theme => {
@@ -135,6 +134,46 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
         },
       });
 
+      /** Updates the Blockly locale when the language changes. */
+      const updateBlocklyLocale = (): void => {
+        if (!workspaceRef.current) {
+          return;
+        }
+
+        // Save the current workspace state
+        const workspaceXml = Blockly.Xml.workspaceToDom(workspaceRef.current);
+        
+        // Dispose of the current workspace
+        workspaceRef.current.dispose();
+        
+        // Set new locale
+        switch (i18n.language) {
+          case 'es':
+            Blockly.setLocale(Es as any);
+            break;
+          case 'en':
+            Blockly.setLocale(En as any);
+            break;
+          default:
+            Blockly.setLocale(En as any);
+            break;
+        }
+        
+        // Apply custom tokens
+        Blockly.setLocale(customTokens(t));
+        
+        // Re-create workspace with new locale
+        const workspaceConfig = createWorkspaceConfig();
+        const newWorkspace = Blockly.inject(blocklyDiv.current!, workspaceConfig);
+        workspaceRef.current = newWorkspace;
+        
+        // Restore the workspace state (this will create blocks with new locale)
+        Blockly.Xml.domToWorkspace(workspaceXml, newWorkspace);
+        
+        // Re-apply any event listeners that were on the original workspace
+        // You may need to call your setup functions here again
+      };
+
       /** Initializes the Blockly workspace. */
       const initializeWorkspace = (): void => {
         if (!blocklyDiv.current) {
@@ -154,6 +193,7 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
             break;
         }
         Blockly.setLocale(customTokens(t));
+        
         // Create workspace
         const workspaceConfig = createWorkspaceConfig();
         const workspace = Blockly.inject(blocklyDiv.current, workspaceConfig);
@@ -212,6 +252,12 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
         }
       }, [theme]);
 
+      // Add this: Update locale when language changes
+      React.useEffect(() => {
+        console.log('Updating Blockly locale for language:', i18n.language);
+        updateBlocklyLocale();
+      }, [i18n.language, t]);
+
       // Handle workspace resize
       React.useEffect(() => {
         return setupResizeObserver();

src/reactComponents/Header.tsx

@@ -21,6 +21,7 @@
 import * as Antd from 'antd';
 import * as commonStorage from '../storage/common_storage';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 /** Function type for setting string values. */
 type StringFunction = (input: string) => void;
@@ -50,6 +51,7 @@ const TEXT_PADDING_LEFT = 20;
  */
 export default function Header(props: HeaderProps): React.JSX.Element {
   const { token } = Antd.theme.useToken();
+  const { t } = useTranslation();
 
   const isDarkTheme = token.colorBgLayout === '#000000';
 
@@ -104,7 +106,7 @@ export default function Header(props: HeaderProps): React.JSX.Element {
             fontWeight: 'normal',
           }}
         >
-          Project: {getProjectName()}
+          {t("PROJECT")}: {getProjectName()}
         </Antd.Typography>
         {renderErrorAlert()}
       </Antd.Flex>

src/reactComponents/Menu.tsx

@@ -35,6 +35,8 @@ import {
   QuestionCircleOutlined,
   InfoCircleOutlined,
   BgColorsOutlined,
+  GlobalOutlined,
+  CheckOutlined,
 } from '@ant-design/icons';
 import FileManageModal from './FileManageModal';
 import ProjectManageModal from './ProjectManageModal';
@@ -92,7 +94,7 @@ function getDivider(): MenuItem {
 /**
  * Generates menu items for a given project.
  */
-function getMenuItems(t: (key: string) => string, project: commonStorage.Project): MenuItem[] {
+function getMenuItems(t: (key: string) => string, project: commonStorage.Project, currentLanguage: string): MenuItem[] {
   const mechanisms: MenuItem[] = [];
   const opmodes: MenuItem[] = [];
 
@@ -123,24 +125,35 @@ function getMenuItems(t: (key: string) => string, project: commonStorage.Project
   opmodes.push(getItem('Manage...', 'manageOpmodes'));
 
   return [
-    getItem(t('Project'), 'project', <FolderOutlined />, [
-      getItem(t('Save'), 'save', <SaveOutlined />),
-      getItem(t('Deploy'), 'deploy', undefined, undefined, true),
+    getItem(t('PROJECT'), 'project', <FolderOutlined />, [
+      getItem(t('SAVE'), 'save', <SaveOutlined />),
+      getItem(t('DEPLOY'), 'deploy', undefined, undefined, true),
       getDivider(),
-      getItem(t('Manage') + '...', 'manageProjects'),
+      getItem(t('MANAGE') + '...', 'manageProjects'),
     ]),
-    getItem(t('Explorer'), 'explorer', <FileOutlined />, [
-      getItem(t('Robot'), project.robot.modulePath, <RobotOutlined />),
-      getItem(t('Mechanisms'), 'mechanisms', <BlockOutlined />, mechanisms),
-      getItem(t('OpModes'), 'opmodes', <CodeOutlined />, opmodes),
+    getItem(t('EXPLORER'), 'explorer', <FileOutlined />, [
+      getItem(t('ROBOT'), project.robot.modulePath, <RobotOutlined />),
+      getItem(t('MECHANISMS'), 'mechanisms', <BlockOutlined />, mechanisms),
+      getItem(t('OPMODES'), 'opmodes', <CodeOutlined />, opmodes),
     ]),
-    getItem(t('Settings'), 'settings', <SettingOutlined />, [
-      getItem(t('WPI toolbox'), 'wpi_toolbox'),
-      getItem(t('Theme') + '...', 'theme', <BgColorsOutlined />)
+    getItem(t('SETTINGS'), 'settings', <SettingOutlined />, [
+      getItem(t('WPI_TOOLBOX'), 'wpi_toolbox'),
+      getItem(t('THEME') + '...', 'theme', <BgColorsOutlined />),
+      getItem(t('LANGUAGE'), 'language', <GlobalOutlined />, [
+        getItem(
+          t('ENGLISH'), 
+          'setlang:en', 
+          currentLanguage === 'en' ? <CheckOutlined /> : undefined
+        ),
+        getItem(
+          t('SPANISH'), 
+          'setlang:es', 
+          currentLanguage === 'es' ? <CheckOutlined /> : undefined
+        ),
+      ]),
     ]),
-    getItem(t('Help'), 'help', <QuestionCircleOutlined />, [
-      getItem(t('About') + '...', 'about', <InfoCircleOutlined />
-),
+    getItem(t('HELP'), 'help', <QuestionCircleOutlined />, [
+      getItem(t('ABOUT') + '...', 'about', <InfoCircleOutlined />),
     ]),
   ];
 }
@@ -150,7 +163,7 @@ function getMenuItems(t: (key: string) => string, project: commonStorage.Project
  * Provides access to mechanisms, opmodes, and project management functionality.
  */
 export function Component(props: MenuProps): React.JSX.Element {
-  const {t} = I18Next.useTranslation();
+  const {t, i18n} = I18Next.useTranslation();
 
   const [projects, setProjects] = React.useState<commonStorage.Project[]>([]);
   const [menuItems, setMenuItems] = React.useState<MenuItem[]>([]);
@@ -264,8 +277,12 @@ export function Component(props: MenuProps): React.JSX.Element {
       props.openWPIToolboxSettings();
     } else if (key === 'theme') {
       setThemeModalOpen(true);
+    } else if (key.startsWith('setlang:')) {
+      const lang = key.split(':')[1];
+      i18n.changeLanguage(lang);
     } else {
       // TODO: Handle other menu actions
+
       console.log(`Selected key that wasn't module: ${key}`);
     }
   };
@@ -294,14 +311,14 @@ export function Component(props: MenuProps): React.JSX.Element {
     fetchMostRecentProject();
   }, [projects]);
 
-  // Update menu items and save project when project changes
+  // Update menu items and save project when project or language changes
   React.useEffect(() => {
     if (props.project) {
       setMostRecentProject();
-      setMenuItems(getMenuItems(t, props.project));
+      setMenuItems(getMenuItems(t, props.project, i18n.language));
       setNoProjects(false);
     }
-  }, [props.project]);
+  }, [props.project, i18n.language]); // Add i18n.language dependency
 
   return (
     <>