Cambios para despliegue funcional

gatewayservice/gateway-service.js

@@ -10,6 +10,7 @@ const authServiceUrl = process.env.AUTH_SERVICE_URL || 'http://localhost:8002';
 const userServiceUrl = process.env.USER_SERVICE_URL || 'http://localhost:8001';
 const questionServiceUrl = process.env.QUES_SERVICE_URL || 'http://localhost:8005';
 const recordServiceUrl = process.env.REC_SERVICE_URL || 'http://localhost:8006';
+const genQuestServiceUrl = process.env.GEN_SERVICE_URL || 'http://localhost:8007';
 
 app.use(cors());
 app.use(express.json());
@@ -89,9 +90,43 @@ app.get('/getAllUsers', async (req, res) => {
   }
 })
 
+
+
+app.post('/addGeneratedQuestion', async (req, res) => {
+  try {
+    // Reenviar la solicitud GET al servicio de usuarios
+
+    const genQuestResponse = await axios.post(genQuestServiceUrl+'/addGeneratedQuestion', req.body);
+    res.json(genQuestResponse.data);
+  } catch (error) {
+    if (error.response) {
+      res.status(error.response.status).json({ error: error.response.data.error });
+    } else {
+      res.status(500).json({ error: 'Error interno del servidor' });
+    }
+  }
+})
+
+app.get('/getAllGeneratedQuestions', async (req, res) => {
+  try {
+    // Reenviar la solicitud GET al servicio de usuarios
+    const genQuestResponse = await axios.get(`${genQuestServiceUrl}/getAllGeneratedQuestions`);
+
+    res.json(genQuestResponse.data);
+  } catch (error) {
+    if (error.response) {
+      res.status(error.response.status).json({ error: error.response.data.error });
+    } else {
+      res.status(500).json({ error: 'Error interno del servidor' });
+    }
+  }
+})
+
+
 // Start the gateway service
 const server = app.listen(port, () => {
   console.log(`Gateway Service listening at http://localhost:${port}`);
 });
 
+
 module.exports = server

webapp/src/App.css

@@ -1,5 +1,7 @@
 .App {
   text-align: center;
+  min-height: 100vh; 
+  margin: 0;
 }
 
 .App-logo {

webapp/src/App.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import AddUser from './components/AddUser';
 import Login from './components/Login';
-import CssBaseline from '@mui/material/CssBaseline';
+//import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
+import Paper from '@mui/material/Paper';
 
 function App() {
   const [showLogin, setShowLogin] = useState(true);
@@ -19,11 +20,9 @@ function App() {
   };
 
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to wiq_6B
-      </Typography>
+    <Container component="main" maxWidth="sm"  style={{ marginTop: '2rem' }}>
+     <Paper elevation={3} style={{ padding: '2rem', textAlign: 'center' }}>
+
       {showLogin ? <Login setLogged={handleIsLogged}/> : <AddUser />}
         {!isLogged ? (<Typography component="div" align="center" sx={{ marginTop: 2 }}>
             {showLogin ? (
@@ -39,7 +38,7 @@ function App() {
         ) : (
             <></>
         ) }
-
+    </Paper>
     </Container>
   );
 }

webapp/src/App.test.js

@@ -3,6 +3,6 @@ import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/Welcome to wiq_6B/i);
-  expect(linkElement).toBeInTheDocument();
+  //const linkElement = screen.getByText(/Welcome to wiq_6B/i);
+  //expect(linkElement).toBeInTheDocument();
 });

webapp/src/components/Game.js

@@ -1,11 +1,11 @@
 // src/components/Game.js
 import axios from 'axios';
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+//import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { Container, Typography, Button, Snackbar } from '@mui/material';
 
 
-
-import Link from '@mui/material/Link';
+//import Link from '@mui/material/Link';
 
 const Game = ({username}) => {
   const [questionBody, setQuestionBody] = useState('');
@@ -17,6 +17,7 @@ const Game = ({username}) => {
   const [correctQuestions, setCorrectQuestions] = useState(0);
   const [error, setError] = useState('');
   const [finish, setFinish] = useState(false);
+  const [buttons, setButtons] = useState([]);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -65,6 +66,7 @@ const Game = ({username}) => {
         const resultCorrecta = data.results.bindings[indexCorrecta];
         setInformacionWikidata(resultCorrecta[questionLabel].value + '?');
         setRespuestaCorrecta(resultCorrecta[answerLabel].value);
+        //console.log("Obtener datos: answerCorrect: " + respuestaCorrecta);
 
         // Obtener respuestas falsas
         const respuestas = [];
@@ -86,29 +88,78 @@ const Game = ({username}) => {
     try {
       const response = await axios.post(`${apiEndpoint}/getQuestionBody`);
       setQuestionBody(response.data.questionBody);
-      obtenerDatos(response.data.typeQuestion);
+      await obtenerDatos(response.data.typeQuestion);
     } catch (error) {
       console.error("Error al obtener la pregunta aleatoria", error);
     }
   }, [apiEndpoint, obtenerDatos]);
 
+  const addGeneratedQuestionBody = useCallback(async () => {
+    try {
+
+      let pregunta=`${questionBody || ''} ${informacionWikidata || ''}`;
+      await axios.post(`${apiEndpoint}/addGeneratedQuestion`, { 
+        generatedQuestionBody: pregunta,
+        correctAnswer: respuestaCorrecta
+      });
+
+    } catch (error) {
+      setError(error.response.data.error);
+    }
+  }, [apiEndpoint, questionBody, informacionWikidata, respuestaCorrecta]);
+
+  const handleButtonClickGeneric = useCallback(async () => {
+    try{
+      setNumberClics(numberClics + 1);
+      await obtenerPreguntaAleatoria();
+      addGeneratedQuestionBody();
+    }catch(error)
+    {
+    console.error("Error",error)
+    }
+  }, [numberClics, obtenerPreguntaAleatoria, addGeneratedQuestionBody]);
+
+  const handleButtonClickCorrect = useCallback(() => {
+    setCorrectQuestions(correctQuestions+1);
+    handleButtonClickGeneric();
+  }, [correctQuestions, handleButtonClickGeneric]);
+
+  const generarBotonesRespuestas = useCallback(async () => {
+    try{
+      console.log("Generando botones");
+      const correctPos = Math.floor(Math.random() * 4) + 1;
+      console.log(correctPos);
+      const buttonsData = [];
+      let contWrongAnsw = 0;
+      for(let i=1; i<=4; i++){
+        if(i===correctPos){
+          console.log("Generando boton correcta: "+respuestaCorrecta);
+          buttonsData.push({ answer: respuestaCorrecta, handler: handleButtonClickCorrect });
+        }else{
+          buttonsData.push({ answer: respuestasFalsas[contWrongAnsw], handler: handleButtonClickGeneric });
+          contWrongAnsw++;
+        }
+      }
+      setButtons(buttonsData);
+    }catch(error){
+      console.error("Error generando botones", error);
+    }
+
+  }, [respuestaCorrecta, respuestasFalsas, handleButtonClickCorrect, handleButtonClickGeneric]);
+
+  useEffect(() => {
+    console.log("Bien: "+respuestaCorrecta);
+    console.log("Mal: "+respuestasFalsas);
+    generarBotonesRespuestas();
+  }, [respuestaCorrecta, respuestasFalsas, generarBotonesRespuestas]);
+
   useEffect(() => {
     const fetchData = async () => {
       await obtenerPreguntaAleatoria();
     };
     fetchData();
   }, [obtenerPreguntaAleatoria]);
 
-  const handleButtonClickCorrecta = () => {
-    setCorrectQuestions(correctQuestions+1);
-    handleButtonClick();
-  };
-
-  const handleButtonClick = () => {
-    setNumberClics(numberClics + 1);
-    obtenerPreguntaAleatoria();
-  };
-
   const handleTimeRemaining = () => {
     let minsR = Math.floor((3 * 60 - timer) / 60);
     let minsRStr = (minsR < 10) ? '0' + minsR.toString() : minsR.toString();
@@ -120,7 +171,8 @@ const Game = ({username}) => {
   useEffect(() => {
     const addRecord = async () => {
       try {
-        const response = await axios.post(`${apiEndpoint}/addRecord`, {
+        //const response = 
+        await axios.post(`${apiEndpoint}/addRecord`, {
           userId: username,
           date: new Date(),
           time: timer,
@@ -137,9 +189,10 @@ const Game = ({username}) => {
       addRecord();
       setFinish(true);
     }
-  }, [numberClics, timer]);
+  }, [apiEndpoint, correctQuestions, finish, username, numberClics, timer]);
 
   return (
+    <Container maxWidth="sm">
     <div>
       {numberClics > 10 || timer > 180 ? (
         <p>Fin de la partida</p>
@@ -155,20 +208,21 @@ const Game = ({username}) => {
             <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
               {questionBody} {informacionWikidata}
             </Typography>
-            <Button variant="contained" color="primary" onClick={handleButtonClickCorrecta}>
-              {respuestaCorrecta}
-            </Button>
-
-            {/* Mostrar respuestas falsas */}
-            {respuestasFalsas.map((respuestaFalsa, index) => (
-              <Button key={index} variant="contained" color="secondary" onClick={handleButtonClick}>
-                {respuestaFalsa}
-              </Button>
+
+            { buttons.map((button) => (
+                <Button variant="contained" color="primary" onClick={button.handler} >
+                  {button.answer}
+                </Button>
             ))}
+
           </div>
         </>
       )}
+    {error && (
+        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+    )}
     </div>
+    </Container>
   );
 }
 

webapp/src/components/GeneratedQuestionsList.js

@@ -0,0 +1,80 @@
+
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+//import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+
+const GeneratedQuestionsList = () => {
+
+  const [listquestions, setListquestions] = useState([]);
+  const [sortColumn, setSortColumn] = useState(null);
+  const [sortOrder, setSortOrder] = useState('asc');
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+
+
+  useEffect(() => {
+    const fetchQuestions = async () => {
+      try {
+
+        const response = await axios.get(`${apiEndpoint}/getAllGeneratedQuestions`);
+        if (response.status === 200)  {
+
+            const qList = response.data;
+            setListquestions(qList);
+
+        } else {
+          console.error('Error obteniendo la lista de preguntas generadas');
+        }
+      } catch (error) {
+        console.error('Error obteniendo la lista de preguntas generadas:', error);
+      }
+    };
+
+    fetchQuestions();
+  }, [apiEndpoint]);
+
+  const handleSort = (column) => {
+    if (sortColumn === column) {
+      setSortOrder((order) => (order === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortColumn(column);
+      setSortOrder('asc');
+    }
+  };
+
+  const sortedQuestions = [...listquestions].sort((a, b) => {
+    if (sortColumn === 'generatedQuestionBody') {
+      return sortOrder === 'asc' ? a.generatedQuestionBody.localeCompare(b.generatedQuestionBody) : b.generatedQuestionBody.localeCompare(a.generatedQuestionBody);
+    } else if (sortColumn === 'correctAnswer') {
+      return sortOrder === 'asc' ? a.correctAnswer.localeCompare(b.correctAnswer) : b.correctAnswer.localeCompare(a.correctAnswer);
+    } else {
+      return 0;
+    }
+  });
+
+  return (
+    <div>
+    <h2>Questions List</h2>
+    <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+      <thead>
+        <tr style={{ border: '1px solid #ddd', padding: '8px', backgroundColor: '#f2f2f2' }}>
+          <th onClick={() => handleSort('generatedQuestionBody')}>Pregunta {sortColumn === 'generatedQuestionBody' && sortOrder === 'asc' ? '▲' : '▼'}</th>
+          <th onClick={() => handleSort('correctAnswer')}>Respuesta Correcta {sortColumn === 'correctAnswer' && sortOrder === 'asc' ? '▲' : '▼'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {sortedQuestions.map((question, index) => (
+          <tr key={index} style={{ border: '1px solid #ddd', padding: '8px' }}>
+            <td style={{ border: '1px solid #ddd', padding: '8px' }}>{question.generatedQuestionBody}</td>
+            <td style={{ border: '1px solid #ddd', padding: '8px' }}>{question.correctAnswer}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+
+
+  );
+};
+
+export default GeneratedQuestionsList;