Implemented User Language Toggle Feature

src/components/BlockCategories/Logic.jsx

@@ -4,3 +4,5 @@ export const Logic = `
     <block type="controls_if"></block>
   </category>
 `;
+
+// Temp change

src/components/BlocklyComponent.jsx

@@ -1,16 +1,44 @@
 // Updated BlocklyComponent.jsx
 import React, { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
 import Blockly from 'blockly';
 import { Logic } from './BlockCategories/Logic';
 import { Loops } from './BlockCategories/Loops';
 import { Math } from './BlockCategories/Math';
 import { Text } from './BlockCategories/Text';
 import initializeBlockly from './InitializeBlockly';  // import the function
 
+import * as en from 'blockly/msg/en'; // Import English messages
+import * as fr from 'blockly/msg/fr'; // Import French messages
+// import countryFlagEmoji from "country-flag-emoji";
+
 const BlocklyComponent = () => {
+
+  const language = useSelector(state => state.language);
+  // const ukEmoji = countryFlagEmoji.get('GB');
+  // const franceEmoji = countryFlagEmoji.get('FR');
+
   const blocklyRef = useRef(null);
 
+  const toggleLanguage = (selectedLanguage) => {
+    dispatch(setLanguage(selectedLanguage));
+    updateBlocklyLocale(selectedLanguage);
+  };
+
+  const updateBlocklyLocale = (lang) => {
+    const languageMap = {
+      en,
+      fr,
+    };
+    Blockly.setLocale(languageMap[lang]);
+  };
+
   useEffect(() => {
+
+    updateBlocklyLocale(language); // Update Blockly locale based on the initial language
+
+
     if (blocklyRef.current === null) {
       // Initialize Blockly with English
         Blockly.setLocale('en');
@@ -21,17 +49,22 @@ const BlocklyComponent = () => {
           ${Loops}
           ${Math}
           ${Text}
+
         </xml>
       `;
       initializeBlockly(toolboxXml);  // Initialize Blockly using the separate function
       blocklyRef.current = true;
     }
-  }, []);
+  }, [language]);
 
   return (
     <div style={{ width: '100%', height: '480px' }}>
-      <h1 style={{ display: 'inline-block', fontSize: '14px', marginRight: '500px' }}>Blockly Toolbox</h1>
-      <h1 style={{ display: 'inline-block', fontSize: '14px' }}>Blockly Workspace</h1>
+      <h1 style={{ display: 'inline-block', fontSize: '14px', marginRight: '500px' }}>
+        {language === 'en' ? 'Blockly Toolbox' : ' Boîte à outils Blockly'}
+      </h1>
+      <h1 style={{ display: 'inline-block', fontSize: '14px' }}>
+        {language === 'en' ? 'Blockly Workspace' : 'Espace de travail Blockly'}
+      </h1>
       <div className="highlighted" id="blocklyDiv" style={{ height: '100%', width: '100%', position: 'relative' }}></div>      
     </div>
   );

src/components/Canvas.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Card } from '@mui/material';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
+import { useSelector, useDispatch } from 'react-redux';
 
 // Import the button components
 import FlagButton from './Canvas/FlagButton';
@@ -13,9 +14,13 @@ import ZoomOut from './Canvas/ZoomOut';
 import FullScreen from './Canvas/FullScreen';
 
 const Canvas = () => {
+
+  const language = useSelector(state => state.language); // Language
+  const dispatch = useDispatch(); //dispatch fore event click
+
   return (
     <Card class="highlighted" style={{ position: 'relative', width: '700px', margin: '28px auto', height: '600px', overflow: 'hidden' }}>
-      <h1 style={{ textAlign: 'center' ,fontSize: '14px'}}>Canvas</h1>
+      <h1 style={{ textAlign: 'center' ,fontSize: '14px'}}>{language === 'en' ? 'Canvas' : 'Toile'}</h1>
       <Draggable bounds="parent" defaultPosition={{x: 150, y: 100}}>
         <Resizable
           defaultSize={{

src/components/Header.jsx

@@ -1,11 +1,20 @@
-import React from 'react';
+// Modified Header.jsx
+import React, { useState } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
+import { useSelector, useDispatch } from 'react-redux';
+import { GrLanguage } from 'react-icons/gr';
+import { setLanguage } from '../features/languageSlice';
+import * as en from 'blockly/msg/en'; // Import English messages
+import * as fr from 'blockly/msg/fr'; // Import French messages
+
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 const ProjectNameInput = styled(TextField)({
   maxWidth: '200px',
@@ -19,51 +28,132 @@ const ProjectNameInput = styled(TextField)({
 });
 
 export default function Header() {
-  // Add state management for project name if needed
-  const [projectName, setProjectName] = React.useState('Project_Name');
+  const language = useSelector((state) => state.language);
+  const [projectName, setProjectName] = useState('Project_Name');
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const dispatch = useDispatch(); // Add this line to get access to dispatch function
 
   const handleProjectNameChange = (event) => {
     setProjectName(event.target.value);
   };
 
+  const toggleLanguage = (selectedLanguage) => {
+    dispatch(setLanguage(selectedLanguage));
+    updateBlocklyLocale(selectedLanguage);
+  };
+
+  const toggleDropdown = () => {
+    setDropdownOpen(!isDropdownOpen);
+  };
+
+  const handleLanguageChange = (selectedLanguage) => {
+    toggleDropdown();
+    toggleLanguage(selectedLanguage);
+  };
+
+  const updateBlocklyLocale = (lang) => {
+    const languageMap = {
+      en,
+      fr,
+    };
+    Blockly.setLocale(languageMap[lang]);
+  };
+
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLanguageItemClick = (selectedLanguage) => {
+    handleClose();
+    handleLanguageChange(selectedLanguage);
+  };
+
   return (
-    <Box sx={{ flexGrow: 1 , width: '100%'}}>
+    <Box sx={{ flexGrow: 1, width: '100%' }}>
       <AppBar position="static">
         <Toolbar>
           {/* LogicBlocks Title */}
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            <h1>LogicBlocks</h1>
+            <h1>{language === 'en' ? 'LogicBlocks' : 'Blocs Logiques'}</h1>
           </Typography>
 
           {/* Navigation Buttons */}
-          <Button color="inherit">Files</Button>
-          <Button color="inherit">Edit</Button>
-          <Button color="inherit">Tutorials</Button>
-          <Button color="inherit">Boards</Button>
-          <Button color="inherit">Connect</Button>
+          <div className="nav-button">
+            <Button className="btn" color="inherit">{language === 'en' ? 'Files' : 'Fichiers'}</Button>
+            <Button className="btn" color="inherit">{language === 'en' ? 'Edit' : 'Modifier'}</Button>
+            <Button className="btn" color="inherit">{language === 'en' ? 'Tutorials' : 'Tutoriels'}</Button>
+            <Button className="btn" color="inherit">{language === 'en' ? 'Boards' : 'Cartes'}</Button>
+            <Button className="btn" color="inherit">{language === 'en' ? 'Connect' : 'Connecter'}</Button>
+          </div>
 
           {/* Editable Project Name */}
           <ProjectNameInput
             value={projectName}
             onChange={handleProjectNameChange}
             variant="outlined"
-            placeholder="Project Name"
+            placeholder={language === 'en' ? 'Project Name' : 'Nom du Projet'}
             InputProps={{
               startAdornment: <Typography>|</Typography>,
               endAdornment: <Typography>|</Typography>,
             }}
           />
 
+          {/* Language Dropdown */}
+          <div style={{ position: 'relative', marginLeft: '8px' }}>
+          <Button
+              onClick={handleClick}
+              startIcon={<GrLanguage style={{ color: 'black' }} />}
+            >
+              {language === 'en' ? 'English' : 'Français'}
+            </Button>
+            <Menu
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={() => handleLanguageItemClick('en')}>English</MenuItem>
+              <MenuItem onClick={() => handleLanguageItemClick('fr')}>Français</MenuItem>
+            </Menu>
+            {/* <label htmlFor="languageDropdown" onClick={() => handleLanguageChange(language)}>
+              <GrLanguage />
+            </label> */}
+            {/* {isDropdownOpen && (
+              <select
+                id="languageDropdown"
+                value={language}
+                onChange={(e) => handleLanguageChange(e.target.value)}
+                style={{
+                  position: 'absolute',
+                  padding: '5px',
+                  top: '-3px',
+                  left: '30px',
+                }}
+              >
+                <option value="en">English</option>
+                <option value="fr">French</option>
+              </select>
+            )} */}
+          </div>
+
           {/* Spacing Element */}
           <Box sx={{ flexGrow: 1 }} />
 
           {/* Logo Placeholder */}
           <img src="trial_sprite_nobkg.png" alt="Logo" style={{ height: '50px' }} />
 
           {/* Sign In Button */}
-          <Button color="inherit">Sign In</Button>
+          <Button color="inherit">
+            {language === 'en' ? 'Sign In' : 'Se Connecter'}
+          </Button>
         </Toolbar>
       </AppBar>
     </Box>
   );
 }
+

src/features/languageSlice.js

@@ -0,0 +1,16 @@
+// languageSlice.js
+
+import { createSlice } from '@reduxjs/toolkit';
+
+const languageSlice = createSlice({
+  name: 'language',
+  initialState: 'en',
+  reducers: {
+    setLanguage: (state, action) => {
+      return action.payload;
+    },
+  },
+});
+
+export const { setLanguage } = languageSlice.actions;
+export default languageSlice.reducer;

src/store/store.js

@@ -1,5 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 
+import languageReducer from "../features/languageSlice";
+
 export const store = configureStore({
-  reducer: {},
+  reducer: {
+    language: languageReducer,
+  },
+  devTools: process.env.NODE_ENV !== 'production',
 });