fix translation

my-app/src/App.tsx

@@ -27,6 +27,8 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Header from './components/header';
 import { ColorModeContext } from './utils/color-toggle';
 import { useTranslation } from 'react-i18next';
+import { I18nextProvider } from 'react-i18next';
+import i18n from './utils/i18n'; // Assuming you have a separate i18n config file
 
 import "./utils/i18n";
 import Project from './pages/projects';
@@ -60,6 +62,7 @@ function App()
   return (
     // <React.StrictMode>
     <div>
+    <I18nextProvider i18n={i18n}>
     <Header/>
     <BrowserRouter>
     <CssBaseline />
@@ -82,7 +85,7 @@ function App()
     </Routes>
     {/* </Router> */}
     </BrowserRouter>
-
+    </I18nextProvider>
     </div>
     // </React.StrictMode>
   );

my-app/src/components/header.tsx

@@ -1,71 +1,43 @@
-import MenuSimple from './language';
+import React, { useState, useContext, useEffect } from "react";
-import MaterialUISwitch from './switch'
+import { useTranslation } from 'react-i18next';
-import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
+import { ColorModeContext } from '../utils/color-toggle';
-import React, { useState, useContext} from "react";
+import ReactCountryFlag from "react-country-flag";
-import { useEffect } from "react";
+import { Box, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import MaterialUISwitch from './switch';
 import logo from '../img/logo.png';
 
-import { ColorModeContext } from '../utils/color-toggle';
+function Header() {
-import { useTranslation } from 'react-i18next';
-
-import ReactCountryFlag from "react-country-flag"
-import { FormControl } from 'react-bootstrap';
-import { Box, InputLabel, MenuItem} from '@mui/material';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-
-import Menu from '@mui/material/Menu';
-// import MenuItem from '@mui/material/MenuItem';
-import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state';
-import Button from '@mui/material/Button';
-
-function Header()
-{
     const { i18n, t } = useTranslation();
     const { changeMode } = useContext(ColorModeContext);
-    const [language, setLanguage] = useState(1);
+    
-    const [mode, setMode] = useState("dark");
+    // Read language from localStorage or default to 'en'
-    // const [checked, setChecked] = useState(1);
+    const storedLanguage = localStorage.getItem('language') || 'en';
-    const [checked, setChecked] = React.useState(true);
+
+    const [language, setLanguage] = useState(storedLanguage);
+    const [checked, setChecked] = useState(localStorage.getItem('mode') === 'light' ? false : true);
 
     useEffect(() => {
-      if (!localStorage.getItem('language'))
+        i18n.changeLanguage(language); // Apply saved language
-        localStorage.setItem('language', 'en');
+        localStorage.setItem('language', language); // Persist on reload
-      else
+    }, [language, i18n]); // Re-run effect if language changes
-      {
+
-        let current = localStorage.getItem('language')
+    useEffect(() => {
-        if (current == 'en')
+        if (localStorage.getItem('mode') === 'light') {
-        {
+            changeMode();
-          setLanguage(current ? 0 : 1)
+            setChecked(false);
-          i18n.changeLanguage(current)
         }
+    }, [changeMode]);
+
+    function handleLanguageChange(event: SelectChangeEvent) {
+        const newLang = event.target.value;
+        setLanguage(newLang); // Update state
     }
 
-      if (!localStorage.getItem('mode'))
+    function handleModeToggle() {
-        localStorage.setItem('mode', 'dark');
+        const newMode = checked ? 'dark' : 'light';
-      else
+        localStorage.setItem('mode', newMode);
-      {
+        changeMode();
-        let current = localStorage.getItem('mode')
+        setChecked(!checked);
-        if (current == "light")
-        {
-          changeMode()
-          setChecked(false)
-        }
-      }
-
-
-    }, []);
-
-    function handleChange() {
-        i18n.changeLanguage(language ? 'en' : 'fr')
-        localStorage.setItem('language', language ? 'en' : 'fr');
-        setLanguage(language ? 0 : 1)
-    }
-
-    function handleMode() {
-        let current = localStorage.getItem('mode')
-        localStorage.setItem('mode', current == 'light' ? 'dark' : 'light');
-        changeMode()
-        setChecked(checked ? false : true)
     }
 
     return (
@@ -75,29 +47,6 @@ function Header()
                     <img src={logo} alt="Logo" />
                 </a>
 
-
-
-
-            {/* <PopupState variant="popover" popupId="demo-popup-menu">
-              {(popupState) => (
-                <React.Fragment>
-                  <Button  className="pages" href="/skills" {...bindHover(popupState)}>
-                    {t("page2")}
-                  </Button>
-                  <Menu {...bindMenu(popupState)}>
-                    <MenuItem onClick={popupState.close}>Profile</MenuItem>
-                    <MenuItem onClick={popupState.close}>My account</MenuItem>
-                    <MenuItem onClick={popupState.close}>Logout</MenuItem>
-                  </Menu>
-                </React.Fragment>
-              )}
-            </PopupState> */}
-
-
-
-
-
-
                 <div className="menu">
                     <div className="pages">
                         <a href="/projects">{t("page2")}</a>
@@ -108,40 +57,27 @@ function Header()
                     <div className="pages">
                         <a href="/contact">{t("page1")}</a>
                     </div>
-                {/* <div className="pages">
-                  <a href="/resume">{t("page3")}</a>
-                </div> */}
                 </div>
 
-
-
                 <div className="language">
-                {/* <MenuSimple/> */}
                     <Box sx={{ minWidth: 120 }}>
-                {/* <FormControl > */}
-                  {/* <InputLabel id="demo-simple-select-label">Age</InputLabel> */}
                         <Select
-                    labelId="demo-simple-select-label"
-                    id="demo-simple-select"
                             value={language}
-                    // label="Age"
+                            onChange={handleLanguageChange}
-                    onChange={handleChange}
                         >
-                    <MenuItem value={0}><ReactCountryFlag countryCode="GB" svg/></MenuItem>
+                            <MenuItem value="en">
-                    <MenuItem value={1}><ReactCountryFlag countryCode="FR" svg/></MenuItem>
+                                <ReactCountryFlag countryCode="GB" svg />
+                            </MenuItem>
+                            <MenuItem value="fr">
+                                <ReactCountryFlag countryCode="FR" svg />
+                            </MenuItem>
                         </Select>
-                {/* </FormControl> */}
                     </Box>
-
+                    <MaterialUISwitch checked={checked} onChange={handleModeToggle} />
-                <MaterialUISwitch checked={checked} onChange={handleMode}/>
                 </div>
             </div>
         </header>
-    )
+    );
 }
 
 export default Header;
-
-// function useEffect(arg0: () => void, arg1: number[]) {
-//   throw new Error('Function not implemented.');
-// }

my-app/src/pages/contact.tsx

@@ -1,13 +1,17 @@
 import { useTranslation } from "react-i18next";
+import React, { useEffect } from 'react';
 
 function Contact()
 {
 	const { i18n, t } = useTranslation();
+	useEffect(() => {
+	  i18n.changeLanguage(i18n.language);
+  	}, [i18n.language]);
 
 	return (
 		<div className="contact_page">
 			<div className="contact_title">{t("contact_me")}</div>
-			<svg className="badge contact_badge" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 2C9 1.44772 9.44772 1 10 1H14C14.5523 1 15 1.44772 15 2V3C15 3.55228 14.5523 4 14 4H10C9.44772 4 9 3.55228 9 3V2Z" fill="#000000"/><rect x="5.75" y="1.75" width="12.5" height="20.5" rx="1.75" stroke="#000000" stroke-width="1.5"/><path d="M9 19.5H15" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/></svg>
+			<svg className="badge contact_badge" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 2C9 1.44772 9.44772 1 10 1H14C14.5523 1 15 1.44772 15 2V3C15 3.55228 14.5523 4 14 4H10C9.44772 4 9 3.55228 9 3V2Z" fill="#000000"/><rect x="5.75" y="1.75" width="12.5" height="20.5" rx="1.75" stroke="#000000" strokeWidth="1.5"/><path d="M9 19.5H15" stroke="#000000" strokeWidth="1.5" strokeLinecap="round"/></svg>
 			<div className="contact_list">
 				<a className="contact_box" href="tel:+33652403830">
 					06.52.40.38.30

my-app/src/pages/home.tsx

@@ -5,14 +5,18 @@ import { FaArrowRightLong } from "react-icons/fa6";
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 
+import React, { useEffect } from 'react';
+
 function Home()
 {
-
     const { i18n, t } = useTranslation();
 
+    useEffect(() => {
+      i18n.changeLanguage(i18n.language);
+  }, [i18n.language]);
+
     return(
       <div>
-        <body>
           {/* <Header/> */}
           <div className='home'>
             <div className="presentation">
@@ -22,11 +26,6 @@ function Home()
                   Je suis ouvert à de nombreuses propositions en rapport avec mes études 
                   et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div> */}
                   <div className= "description">{t("description")}</div>
-                {/* <div className= "cv_button">
-                  <a className="button" href="/resume">
-                    {t("resume")}
-                  </a>
-                </div> */}
             </div>
             <div className="project">
                 <div className='project_txt'>{t("project")}</div>
@@ -52,7 +51,6 @@ function Home()
                 </div>
             </div>
           </div>
-        </body>
       </div>
     )
 }

my-app/src/pages/projects.tsx

@@ -2,9 +2,15 @@ import { useTranslation } from 'react-i18next';
 import img from '../img/pong.webp';
 import { FaArrowRightLong } from "react-icons/fa6";
 
+import React, { useEffect } from 'react';
+
 function Project()
 {
     const { i18n, t } = useTranslation();
+    useEffect(() => {
+      i18n.changeLanguage(i18n.language);
+    }, [i18n.language]);
+    
     return (	
         <div className="project project_home">
         <div className='project_txt'>{t("project")}</div>

my-app/src/pages/projects/cloud_1.tsx

@@ -1,9 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import img from '../../img/ansible.webp';
+import React, { useEffect } from 'react';
 
 function Cloud_1()
 {
     const { i18n, t } = useTranslation();
+    useEffect(() => {
+        i18n.changeLanguage(i18n.language);
+    }, [i18n.language]);
     return (	
 		<div className="project_page">
 			<div className="project_description">

my-app/src/pages/projects/cube3d.tsx

@@ -1,9 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import img from '../../img/cube3d_2.png';
+import React, { useEffect } from 'react';
 
 function Cube3d()
 {
     const { i18n, t } = useTranslation();
+    useEffect(() => {
+        i18n.changeLanguage(i18n.language);
+    }, [i18n.language]);
     return (	
 		<div className="project_page">
 			<div className="project_description">

my-app/src/pages/projects/ft_transcendence.tsx

@@ -1,9 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import img from '../../img/pong.webp';
+import React, { useEffect } from 'react';
 
 function Ft_transcendence()
 {
     const { i18n, t } = useTranslation();
+    useEffect(() => {
+        i18n.changeLanguage(i18n.language);
+    }, [i18n.language]);
     return (	
 		<div className="project_page">
 			<div className="project_description">

my-app/src/pages/projects/minishell.tsx

@@ -1,9 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import img from '../../img/bash.png';
+import React, { useEffect } from 'react';
 
 function Minishell()
 {
     const { i18n, t } = useTranslation();
+    useEffect(() => {
+        i18n.changeLanguage(i18n.language);
+    }, [i18n.language]);
     return (	
 		<div className="project_page">
 			<div className="project_description">

my-app/src/pages/projects/nas.tsx

@@ -1,9 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import img from '../../img/omv_dashboard.png';
+import React, { useEffect } from 'react';
 
 function Nas()
 {
     const { i18n, t } = useTranslation();
+    useEffect(() => {
+        i18n.changeLanguage(i18n.language);
+    }, [i18n.language]);
     return (	
 		<div className="project_page">
 			<div className="project_description">

my-app/src/utils/i18n.tsx

@@ -16,6 +16,11 @@ i18n
   .use(initReactI18next) // passes i18n down to react-i18next
   .init({
     fallbackLng: "fr",
+    supportedLngs: ['en', 'fr'],
+    detection: {
+      order: ['localStorage', 'cookie', 'navigator'], // Prioritize storage
+      caches: ['localStorage', 'cookie'], // Persist language setting
+    },
     // lng: getCurrentLang(),
     interpolation: {
       escapeValue: false,