Merge pull request #207 from Arquisoft/coral-updates

✨ Cambios finales

package.json

@@ -7,6 +7,7 @@
     "axios": "^1.6.8",
     "cors": "^2.8.5",
     "express": "^4.19.2",
+    "history": "^5.3.0",
     "jest": "^29.7.0",
     "supertest": "^6.3.4"
   },

webapp/src/App.css

@@ -45,3 +45,11 @@
 }
 
 
+h1{
+  color: #4C8DBF;
+  font-size: 2rem;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+

webapp/src/App.js

@@ -21,19 +21,26 @@ function App() {
       <div title='main'>
 
 
-        <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-          Bienvenido a WIQ 2024 del curso de Arquitectura del Software
+      <div title='main-title'>
+        <Typography component="h1" className='main-title' variant="h5" sx={{ textAlign: 'center' }}>
+        Bienvenido a
         </Typography>
+        <Typography component="h2" className='main-title animate__animated animate__backInLeft animate__tada' variant="h5" sx={{ textAlign: 'center' }}>
+        WIQ 2024
+        </Typography>
+      </div>
+
         {showLogin ? <Login /> : <AddUser />}
         <Typography component="div" align="center" sx={{ marginTop: 2 }}>
+
           {showLogin ? (
-            <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
+            <a onClick={handleToggleView} className='gotoregister'>
               ¿No tienes una cuenta? Regístrate aquí.
-            </Link>
+            </a>
           ) : (
-            <Link component="button" variant="body2" onClick={handleToggleView}>
+            <a onClick={handleToggleView} className='gotoregister'>
               ¿Ya tienes cuenta? Inicia sesión aquí.
-            </Link>
+            </a>
           )}
 
         </Typography>

webapp/src/App.test.js

@@ -8,8 +8,12 @@ test('renders learn react link', () => {
     <Router>
       <App />
     </Router>);
-  const linkElement = screen.getByText(/Bienvenido a WIQ 2024 del curso de Arquitectura del Software/i);
 
-  expect(linkElement).toBeInTheDocument();
+  const welcomeText = screen.getByText(/Bienvenido a/i);
+
+  const wiqText = screen.getByText(/WIQ 2024/i);
+
+  expect(welcomeText).toBeInTheDocument();
+  expect(wiqText).toBeInTheDocument();
 });
 

webapp/src/components/AddUser.js

@@ -1,30 +1,32 @@
-// src/components/AddUser.js
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
-const AddUser = () => {
+const AddUser = ({ onCloseSnackbar }) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
+  const navigate = useNavigate();
 
   const addUser = async () => {
     try {
       await axios.post(`${apiEndpoint}/adduser`, { username, password });
+      await axios.post(`${apiEndpoint}/login`, { username, password });
+      localStorage.setItem('username', username);
       setOpenSnackbar(true);
-
+
+      // Redirige a la página de juego después de 3 segundos
+      navigate("/Game");
     } catch (error) {
-      setError(error.response.data.error);
+      setError("Error al crear usuario");
+      setOpenSnackbar(true); // Abre el Snackbar en caso de error
     }
   };
 
-  const handleCloseSnackbar = () => {
-    setOpenSnackbar(false);
-  };
-
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       <Typography component="h1" variant="h5">
@@ -34,23 +36,23 @@ const AddUser = () => {
         name="username"
         margin="normal"
         fullWidth
-        label="Username"
+        label="Nombre de usuario"
         value={username}
         onChange={(e) => setUsername(e.target.value)}
       />
       <TextField
         name="password"
         margin="normal"
         fullWidth
-        label="Password"
+        label="Contraseña"
         type="password"
         value={password}
         onChange={(e) => setPassword(e.target.value)}
       />
       <Button variant="contained" color="primary" onClick={addUser}>
         Crear usuario
       </Button>
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
+      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={onCloseSnackbar} message="Usuario añadido correctamente" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}

webapp/src/components/AddUser.test.js

@@ -3,16 +3,21 @@ import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import AddUser from './AddUser';
+import { BrowserRouter } from 'react-router-dom';
 
 const mockAxios = new MockAdapter(axios);
 
 const renderAddUserComponent = () => {
-  render(<AddUser />);
+  return render(
+    <BrowserRouter>
+      <AddUser />
+    </BrowserRouter>
+  );
 };
 
 const addUser = async () => {
-  const usernameInput = screen.getByLabelText(/Username/i);
-  const passwordInput = screen.getByLabelText(/Password/i);
+  const usernameInput = screen.getByLabelText(/Nombre de usuario/i);
+  const passwordInput = screen.getByLabelText(/Contraseña/i);
   const addUserButton = screen.getByRole('button', { name: /Crear usuario/i });
 
   fireEvent.change(usernameInput, { target: { value: 'testUser' } });
@@ -35,7 +40,7 @@ describe('AddUser component', () => {
     await addUser();
 
     await waitFor(() => {
-      expect(screen.getByText(/User added successfully/i)).toBeInTheDocument();
+      expect(screen.getByText(/Usuario añadido correctamente/i)).toBeInTheDocument();
     });
   });
 
@@ -47,15 +52,15 @@ describe('AddUser component', () => {
     await addUser();
 
     await waitFor(() => {
-      expect(screen.getByText(/Error: Internal Server Error/i)).toBeInTheDocument();
+      expect(screen.getByText(/Error: Error al crear usuario/i)).toBeInTheDocument();
     });
   });
 
   it('should display proper labels and inputs', () => {
     renderAddUserComponent();
 
-    expect(screen.getByLabelText(/Username/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Password/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Nombre de usuario/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Contraseña/i)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Crear usuario/i })).toBeInTheDocument();
   });
 
@@ -68,10 +73,10 @@ describe('AddUser component', () => {
 
     jest.runAllTimers();
 
-    expect(screen.queryByText(/User added successfully/i)).toBeNull();
+    expect(screen.queryByText(/Usuario añadido correctamente/i)).toBeNull();
 
     await waitFor(() => {
-      expect(screen.getByText(/User added successfully/i)).toBeInTheDocument();
+      expect(screen.getByText(/Usuario añadido correctamente/i)).toBeInTheDocument();
     });
   });
 
@@ -87,7 +92,7 @@ describe('AddUser component', () => {
     expect(screen.queryByText(/Error: Internal Server Error/i)).toBeNull();
 
     await waitFor(() => {
-      expect(screen.getByText(/Error: Internal Server Error/i)).toBeInTheDocument();
+      expect(screen.getByText(/Error: Error al crear usuario/i)).toBeInTheDocument();
     });
   });
 });

webapp/src/components/Footer.css

@@ -1,12 +1,15 @@
 .footer {
-    position: absolute;
+    position: fixed;
     width: 100%;
     background-color: #f5f5f5;
     padding: 0.5rem;
     text-align: center;
-    margin-top: 90vh;
-    height: auto;
     bottom: 0;
+    margin-top: 20rem;
+}
+
+.footer p{
+    font-size: 1rem;
 }
 
 .footer a {
@@ -17,4 +20,20 @@
 
 .footer a:hover {
     text-decoration: underline;
-}
+}
+
+.footer-wiq {
+    background-color: #333;
+    font-size: 1rem;
+    color: white;
+}
+
+.footer-text {
+    font-size: 1rem;
+}
+
+.footer-text a {
+    color: #4C8DBF;
+    font-weight: 700;
+    text-decoration: underline;
+}

webapp/src/components/Footer.js

@@ -4,13 +4,13 @@ import { AppBar, Toolbar, Typography } from '@mui/material';
 
 const Footer = () => {
     return (
-        <AppBar className="footer">
+        <div className="footer footer-wiq">
             <Toolbar>
-                <Typography variant="body1" className='fs-6' color="textSecondary">
+                <p className='footer-text'>
                     © {new Date().getFullYear()} Hecho con ❤️ por <a href="https://github.com/coral2742">Coral</a>, <a href="https://github.com/baraganio">Carlos</a>, <a href="https://github.com/uo264915">Pablo</a> y <a href="https://github.com/UO290054">Raymond</a>. ASW - Curso 2023-24
-                </Typography>
+                </p>
             </Toolbar>
-        </AppBar>
+        </div>
     );
 };
 

webapp/src/components/Game.js

@@ -325,7 +325,7 @@ const getQuestions = () => {
     setGameData(newGame);
 
 
-    axios.post(`${apiEndpoint}/addgame`, gameData)
+    axios.post(`${apiEndpoint}/addgame`, newGame)
   .then(response => {
     console.log("Respuesta del servidor:", response.data);
   })

webapp/src/components/HistoricalData.css

@@ -30,7 +30,8 @@ table {
   th, td {
     padding: 0.25em;
     text-align: center;
-    border: 0.1em solid #000;
+    border: #000 solid 0.5rem;
+    font-weight: 600;
   }
 
   th[title='pregunta'] {
@@ -47,9 +48,5 @@ table {
 
   td{
     background-color: rgba(61, 178, 224, 0.764);
+    border: #000 solid 0.5rem;
   }
-
-
-
-
-

webapp/src/components/HistoricalData.js

@@ -14,7 +14,7 @@ const HistoricalData = () => {
   useEffect(() => {
     handleShowHistory();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // No es necesario deshabilitar eslint, ya que no hay dependencias externas
+  }, []);
 
   const handleShowHistory = async () => {
     try {
@@ -31,7 +31,7 @@ const HistoricalData = () => {
 
   const handleChangeRowsPerPage = (event) => {
     setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0); // Reiniciar a la primera página cuando cambia el número de filas por página
+    setPage(0);
   };
 
 
@@ -59,12 +59,12 @@ const HistoricalData = () => {
           </TableHead>
           <TableBody>
             {paginatedData.map((row, rowIndex) => (
-                  <TableRow key={rowIndex}>
-                    <TableCell>{row[0]}</TableCell>
-                    <TableCell>{row[1]}</TableCell>
-                    <TableCell>{row[2]}</TableCell>
-                    <TableCell>{row[3]}</TableCell>
-                    <TableCell>{row[4]}</TableCell>
+                  <TableRow key={rowIndex} style={{ border: '#000 solid 0.1rem' }}>
+                    <td>{row[0]}</td>
+                    <td style={{ backgroundColor: '#B8DEB8' }}>{row[1]}</td>
+                    <td style={{ backgroundColor: '#DAAEAE' }}>{row[2]}</td>
+                    <td style={{ backgroundColor: '#DAAEAE' }}>{row[3]}</td>
+                    <td style={{ backgroundColor: '#DAAEAE' }}>{row[4]}</td>
                   </TableRow>
                 ))}
           </TableBody>