Correctif session + affichage navbar quand connecté

cryptide_project/src/App.tsx

@@ -19,6 +19,9 @@ import InfoPage from './Pages/InfoPage';
 /* Component */
 import AppNavbar from './Components/NavBar';
 
+/* service */
+import SessionService from './services/SessionService';
+
 /* nav */
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 
@@ -48,7 +51,7 @@ function App() {
   const [locale, setLocale] = useState('fr');
 
   //@ts-ignore
-  const changeLocale = (newLocale) => {
+  const changeLocale = async (newLocale) => {
     setLocale(newLocale);
   };
 

cryptide_project/src/Components/LangDropDown.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { NavDropdown } from 'react-bootstrap';
+import LanguageNavItem from './LangNavItem';
+import { HiLanguage } from 'react-icons/hi2';
+
+// @ts-ignore
+const LangDropdown = ({ changeLocale }) => {
+  return (
+    <NavDropdown title={<HiLanguage/>} id="language-dropdown" align='end' drop='down-centered'>
+      <LanguageNavItem
+        countryCode="FR"
+        languageKey="languageSelector.french"
+        onClick={() => changeLocale('fr')}
+      />
+      <LanguageNavItem
+        countryCode="GB"
+        languageKey="languageSelector.english"
+        onClick={() => changeLocale('en')}
+      />
+      {/* Ajoutez d'autres langues selon vos besoins */}
+    </NavDropdown>
+  );
+};
+
+export default LangDropdown;

cryptide_project/src/Components/LangNavItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { NavDropdown } from 'react-bootstrap';
+import { FormattedMessage } from 'react-intl';
+import ReactCountryFlag from 'react-country-flag';
+
+/*@ts-ignore*/
+const LanguageNavItem = ({ countryCode, languageKey, onClick }) => {
+  return (
+    <NavDropdown.Item onClick={onClick}>
+      <ReactCountryFlag
+        className="custom-flag"
+        countryCode={countryCode}
+        svg
+        style={{ margin: 'auto 10px 3px auto' }}
+      />
+      <FormattedMessage id={languageKey} />
+    </NavDropdown.Item>
+  );
+};
+
+export default LanguageNavItem;

cryptide_project/src/Components/NavBar.css

@@ -1,4 +1,3 @@
-
 .custom-navbar {
     /* background-color: #85C9C2; */
     color: #fff;
@@ -15,17 +14,14 @@
     border-radius: 15px;
 }
 
-
 .navbar-title-dd a {
-    color: #fff;
-    border-radius: 15;
+    border-radius: 15px;
     padding: 10px 20px; /* Ajustez le rembourrage selon vos préférences */
     text-decoration: none; /* Pour supprimer le soulignement des liens */
     display: inline-block; /* Pour que les styles de fond s'appliquent aux liens */
     margin-right: 10px; /* Pour ajouter de l'espace entre les boutons */
 }
 
-
 .centerdiv {
     display: flex;
     justify-content: center;

cryptide_project/src/Components/NavBar.tsx

@@ -9,17 +9,13 @@ import { FormattedMessage } from 'react-intl';
 /* Icon */
 import { BiDoorOpen, BiLogInCircle } from 'react-icons/bi';
 import { BsFillPersonPlusFill } from 'react-icons/bs';
-import { HiLanguage } from 'react-icons/hi2';
 
 /* Images */
 import logo from '../res/img/logo2_preview_rev_1.png';
 
 /* Components */
-import ReactCountryFlag from "react-country-flag"
-
-/* Services */
-import SessionService from '../services/SessionService';
-import AuthService from '../services/AuthService';
+import LanguageNavItem from './LangNavItem';
+import LangDropDown from './LangDropDown';
 
 /* Style */
 import './NavBar.css';
@@ -51,14 +47,28 @@ function AppNavbar({changeLocale}) {
                     </Nav>
                     <div className='leftdiv'>
                         <Nav className="ml-auto navbar-title-dd">
-                    {/* Affichage dynamique selon état de connexion */}
                         {isLoggedIn ? (
-                                        <Nav.Link href="/play" onClick={logout} className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
-                                            <BiDoorOpen />
-                                            <FormattedMessage id="log_out" />
-                                        </Nav.Link>
-                                    ) 
-                                    : (
+                            <NavDropdown
+                                title={<span style={{ color: theme.colors.text }}>Menu <BiDoorOpen /></span>}
+                                id="basic-nav-dropdown"
+                                align="end"
+                                drop='down-centered'
+                            >
+                            <NavDropdown.Item href="/profile">Profil</NavDropdown.Item>
+                            <LanguageNavItem
+                                countryCode="FR"
+                                languageKey="languageSelector.french"
+                                onClick={() => changeLocale('fr')}
+                            />
+                            <LanguageNavItem
+                                countryCode="GB"
+                                languageKey="languageSelector.english"
+                                onClick={() => changeLocale('en')}
+                            />
+                            <NavDropdown.Divider />
+                            <NavDropdown.Item onClick={logout}>Déconnexion</NavDropdown.Item>
+                            </NavDropdown>
+                        ) : (
                             <>
                             <Nav.Link href="/login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}>
                                 <BiLogInCircle />
@@ -68,35 +78,9 @@ function AppNavbar({changeLocale}) {
                                 <BsFillPersonPlusFill />
                                 <FormattedMessage id="sign_up" />
                             </Nav.Link>
+                            <LangDropDown changeLocale={changeLocale}/>
                             </>
-                                    )
-                    }
-                </Nav>
-                <Nav className="me-auto">
-                    <NavDropdown 
-                    title={<span><HiLanguage /></span>}
-                    className="navbar-title" id="basic-nav-dropdown">
-                        <NavDropdown.Item onClick={() => changeLocale('fr')}> 
-                            <ReactCountryFlag countryCode="FR"
-                                                svg
-                                                style={{
-                                                    width: '30px',
-                                                    height: '20px',
-                                                    margin: 'auto 10px 3px auto',
-                                                }}/>        
-                            <FormattedMessage id="languageSelector.french"/> 
-                        </NavDropdown.Item>
-                        <NavDropdown.Item onClick={() => changeLocale('en')}> 
-                            <ReactCountryFlag countryCode="GB" 
-                                                svg
-                                                style={{
-                                                    width: '30px',
-                                                    height: '20px',
-                                                    margin: 'auto 10px 3px auto',
-                                                }}/>
-                            <FormattedMessage id="languageSelector.english"/> 
-                        </NavDropdown.Item>
-                    </NavDropdown>
+                        )}
                         </Nav>
                     </div>
                 </Navbar.Collapse>

cryptide_project/src/Pages/Home.tsx

@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import ButtonImgNav from '../Components/ButtonImgNav';
 
-
+// @ts-ignore
 function Home() {
     const theme=useTheme();
     const {isLoggedIn, login} = useAuth();

cryptide_project/src/Pages/Play.tsx

@@ -78,7 +78,7 @@ function Play() {
         };
       
         fetchUserInformation();
-    }, []);
+    }, [isLoggedIn]);
       
 
     const { setIndicesData, setPersonData, setPersonNetworkData } = useGame();