mostrar listado usuarios

gatewayservice/gateway-service.js

@@ -66,6 +66,20 @@ app.post('/addQuestion', async (req, res) => {
   }
 });
 
+app.get('/getAllUsers', async (req, res) => {
+  try {
+    // Reenviar la solicitud GET al servicio de usuarios
+    const usersResponse = await axios.get(`${userServiceUrl}/getAllUsers`);
+    res.json(usersResponse.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}`);

webapp/src/components/Login.js

@@ -5,6 +5,7 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
 
 
 import Game from './Game';
+import UsersList from './UsersList';
 
 import Link from '@mui/material/Link';
 
@@ -16,6 +17,7 @@ const Login = () => {
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
   const [showGame, setShowGame] = useState(false);
+  const [showUsersList, setShowUsersList] = useState(false);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -43,12 +45,26 @@ const Login = () => {
     setOpenSnackbar(false);
   };
 
+  const handleShowUsersList= () => {
+    setShowUsersList(true);
+  };
+
   return (
       <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
         {loginSuccess ? (
+
+
+
             showGame ? (
                 < Game/>
-            ) : (
+            ) : 
+
+            showUsersList?(
+              < UsersList/>
+            ):
+            (
+
+
                 <div>
                   <Typography component="h1" variant="h5" sx={{textAlign: 'center'}}>
                     Hello {username}!
@@ -59,6 +75,10 @@ const Login = () => {
                   <Button variant="contained" color="secondary" onClick={handleShowGame}>
                     Comenzar a jugar
                   </Button>
+
+                  <Button variant="contained" color="secondary" onClick={handleShowUsersList}>
+                    Ver el historial de usuarios
+                  </Button>
 
                 </div>
             )

webapp/src/components/UsersList.js

@@ -0,0 +1,48 @@
+
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+
+const UsersList = () => {
+
+  const [listUsers, setListUsers] = useState([]);
+
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+
+        const response = await axios.get(`${apiEndpoint}/getAllUsers`);
+        if (response.status === 200)  {
+
+            const uList = response.data;
+          setListUsers(uList);
+
+        } else {
+          console.error('Error obteniendo la lista de usurios');
+        }
+      } catch (error) {
+        console.error('Error obteniendo la lista de usurios:', error);
+      }
+    };
+
+    fetchUsers();
+  }, []);
+
+
+  return (
+    <div>
+      <h2>Users List</h2>
+      <ul>
+        {listUsers.map((user,index) => (
+           <li key={index}>Nombre: {user.username}, fecha de registro: {user.createdAt}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default UsersList;