Merge pull request #113 from Arquisoft/dev

Dev

webapp/src/App.tsx

@@ -1,10 +1,19 @@
+import React from 'react';
 import { BrowserRouter } from "react-router-dom";
 import { AppRouter } from "./Router";
+import { useTranslation } from 'react-i18next';
 
 
 /** The old code is not in /pages/init/index.tsx and is shown as default */
 function App() {
 
+  const { i18n } = useTranslation();
+
+  React.useEffect(() => {
+    localStorage.setItem("lang", navigator.language);
+    i18n.changeLanguage(navigator.language);
+  }, [i18n]);
+
 
   return (
         <BrowserRouter>

webapp/src/common/Nav.test.js

@@ -1,24 +1,23 @@
 import React from 'react';
 import { render, fireEvent, getByTestId } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom'; // Importa MemoryRouter
+import { BrowserRouter } from 'react-router-dom'; // Importa MemoryRouter
 import NavBar from './Nav';
 
 describe('NavBar Component', () => {
   it('should render without crashing', () => {
     const { getByTestId } = render(
-      <MemoryRouter> {/* Envuelve el componente en MemoryRouter */}
+      <BrowserRouter> {/* Envuelve el componente en MemoryRouter */}
         <NavBar />
-      </MemoryRouter>
+      </BrowserRouter>
     );
     const appName = getByTestId('app_name'); // Reemplaza 'app_name' con el texto real del nombre de la aplicación
     expect(appName).toBeInTheDocument();
   });
-/** 
   it('should navigate to "/game" when "Game" button is clicked', () => {
     const { getByTestId } = render(
-      <MemoryRouter> 
+      <BrowserRouter> 
         <NavBar />
-      </MemoryRouter>
+      </BrowserRouter>
     );
     const gameButton = getByTestId('nav_game'); // Reemplaza 'nav_game' con el botón de juego
     fireEvent.click(gameButton);
@@ -27,25 +26,15 @@ describe('NavBar Component', () => {
 
   it('should navigate to "/groups" when "Groups" button is clicked', () => {
     const { getByTestId } = render(
-      <MemoryRouter> 
+      <BrowserRouter> 
         <NavBar />
-      </MemoryRouter>
+      </BrowserRouter>
     );
     const groupsButton = getByTestId('nav_groups'); // Reemplaza 'nav_groups' con el botón de grupos
     fireEvent.click(groupsButton);
+    console.log(window.location.pathname)
     expect(window.location.pathname).toBe('/groups');
   });
 
-  it('should navigate to "/scoreboard" when "Scoreboard" button is clicked', () => {
-    const { getByTestId: getByTestId } = render(
-      <MemoryRouter> 
-        <NavBar />
-      </MemoryRouter>
-    );
-    const scoreboardButton = getByTestId('nav_scoreboard'); // Reemplaza 'nav_scoreboard' con el botón de marcador
-    fireEvent.click(scoreboardButton);
-    expect(window.location.pathname).toBe('/scoreboard');
-  });
-**/
   // Agrega más pruebas similares para los otros botones y funcionalidades del componente NavBar
 });

webapp/src/common/Nav.tsx

@@ -2,19 +2,20 @@ import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import './nav.scss';
 import { useTranslation } from 'react-i18next';
-import {AppBar, Container, Toolbar, Grid, Stack, Button, Menu, MenuItem} from "@mui/material";
+import { AppBar, Container, Toolbar, Grid, Stack, Button, Menu, MenuItem, Switch } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 
 const NavBar: React.FC<{}> = () => 
 {
     const location = useLocation();
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const navigate = useNavigate();
     const value:string= JSON.stringify(localStorage.getItem("isAuthenticated")).replace("\"","").replace("\"","");
     const user = JSON.stringify(localStorage.getItem("username")).replace("\"", "").replace("\"", "");
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement | SVGSVGElement>(null);
     const [open, setOpen] = useState<boolean>(false);
-    const [chevronRotated, setChevronRotated] = useState<boolean>(false);
+    const [chevronRotated, setChevronRotated] = useState<boolean>(true);
+    const [checked, setChecked] = useState<boolean>(navigator.language==="es-ES");
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<SVGSVGElement>) => {
         setAnchorEl(event.currentTarget);
@@ -28,25 +29,39 @@ const NavBar: React.FC<{}> = () =>
         setChevronRotated(false);
     };
 
+    const handleSwitch = () => {
+        const language = localStorage.getItem("lang");
+        if(language === "es" || language === null){
+            localStorage.setItem("lang", "en");
+            i18n.changeLanguage("en");
+            setChecked(false);
+        }
+        else{
+            localStorage.setItem("lang", "es");
+            i18n.changeLanguage("es");
+            setChecked(true)
+        }
+    };
+
     if(value === "false"){
         navigate("/");
     }
 
     useEffect(() => {
         switch (location.pathname) {
           case '/game':
-            document.title = 'Conocer y Vencer - Game';
+            document.title = t('app_name') + ' - ' + t('nav_game');
             break;
           case '/groups':
-            document.title = 'Conocer y Vencer - Groups';
+            document.title = t('app_name') + ' - ' + t('nav_groups');
             break;
           case '/profile':
-            document.title = 'Conocer y Vencer - Profile';
+            document.title = t('app_name') + ' - ' + t('nav_profile');
             break;
           default:
-            document.title = 'Conocer y Vencer';
+            document.title = t('app_name');
         }
-      }, [location.pathname]);
+      }, [location.pathname, t]);
 
     return (
         <AppBar className="nav-appBar" sx={
@@ -70,16 +85,15 @@ const NavBar: React.FC<{}> = () =>
                     >
                         <Grid item>
                             <Stack direction="row" spacing={2}>
-                                <div  data-testid="app_name" className="logo">
+                                <div data-testid="app_name" className="logo" onClick={() => navigate("/game")}>
                                     {t('app_name')}
                                 </div>
-                                <Button variant="contained"  data-testid="nav_game" onClick={() => navigate("/game")}>
+                                <Button data-testid="nav_game" sx={{ width: '80px' }} variant="contained" onClick={() => navigate("/game")}>
                                     {t('nav_game')}
                                 </Button>
-                                <Button variant="contained"  data-testid="nav_groups" onClick={() => navigate("/groups")}>
+                                <Button data-testid="nav_groups" sx={{ width: '80px' }} variant="contained" onClick={() => navigate("/groups")}>
                                     {t('nav_groups')}
                                 </Button>
-
                             </Stack>
                         </Grid>
                         <Grid item>
@@ -90,15 +104,19 @@ const NavBar: React.FC<{}> = () =>
                             >
                                 <Grid item>
                                     <Button
-                                    variant="text"
+                                    variant="contained"
                                     id="menu-button" 
-                                    color='inherit' 
                                     onClick={handleClick} 
                                     aria-controls={open? 'menu' : undefined}  
                                     aria-expanded={open? 'true' : undefined}
                                     aria-haspopup='true'
-                                    sx={{ textTransform: 'none', padding: '0' }}
+                                    sx={{ textTransform: 'none', color: '' }}
                                     >
+                                        <img
+                                        className="nav-profile-picture"
+                                        src={"https://robohash.org/"+user+".png"} 
+                                        alt={user} 
+                                        />
                                         {user}
                                         <svg 
                                         fill="#ffffff" 
@@ -121,13 +139,40 @@ const NavBar: React.FC<{}> = () =>
                                     <Menu 
                                     id="menu" 
                                     open={open} 
-                                    MenuListProps={{'aria-labelledby':'menu-button'}} 
-                                    onClose={()=>handleClose()} 
+                                    MenuListProps={{ 'aria-labelledby': 'menu-button' }} 
+                                    onClose={() => handleClose()} 
                                     anchorEl={anchorEl}
+                                    anchorOrigin={{
+                                        vertical: 'bottom',
+                                        horizontal: 'right',
+                                    }}
                                     sx={{ marginTop: '5px' }}
                                     >
-                                        <MenuItem onClick={()=> navigate("/profile")}>Profile</MenuItem>
-                                        <MenuItem onClick={()=> navigate("/")}>Logout</MenuItem>
+                                        <MenuItem 
+                                        onClick={() => navigate("/profile")} 
+                                        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+                                        >
+                                            {t('nav_profile')}
+                                        </MenuItem>
+                                        <MenuItem 
+                                        onClick={() => navigate("/")}
+                                        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+                                        >
+                                            {t('nav_logout')}
+                                        </MenuItem>
+                                        <MenuItem>
+                                            <img 
+                                            className='flag' 
+                                            src={process.env.PUBLIC_URL + '/british-flag.png'} 
+                                            alt='British flag' 
+                                            />
+                                            <Switch checked={checked} onChange={handleSwitch} />
+                                            <img 
+                                            className='flag' 
+                                            src={process.env.PUBLIC_URL + '/spanish-flag.png'} 
+                                            alt='Spanish flag' 
+                                            />
+                                        </MenuItem>
                                     </Menu>
                                 </Grid>
                             </Grid>

webapp/src/common/nav.scss

@@ -11,10 +11,26 @@
   position: fixed;
 }
 
+.nav-profile-picture{
+  max-width: none;
+  width: 27px;
+  height: 27px;
+  border-radius: 50%;
+  border: 2px white solid;
+  margin-right: 5px;
+}
+
 .logo{
   font-weight: 500;
   font-size: xx-large;
   margin-right: 15px !important;
+  cursor: pointer;
+}
+
+.flag{
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
 }
 
 .link{

webapp/src/components/g-login-button/GLoginButton.tsx

@@ -1,8 +1,11 @@
 import { GoogleLogin } from '@react-oauth/google';
-import './GLoginButton.scss';
+import './g-login-button.scss';
+import { useTranslation } from 'react-i18next';
 
 const GLoginButton = () => 
 {
+    const { t } = useTranslation();
+
     return(
       <GoogleLogin
          onSuccess={(credentialResponse) => 
@@ -11,7 +14,7 @@ const GLoginButton = () =>
             }}
          onError={() => 
             {
-                console.log('Login Failed');
+                console.log(t('g_login_button_login_failed'));
             }}
     />)
 }

webapp/src/components/g-logout-button/GLogoutButton.tsx

@@ -1 +1 @@
-import './GLogoutButton.scss';
+import './g-logout-button.scss';

webapp/src/components/game-layout/GameLayout.test.js

@@ -31,20 +31,4 @@ describe('GameLayout component', () => {
     });
 
   });
-
-  it('renders Scoreboard when Scoreboard link is clicked', () => {
-
-    render(
-      <MemoryRouter>
-    <GameLayout />
-    </MemoryRouter>
-    );
-    waitFor(() => {
-        fireEvent.click(screen.getByTestId('scoreboard-link'));
-        expect(screen.queryByTestId('game-component')).toBeNull();
-        expect(screen.queryByTestId('groups-page-component')).toBeNull();
-
-    });
-
-  });
 });

webapp/src/components/game-layout/GameLayout.tsx

@@ -1,40 +1,31 @@
 import { useState } from "react";
 import Game from "../game/singleplayer/GameSinglePlayer";
 import { GroupsPage } from "../../pages/groups/index";
-import Scoreboard from "../scoreboard/Scoreboard";
+import { useTranslation } from 'react-i18next';
 
 const GameLayout = () => {
   const [currentView, setCurrentView] = useState("Game");
+  const { t } = useTranslation();
 
-  return (
+  return(
     <div>
       <header className="GameHead">
         <nav className="GameNav">
           <ul>
-            <li>
-              <p data-testid="game-header">Game</p>
-            </li>
-            <li>
-              <a data-testid="game-link" onClick={() => setCurrentView("Game")}>
-                Game
-              </a>
-            </li>
-            <li>
-              <a data-testid="groups-link" onClick={() => setCurrentView("Group")}>
-                Groups
-              </a>
-            </li>
-            <li>
-              <a data-testid="scoreboard-link" onClick={() => setCurrentView("Scoreboard")}>
-                Scoreboard
-              </a>
-            </li>
-          </ul>
+              <li>
+                  <p data-testid="game-header">{t('game_layout_game')}</p>
+              </li>
+              <li>
+                  <button data-testid="game-link" onClick={()=>setCurrentView("Game")}>{t('game_layout_game')}</button>
+              </li>
+              <li>
+                  <button data-testid="groups-link" onClick={()=>setCurrentView("Group")} >{t('game_layout_group')}</button>
+              </li>
+            </ul>
         </nav>
       </header>
       <main>
-        {currentView === "Game" ? <Game /> : currentView === "Group" ? <GroupsPage data-testid="groups-page-component" /> : 
-        <Scoreboard data-testid="scoreboard-component"/>}
+        {currentView === "Game" ? <Game /> : <GroupsPage data-testid="groups-page-component" /> }
       </main>
     </div>
   );