From 223037841497b2cf8cff836f44bd80e2c1fec2da Mon Sep 17 00:00:00 2001
From: Zohaib Akhtar Kausar <zohaib0614@gmail.com>
Date: Mon, 25 Mar 2024 13:37:51 +0100
Subject: [PATCH] Arreglo test para despliegue V2

---
 webapp/src/components/pages/Jugar.js | 29 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/webapp/src/components/pages/Jugar.js b/webapp/src/components/pages/Jugar.js
index a940e9b..dd6310e 100644
--- a/webapp/src/components/pages/Jugar.js
+++ b/webapp/src/components/pages/Jugar.js
@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, {useContext, useState, useEffect, useCallback} from "react";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../AuthContext';
 import "./Jugar.css";
@@ -6,7 +6,7 @@ import axios from 'axios';
 
 // Configuración inicial y datos
 const INITIAL_TIMER = 20;
-
+const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
 
 
@@ -35,8 +35,9 @@ function Jugar() {
     ]
   }]);
 
+
   useEffect(() => {
-    const getQuestions = async() => {
+    const getQuestions = async () => {
       try {
         console.log("Requesting random questions to " + apiEndpoint);
         const response = await axios.get(`${apiEndpoint}/getquestions`);
@@ -51,11 +52,12 @@ function Jugar() {
     if (!isLoggedIn) {
       navigate('/login');
     } else {
-      getQuestions().then(r =>{});
+      getQuestions();
     }
-  }, [isLoggedIn, navigate]);
+  }, [isLoggedIn, navigate]); // Asegúrate de incluir apiEndpoint en las dependencias si su valor puede cambiar.
+
 
-  const handleNextQuestion = (timeExpired = false) => {
+  const handleNextQuestion = useCallback((timeExpired = false) => {
     setTimer(INITIAL_TIMER);
     if (selectedAnswerIndex !== null || timeExpired) {
       const isCorrect =
@@ -69,23 +71,24 @@ function Jugar() {
       setCurrentQuestionIndex(currentQuestionIndex + 1);
       setSelectedAnswerIndex(null);
     } else {
-      //Finaliza el quiz
+      // Finaliza el quiz
       setQuizFinished(true);
 
-      //Guardamos en el historial los datos de la partida
+      // Guardamos en el historial los datos de la partida
       axios.post(`${apiEndpoint}/savehistory`, {
         username: username,
-        NumPreguntasJugadas: questions.length, // Número total de preguntas jugadas (la longitud de la matriz de preguntas)
-        NumAcertadas: correctAnswers, // Número de preguntas respondidas correctamente
+        NumPreguntasJugadas: questions.length,
+        NumAcertadas: correctAnswers,
       })
           .then(response => {
-            console.log(response.data); // Mensaje de confirmación del servidor
+            console.log(response.data);
           })
           .catch(error => {
             console.error('Error al guardar el historial:', error);
           });
     }
-  };
+  }, [currentQuestionIndex, selectedAnswerIndex, correctAnswers, questions, username]);
+
 
   useEffect(() => {
     if (!quizFinished && questionsLoaded) {
@@ -106,8 +109,6 @@ function Jugar() {
     setSelectedAnswerIndex(index);
   };
 
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
-
 
   const videoSource = quizFinished ? "/videos/celebracion.mp4" : "/videos/question.mp4";
   // Renderizado del componente