Menu de nav tiene separadores lógicos y enlace a Ranking

Arquisoft · Apr 6, 2024 · f965b65 · f965b65
1 parent dd99675
commit f965b65
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 4 deletions.
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -19,6 +19,7 @@ import PrincipalView from './components/principalView/PrincipalView';
 import Room from './components/rooms/Room'; // Importa el componente de sala
 import CreateRoomForm from './components/rooms/CreateRoom'; // Importa el componente para crear sala
 import JoinRoomForm from './components/rooms/JoinRoom'; // Importa el componente para unirse a sala
+import { Ranking } from './components/ranking/Ranking';
 
 
 const App = () => {
@@ -62,6 +63,11 @@ const App = () => {
                <ChakraProvider><History darkMode={darkMode}/></ChakraProvider>
             </AuthenticatedLayout>
           } />
+          <Route path="/ranking" element={
+            <AuthenticatedLayout>
+               <ChakraProvider><Ranking darkMode={darkMode}/></ChakraProvider>
+            </AuthenticatedLayout>
+          } />
 
           <Route path="/joinroom" element={<AuthenticatedLayout> <ChakraProvider> <JoinRoomForm /> </ChakraProvider></AuthenticatedLayout>} />
           <Route path="/createroom" element={<AuthenticatedLayout> <ChakraProvider><CreateRoomForm /> </ChakraProvider></AuthenticatedLayout>} />

diff --git a/webapp/src/components/navbar/NavBar.js b/webapp/src/components/navbar/NavBar.js
@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem, ListItemIcon , Switch } from '@mui/material';
+import { Divider, AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem, ListItemIcon , Switch } from '@mui/material';
 import { styled } from '@mui/system';
 import { Link } from 'react-router-dom';
 import { AuthContext } from '../authcontext';
@@ -113,12 +113,17 @@ const NavBar = ({ setDarkMode, darkMode}) => {
            <ListItem button={false}>
              <Typography fontWeight="bold">{username}</Typography>
            </ListItem>
-           <MenuItem onClick={handleClose} component={Link} to="/logout">
-            {t('logout')}
-           </MenuItem>
+           <Divider orientation="horizontal" flexItem />
            <MenuItem onClick={handleClose} component={Link} to="/history">
              {t('history')}
            </MenuItem>
+           <MenuItem onClick={handleClose} component={Link} to="/ranking">
+             {t('ranking')}
+           </MenuItem>
+           <Divider orientation="horizontal" flexItem />
+           <MenuItem onClick={handleClose} component={Link} to="/logout">
+            {t('logout')}
+           </MenuItem>
 
          </Menu>
        </>

diff --git a/webapp/src/components/ranking/Ranking.js b/webapp/src/components/ranking/Ranking.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export function Ranking({darkMode}){
+    // Aquí puedes agregar la lógica para obtener los datos del ranking de usuarios
+    const users = [
+        { name: 'Usuario 1', dailyQuestions: 10 },
+        { name: 'Usuario 2', dailyQuestions: 8 },
+        { name: 'Usuario 3', dailyQuestions: 5 },
+        // Agrega más usuarios según sea necesario
+    ];
+
+    // Ordenar los usuarios por número de preguntas diarias acertadas
+    users.sort((a, b) => b.dailyQuestions - a.dailyQuestions);
+
+    return (
+        <div>
+            <h1>Ranking de Usuarios</h1>
+            <ol>
+                {users.map((user, index) => (
+                    <li key={index}>
+                        {user.name} - {user.dailyQuestions} preguntas acertadas
+                    </li>
+                ))}
+            </ol>
+        </div>
+    );
+}
diff --git a/webapp/src/internacionalizacion/locales/en/translation.json b/webapp/src/internacionalizacion/locales/en/translation.json
@@ -39,6 +39,8 @@
     "timeUnitHours" : " hours ",
     "questionsPercentage": " %",
 
+    "ranking": "Ranking",
+
     "loginWelcomeMessage": "Welcome ",
     "loginDate": "Your account was created on ",
     "loginMessage": "Log in",

diff --git a/webapp/src/internacionalizacion/locales/es/translation.json b/webapp/src/internacionalizacion/locales/es/translation.json
@@ -39,6 +39,8 @@
     "timeUnitHours" : " horas ",
     "questionsPercentage": " %",
 
+    "ranking": "Ranking",
+
     "loginWelcomeMessage": "Bienvenido ",
     "loginDate": "Tu cuenta fue creada el ",
     "loginMessage": "Inicia sesión",