21 app application internationalization and localization

webapp/package.json

@@ -11,10 +11,14 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
+    "flag-icons": "^7.2.1",
     "history": "^5.3.0",
+    "i18next": "^23.11.1",
+    "i18next-browser-languagedetector": "^7.2.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-native": "^0.73.5",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",

webapp/src/components/game/Game.test.js

@@ -3,6 +3,7 @@ import {render, screen, fireEvent, act, waitFor} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {Game} from './Game';
 import { MemoryRouter, Route } from 'react-router-dom';
+import "../../i18n";
 
 jest.mock('../../services/game.service', () => ({
   startNewGame: () => Promise.resolve(""),

webapp/src/components/game/SuddenDeath.test.js

@@ -5,6 +5,7 @@ import {SuddenDeath} from './SuddenDeath';
 import Game from "./Game";
 import { MemoryRouter, Route } from 'react-router-dom';
 import * as router from "react-router";
+import "../../i18n";
 
 jest.mock('../../services/game.service', () => ({
     startNewGame: () => Promise.resolve(""),

webapp/src/components/history/History.test.js

@@ -3,6 +3,7 @@ import { render, screen, act, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {History} from './History';
 import { MemoryRouter } from 'react-router-dom';
+import "../../i18n";
 
 jest.mock('../../services/user.service', () => ({
     getHistory: () => Promise.resolve(

webapp/src/components/home/Home.js

@@ -1,16 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import {Box, IconButton, Chip, Container, CssBaseline, Modal, Typography} from "@mui/material";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { useTranslation } from "react-i18next";
+
+import './Home.css';
 import { getCurrentUser } from "../../services/user.service";
-import bannerDark from '../../media/wiq_banner.png';
-import bannerLight from '../../media/wiq_banner.light.png';
 import { Nav } from '../nav/Nav';
-import './Home.css';
-import {useNavigate} from "react-router-dom";
-import CancelIcon from "@mui/icons-material/Cancel";
 import {getTags} from "../../services/question.service";
+import {useNavigate} from "react-router-dom";
+import bannerDark from '../../media/wiq_banner.png';
+import bannerLight from '../../media/wiq_banner.light.png';
 
 export const Home = () => 
 {
+    const { t } = useTranslation();
+
     const [loggedIn, setLoggedIn] = useState(true);
     const [username, setUsername] = useState("No identificado");
     const [tagSelection, setTagSelection] = useState(false);
@@ -114,57 +118,54 @@ export const Home = () =>
                         <img src={bannerDark} alt="WiQ" className="hidden dark:block"/>
 
                         <div className="flex p-4 place-content-between ">
+
                             <Typography className="text-black dark:text-white " component="h2" variant="h4"
                                         fontFamily="monospace" fontWeight="bold" alignSelf="center">
-                                Home
+                                { t('Home.home') }
                             </Typography>
 
                             <Typography className="text-black dark:text-white " component="h3" variant="h5"
                                         fontFamily="monospace" alignSelf="center">
-                                ¡Bienvenido, {username}!
+                                { t('Home.welcome', { name: username }) }
                             </Typography>
 
                         </div>
 
                         <div className="p-2 m-1">
                             <Typography component="h3" variant="h6" fontFamily="monospace" fontWeight="bold"
                                         alignSelf="center" className="text-black dark:text-white ">
-                                Cómo jugar
+                                { t('Home.howToPlay') }
                             </Typography>
                             <Typography component="p" variant="p" className="text-black dark:text-white ">
-                                Cuando pulses en el botón de jugar, se te irán mostrando preguntas junto con 4 posibles
-                                respuestas, sólo una de ellas es verdadera, haz click sobre la respuesta correcta para
-                                ganar puntos.
+                                { t('Home.tutorialP1') }
                             </Typography>
                             <Typography component="p" variant="p" className="text-black dark:text-white ">
-                                El tiempo para contestar es limitado. La barra en la parte inferior muestra el tiempo
-                                restante. Si el tiempo se termina, la pregunta contará como fallada y se pasará a la
-                                siguiente.
+                                { t('Home.tutorialP2') }
                             </Typography>
                             <Typography component="p" variant="h6" fontFamily="monospace" fontWeight="bold"
                                         className="text-center p-3 text-black dark:text-white ">
-                                ¡Mucha suerte y demuestra lo que sabes!
+                                { t('Home.goodLuck') }
                             </Typography>
                         </div>
                         <div className="flex align-middle justify-center flex-grow m-3">
                             <button onClick={startGame} className="bg-gradient-to-r
                                 from-cyan-50 via-cyan-300 to blue-500
                                 dark:from-orange-500 dark:via-purple-500 dark:to-pink-500
                                 buttonGradient">
-                                <span className="text-black dark:text-white text">JUGAR CLÁSICO</span>
-                            </button>
+                                    <span className="text-black dark:text-white text">{ t('Home.playClassic') }</span>
+                                </button>
                         </div>
-                        <div className="flex align-middle justify-center flex-grow">
+                        <div className="flex align-middle justify-center flex-grow m-3">
                             <button onClick={startSuddenDeath} className="bg-gradient-to-r
                                 from-cyan-50 via-cyan-300 to blue-500
                                 dark:from-orange-500 dark:via-purple-500 dark:to-pink-500
                                 buttonGradient">
-                                <span className="text-black dark:text-white text">JUGAR MUERTE SÚBITA</span>
+                                <span className="text-black dark:text-white text">{ t('Home.playSuddenDeath') }</span>
                             </button>
                         </div>
                         <div className="flex align-middle justify-center flex-grow m-3">
                             <button onClick={openTagSelection} className="buttonGradient">
-                                <span className="text-black dark:text-white ">Elige las tags</span>
+                                <span className="text-black dark:text-white ">{ t('Home.chooseTags') }</span>
                             </button>
 
                         </div>
@@ -197,7 +198,7 @@ export const Home = () =>
                             <Typography component="h3" variant="h2" className="text-black dark:text-white">
                                 Tags
                             </Typography>
-                            <p className="text-black dark:text-white">Con las tags puedes seleccionar las categorías sobre las que quieres ser preguntado.</p>
+                            <p className="text-black dark:text-white">{ t('Home.infoTags') }</p>
                             <div id="tagBox">
                                 {tags.map((tag) =>
                                     <Chip

webapp/src/components/home/Home.test.js

@@ -6,6 +6,8 @@ import { createMemoryHistory } from 'history';
 import { MemoryRouter, BrowserRouter as Router, useLocation } from 'react-router-dom';
 import { Home } from './Home';
 import * as router from 'react-router';
+import '../../i18n';
+
 
 jest.mock('../../services/user.service', () => ({
     getCurrentUser: () => {