Merge pull request #46 from Arquisoft/Cancio-GeneralFixes

Cancio general fixes
Arquisoft · Mar 5, 2024 · bb4dad8 · bb4dad8
2 parents 68a9c24 + 8451c0b
commit bb4dad8
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 89 deletions.
diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
@@ -18,6 +18,8 @@ app.use(express.json());
 const metricsMiddleware = promBundle({includeMethod: true});
 app.use(metricsMiddleware);
 
+app.set("json spaces", 40);
+
 // Health check endpoint
 app.get('/health', (req, res) => {
   res.json({ status: 'OK' });

diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -6,7 +6,7 @@ import Bateria from './pages/Bateria/Bateria.js';
 import WrongRoute from './pages/WrongRoute/WrongRoute.js';
 import Stats from './pages/Stats/Stats.js';
 import './App.css';
-import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
+import {BrowserRouter, Routes, Route} from "react-router-dom";
 import { ProtectedRoute } from './routers/ProtectedRoute.js';
 
 function App() {

diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
@@ -30,21 +30,15 @@ const JuegoPreguntas = () => {
       .then((response) => response.json())
       .then((data) => {
         setPreguntas(data);
-        //setIsLoading(false);
+        setPreguntaActual(data[0]);
+        setIsLoading(false);
       })
       .catch((error) => {
         console.error('Error al obtener las preguntas:', error);
         setIsLoading(false);
       });
   }, []);
 
-  useEffect(() => {
-    if (preguntas && preguntas.length > 0) {
-      setPreguntaActual(preguntas[0]);
-      setIsLoading(false);
-    }
-  }, [preguntas]);
-
   useEffect(() => {
     if (tiempoRestante === 0) {
       setPreguntaTerminada(true);
@@ -96,12 +90,11 @@ const JuegoPreguntas = () => {
 
     setTiempoTotal(tiempoTotal+10-tiempoRestante);
 
-
     setRespuestaSeleccionada(null);
     setTiempoRestante(10);
     if (indicePregunta + 1 < preguntas.length) {
       setIndicePregunta(indicePregunta + 1);
-      setPreguntaActual(preguntas[indicePregunta]);
+      setPreguntaActual(preguntas[indicePregunta + 1]);
     } else {
 
       try {

diff --git a/webapp/src/pages/Stats/Stats.css b/webapp/src/pages/Stats/Stats.css
@@ -24,10 +24,4 @@ input, button, a{
     color: #6b456c;
     font-family: "Times New Roman", serif;
 
-}
-
-body {
-    background-color: #ffffe5;
-    font-family: "Times New Roman", serif;
-
 }
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
@@ -1,17 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import Nav from '../../components/Nav/Nav.js';
-import Footer from '../../components/Footer/Footer.js';
-import './Stats.css';
-
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Nav from "../../components/Nav/Nav.js";
+import Footer from "../../components/Footer/Footer.js";
+import "./Stats.css";
 
 const Stats = () => {
   const [username, setUsername] = useState(localStorage.username);
   const [stats, setStats] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
-
   const fetchStats = () => {
     setIsLoading(true);
     fetch(`http://localhost:8001/getstats?user=${username}`)
@@ -21,97 +19,134 @@ const Stats = () => {
         setIsLoading(false);
       })
       .catch((error) => {
-        console.error('Error al obtener las preguntas:', error);
-        setError(error.message || 'Ha ocurrido un error al obtener las estadísticas');
+        console.error("Error al obtener las preguntas:", error);
+        setError(
+          error.message || "Ha ocurrido un error al obtener las estadísticas"
+        );
         setIsLoading(false);
       });
   };
 
   useEffect(() => {
-    fetch(`http://localhost:8001/getstats?user=${username}`)
-      .then((response) => response.json())
-      .then((data) => {
-        setStats(data);
-        setIsLoading(false);
-      })
-      .catch((error) => {
-        console.error('Error al obtener las preguntas:', error);
-        setIsLoading(false);
-      });
+    const delayDebounceFn = setTimeout(() => {
+      fetch(`http://localhost:8001/getstats?user=${username}`)
+        .then((response) => response.json())
+        .then((data) => {
+          setStats(data);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          console.error("Error al obtener las preguntas:", error);
+          setIsLoading(false);
+        });
+    }, 2000);
+    return () => clearTimeout(delayDebounceFn);
   }, [username]);
 
   const handleUsernameChange = (event) => {
     setUsername(event.target.value);
   };
-
-  const handleSearch = () => {
-    if (username.trim() !== '') {
-      fetchStats();
-    }
-  };
 
   if (isLoading) {
-    return  <div>
-              <h2> Cargando ... </h2>
-              <p>Se está consultando su búsqueda, espere unos instantes.</p>
-            </div>
+    return (
+      <div>
+        <h2> Cargando ... </h2>
+        <p>Se está consultando su búsqueda, espere unos instantes.</p>
+      </div>
+    );
   }
 
   if (error) {
-    return  <>
+    return (
+      <>
         <Nav />
         <div>
-            <label htmlFor="usernameInput">Nombre de Usuario: </label>
-              <input
-                  type="text"
-                  id="usernameInput"
-                  value={username}
-                  onChange={handleUsernameChange}
-              />
-              <button onClick={handleSearch}>Buscar</button>
-              <h2>Error: {error}</h2>
-              <p>Por favor compruebe si los valores del formulario son correctos e inténtelo de nuevo</p>
-            </div>
-            <Footer />
-            </>
+          <label htmlFor="usernameInput">Nombre de Usuario: </label>
+          <input
+            type="text"
+            id="usernameInput"
+            value={username}
+            onChange={handleUsernameChange}
+          />
+          <h2>Error: {error}</h2>
+          <p>
+            Por favor compruebe si los valores del formulario son correctos e
+            inténtelo de nuevo
+          </p>
+        </div>
+        <Footer />
+      </>
+    );
   }
 
   return (
     <>
-    <Nav />
-    <div>
-      <h2>Estadísticas de Usuario</h2>
-      <label htmlFor="usernameInput"> <strong>Nombre de Usuario: </strong></label>
-      <input
-        type="text"
-        id="usernameInput"
-        value={username}
-        onChange={handleUsernameChange}
-      />
-      <button onClick={handleSearch}>Buscar</button>
-      {stats === null && !isLoading && (
+      <Nav />
+      <div>
+        <h2>Estadísticas de Usuario</h2>
+        <label htmlFor="usernameInput">
+          {" "}
+          <strong>Nombre de Usuario: </strong>
+        </label>
+        <input
+          type="text"
+          id="usernameInput"
+          value={username}
+          onChange={handleUsernameChange}
+        />
+        {stats === null && !isLoading && (
           <div>
             <p>El usuario no ha jugado ninguna partida.</p>
           </div>
         )}
-      {stats && (
-        <div>
-          <hr></hr>
-          <p><strong>Usuario: </strong>{stats.username}</p>
-          <pre>   <strong>Juegos Jugados: </strong>{stats.nGamesPlayed}</pre>
-          <pre>   <strong>Promedio de Puntos: </strong>{stats.avgPoints}</pre>
-          <pre>   <strong>Puntos Totales: </strong>{stats.totalPoints}</pre>
-          <pre>   <strong>Preguntas Correctas Totales: </strong>{stats.totalCorrectQuestions}</pre>
-          <pre>   <strong>Preguntas Incorrectas Totales: </strong>{stats.totalIncorrectQuestions}</pre>
-          <pre>   <strong>Ratio Correctas/Incorrectas: </strong>{stats.ratioCorrectToIncorrect}</pre>
-          <pre>   <strong>Tiempo por pregunta (s): </strong>{stats.avgTime}</pre>
-          <hr></hr>
-        </div>
-      )}
-    </div>
-    <Footer />
+        {stats && (
+          <div>
+            <hr></hr>
+            <p>
+              <strong>Usuario: </strong>
+              {stats.username}
+            </p>
+            <pre>
+              {" "}
+              <strong>Juegos Jugados: </strong>
+              {stats.nGamesPlayed}
+            </pre>
+            <pre>
+              {" "}
+              <strong>Promedio de Puntos: </strong>
+              {stats.avgPoints}
+            </pre>
+            <pre>
+              {" "}
+              <strong>Puntos Totales: </strong>
+              {stats.totalPoints}
+            </pre>
+            <pre>
+              {" "}
+              <strong>Preguntas Correctas Totales: </strong>
+              {stats.totalCorrectQuestions}
+            </pre>
+            <pre>
+              {" "}
+              <strong>Preguntas Incorrectas Totales: </strong>
+              {stats.totalIncorrectQuestions}
+            </pre>
+            <pre>
+              {" "}
+              <strong>Ratio Correctas/Incorrectas: </strong>
+              {stats.ratioCorrectToIncorrect}
+            </pre>
+            <pre>
+              {" "}
+              <strong>Tiempo por pregunta (s): </strong>
+              {stats.avgTime}
+            </pre>
+            <hr></hr>
+          </div>
+        )}
+      </div>
+      <Footer />
     </>
-
   );
 };