Visualización de usuarios registrados

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

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}`);
 });

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>

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;

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>