From 97ce4a6c066f379e78e811dbec226d81775b2761 Mon Sep 17 00:00:00 2001
From: baraganio <carlossrsi07@gmail.com>
Date: Mon, 15 Apr 2024 13:10:46 +0200
Subject: [PATCH 1/2] Paginacion en tabla de historicaldata

---
 webapp/src/components/HistoricalData.js | 63 +++++++++++++++++--------
 1 file changed, 44 insertions(+), 19 deletions(-)

diff --git a/webapp/src/components/HistoricalData.js b/webapp/src/components/HistoricalData.js
index 58ea119e..c0835caf 100644
--- a/webapp/src/components/HistoricalData.js
+++ b/webapp/src/components/HistoricalData.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import React, { useState} from 'react';
 import { useNavigate} from 'react-router-dom';
-import { Container, Button} from '@mui/material';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Container, Button, TablePagination  } from '@mui/material';
 import './HistoricalData.css';
 
 const HistoricalData = () => {
@@ -9,6 +9,21 @@ const HistoricalData = () => {
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const [questionsHistory, setQuestionsHistory] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const paginatedData = questionsHistory.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  
 
   const  handleShowHistory = async () => {
     try{
@@ -39,27 +54,37 @@ const HistoricalData = () => {
         </Button>
     </div>
     <div>
-        <table>
-          <thead>
-            <tr>
-              <th title='pregunta'>Pregunta</th>
-              <th title='correcta'>Opción correcta</th>
-              <th title='incorrecta'>Opción incorrecta 1</th>
-              <th title='incorrecta'>Opción incorrecta 2</th>
-              <th title='incorrecta'>Opción incorrecta 3</th>
-            </tr>
-          </thead>
-          <tbody>
-            {questionsHistory.map((row, rowIndex) => (
-              <tr key={rowIndex}>
+      <TableContainer>
+        <Table sx={{ minWidth: 650 }} aria-label="customized table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Pregunta</TableCell>
+              <TableCell>Opción correcta</TableCell>
+              <TableCell>Opción incorrecta 1</TableCell>
+              <TableCell>Opción incorrecta 2</TableCell>
+              <TableCell>Opción incorrecta 3</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {paginatedData.map((row, rowIndex) => (
+              <TableRow key={rowIndex}>
                 {row.map((cell, cellIndex) => (
-                  <td key={cellIndex}>{cell}</td>
+                  <TableCell key={cellIndex}>{cell}</TableCell>
                 ))}
-              </tr>
+              </TableRow>
             ))}
-          </tbody>
-        </table>
-      </div>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={questionsHistory.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+    </div>
   </Container>
 
   );

From d0b78a807ec8612b3839951f85ad2975eebb58de Mon Sep 17 00:00:00 2001
From: uo264915 <uo264915@uniovi.es>
Date: Mon, 15 Apr 2024 13:33:27 +0200
Subject: [PATCH 2/2] Sincro develop (15-Abril)

---
 webapp/src/components/Game.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/Game.js b/webapp/src/components/Game.js
index 49df120a..51d1a500 100644
--- a/webapp/src/components/Game.js
+++ b/webapp/src/components/Game.js
@@ -469,7 +469,7 @@ const getQuestions = () => {
           </Typography>
           <div>
             <Button title='puntuacion' onMouseEnter={null} variant="contained" color="primary" disabled={true}>
-              Puntuación: {percentage.toFixed(2)} % 
+              Puntuación: {percentage} % 
             </Button>
           </div>