From 8c95df5f3678f6bbd03ea9b7fc1aac7ef9fb6e14 Mon Sep 17 00:00:00 2001 From: baraganio <carlossrsi07@gmail.com> Date: Tue, 9 Apr 2024 00:36:38 +0200 Subject: [PATCH] =?UTF-8?q?Mostrar=20los=20usuarios=20que=20est=C3=A1n=20r?= =?UTF-8?q?egistrados=20en=20la=20aplicaci=C3=B3n=20por=20pantalla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gatewayservice/gateway-service.js | 11 ++++ users/userservice/user-service.js | 11 ++++ webapp/src/components/MainPage.js | 18 +++++-- webapp/src/components/RegisteredUsers.js | 65 ++++++++++++++++++++++++ webapp/src/index.js | 2 + 5 files changed, 102 insertions(+), 5 deletions(-) create mode 100644 webapp/src/components/RegisteredUsers.js diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js index 23c20b64..4c82eac9 100644 --- a/gatewayservice/gateway-service.js +++ b/gatewayservice/gateway-service.js @@ -91,6 +91,17 @@ app.get('/getquestionshistory', async (req, res) => { } }); +app.get('/getregisteredusers', async (req, res) => { + try { + // Create a petition to the URL (le llegará a retrieve-service.js) with the option /getregisteredusers and the req.body params + const registeredUsersResponse = await axios.get(userServiceUrl+'/getregisteredusers', req.body); + // Return a json response with what we obtained on the petition + res.json(registeredUsersResponse.data); + } catch (error) { + res.status(error.response.status).json({ error: error.response.data.error }); + } +}); + // Read the OpenAPI YAML file synchronously diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js index 2cbe99ea..711d49dd 100644 --- a/users/userservice/user-service.js +++ b/users/userservice/user-service.js @@ -48,6 +48,17 @@ app.post('/adduser', async (req, res) => { } }); +app.get('/getregisteredusers', async (req, res) => { + const registeredUsers = await User.find({}); + + var solution = []; + registeredUsers.forEach(row => { + solution.push([row.username,new Date(row.createdAt).toLocaleDateString()]); + }); + + res.status(200).json(solution); +}); + const server = app.listen(port, () => { console.log(`User Service listening at http://localhost:${port}`); }); diff --git a/webapp/src/components/MainPage.js b/webapp/src/components/MainPage.js index 757bf60a..1f70359e 100644 --- a/webapp/src/components/MainPage.js +++ b/webapp/src/components/MainPage.js @@ -21,26 +21,34 @@ const MainPage = () => { navigate(path); }; + const handleShowRegisteredUsers = () => { + let path= '/RegisteredUsers'; + navigate(path); + }; + return ( <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}> <div title='main'> <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}> - ¡Bienvenido a WIQ 2024! + ¡Bienvenido a WIQ 2024! </Typography> <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}> - Puedes comenzar la partida o ver tu historial. + Puedes comenzar la partida o ver tu historial. </Typography> <Button variant="contained" color="primary" onClick={handleShowGame}> - Empezar juego + Empezar juego </Button> <Button variant="contained" color="primary" onClick={handleShowHistoricalData}> - Histórico de preguntas + Histórico de preguntas </Button> <Button variant="contained" color="primary" onClick={handleShowHistoricalUserData}> - Histórico del usuario + Histórico del usuario + </Button> + <Button variant="contained" color="primary" onClick={handleShowRegisteredUsers}> + Usuarios registrados </Button> </div> </Container> diff --git a/webapp/src/components/RegisteredUsers.js b/webapp/src/components/RegisteredUsers.js new file mode 100644 index 00000000..0ebbe269 --- /dev/null +++ b/webapp/src/components/RegisteredUsers.js @@ -0,0 +1,65 @@ +import axios from 'axios'; +import React, { useState, useEffect } from 'react'; +import { useNavigate} from 'react-router-dom'; +import { Container, Button} from '@mui/material'; + +const RegisteredUsers = () => { + const navigate = useNavigate(); + const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; + + const [registeredUsers, setRegisteredUsers] = useState([]); + + useEffect(() => { + handleShowHistory(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const handleShowHistory = async () => { + try{ + // It makes a petition to the api and store the response + const response = await axios.get(`${apiEndpoint}/getregisteredusers`, { }); + setRegisteredUsers(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 }} className='contenedor' > + + <div title='botones'> + <Button variant="contained" color="primary" onClick={handlePreviousPage}> + Página anterior + </Button> + </div> + <div> + <table> + <thead> + <tr> + <th title='pregunta'>Nombre de usuario</th> + <th title='correcta'>Fecha de registro</th> + </tr> + </thead> + <tbody> + {registeredUsers.map((row, rowIndex) => ( + <tr key={rowIndex}> + {row.map((cell, cellIndex) => ( + <td key={cellIndex}>{cell}</td> + ))} + </tr> + ))} + </tbody> + </table> + </div> + </Container> + + ); +}; + +export default RegisteredUsers; \ No newline at end of file diff --git a/webapp/src/index.js b/webapp/src/index.js index 9f794123..18eada02 100644 --- a/webapp/src/index.js +++ b/webapp/src/index.js @@ -8,6 +8,7 @@ import Game from './components/Game'; import HistoricalData from './components/HistoricalData'; import MainPage from './components/MainPage'; import HistoricalUserData from './components/HistoricalUserData'; +import RegisteredUsers from './components/RegisteredUsers'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -19,6 +20,7 @@ root.render( <Route path="/game" element={<Game />}> </Route> <Route path="/historicaldata" element={<HistoricalData />}> </Route> <Route path="/historicalUserdata" element={<HistoricalUserData />}> </Route> + <Route path="/RegisteredUsers" element={<RegisteredUsers />}> </Route> </Routes> </Router> </React.StrictMode>