Crear ventana de historial de preguntas y acabar de configurar el ser…

…vicio retrieve-service
Arquisoft · Mar 27, 2024 · 78ede82 · 78ede82
1 parent 458a4e5
commit 78ede82
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 16 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -23,7 +23,7 @@ services:
     networks:
       - mynetwork
     environment:
-      MONGODB_URI: mongodb://mongodb:27017/userdb
+      MONGODB_URI: mongodb://mongodb:27017/questiondb
 
   retrieveservice:
     container_name: retrieveservice-${teamname:-defaultASW}
@@ -37,7 +37,7 @@ services:
     networks:
       - mynetwork
     environment:
-      MONGODB_URI: mongodb://mongodb:27017/userdb
+      MONGODB_URI: mongodb://mongodb:27017/questiondb
 
   authservice:
     container_name: authservice-${teamname:-defaultASW}

diff --git a/questions/creationservice/creation-model.js b/questions/creationservice/creation-model.js
@@ -2,11 +2,26 @@ const mongoose = require('mongoose');
 
 // Crea la base de datos con las columnas especificadas
 const questionSchema = new mongoose.Schema({
-    question: String,
-    correctAnswer: String,
-    incorrectAnswer1: String,
-    incorrectAnswer2: String,
-    incorrectAnswer3: String
+    question: {
+        type: String,
+        required: true,
+    },
+    correctAnswer: {
+        type: String,
+        required: true,
+    },
+    incorrectAnswer1: {
+        type: String,
+        required: true,
+    },
+    incorrectAnswer2: {
+        type: String,
+        required: true,
+    },
+    incorrectAnswer3: {
+        type: String,
+        required: true,
+    },
 });
 
 const Question = mongoose.model('Question', questionSchema);

diff --git a/questions/retrieveservice/retrieve-service.js b/questions/retrieveservice/retrieve-service.js
@@ -1,6 +1,6 @@
 const express = require('express');
 const mongoose = require('mongoose');
-const fetch = require('node-fetch');
+const Question = require('./questionshistory-model')
 
 const app = express();
 const port = 8004;
@@ -11,10 +11,15 @@ const mongoUri = process.env.MONGODB_URI || 'mongodb://localhost:27017/questiond
 mongoose.connect(mongoUri);
 
 
-
 app.post('/getquestionshistory', async (req, res) => {
+  const questions = await Question.find({});
 
-  res.status(200).json('todo bien');
+  var solution = [];
+  questions.forEach(row => {
+    solution.push([row.question,row.correctAnswer,row.incorrectAnswer1,row.incorrectAnswer2,row.incorrectAnswer3]);
+  });
+
+  res.status(200).json(solution);
 });
 
 const server = app.listen(port, () => {

diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
@@ -109,7 +109,7 @@ const Game = () => {
           Saber y Ganar Juego
         </Typography>
         <Typography variant="body1" paragraph>
-          Pregunta {questionCounter}: ¿Cuál es la capital de {questionObject}?
+          Pregunta {questionCounter}: {questionObject}
         </Typography>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', marginTop: '2em' }}>
           {answerOptions.map((option, index) => (

diff --git a/webapp/src/components/HistoricalData.js b/webapp/src/components/HistoricalData.js
@@ -1,31 +1,64 @@
 import axios from 'axios';
+import React, { useState} from 'react';
+import { useNavigate} from 'react-router-dom';
 import { Container, Typography, Button} from '@mui/material';
 
 const HistoricalData = () => {
+  const navigate = useNavigate();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
+  const [questionsHistory, setQuestionsHistory] = useState([]);
+
   const  handleShowHistory = async () => {
     try{
       // It makes a petition to the api and store the response
       const response = await axios.post(`${apiEndpoint}/getquestionshistory`, { });
-      console.log(response);
+      setQuestionsHistory(response.data);
     }catch (error){
       console.error('Error:', error);
     }    
   }
 
+  const  handlePreviousPage = async () => {
+    let path= '/MainPage';
+    navigate(path); 
+  }
+
   return (
 
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+
       <div>
-        <Typography variant="h4" gutterBottom>
-          Pagina del HistoricalData
-        </Typography>
+        <Button variant="contained" color="primary" onClick={handlePreviousPage}> 
+          Página anterior
+        </Button>
 
         <Button variant="contained" color="primary" onClick={handleShowHistory}> 
-          Histórico de partidas
+          Cargar histórico
         </Button>
     </div>
+    <div>
+        <table>
+          <thead>
+            <tr>
+              <th>Pregunta</th>
+              <th>Opción correcta</th>
+              <th>Opción incorrecta 1</th>
+              <th>Opción incorrecta 2</th>
+              <th>Opción incorrecta 3</th>
+            </tr>
+          </thead>
+          <tbody>
+            {questionsHistory.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {row.map((cell, cellIndex) => (
+                  <td key={cellIndex}>{cell}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
   </Container>
 
   );