Merge branch 'UO287747-Develop' of https://github.com/Arquisoft/wiq_es3b

 into UO287747-Develop

docs/src/04_solution_strategy.adoc

@@ -12,6 +12,7 @@ This page contains a short summary and explanation of the fundamental decisions
 Below, all the technologies to be used in the development of the application are listed:
 
 * *JavaScript / React:* A JavaScript library designed to facilitate the development of web applications.
+* *Material UI:* Set of user interface components for web applications.
 * *JavaScript / NodeJS:* An asynchronous runtime environment based on JavaScript.
 * *MongoDB:* A document-oriented NoSQL database system.
 * *Docker:* Used for deploying applications locally.
@@ -76,9 +77,8 @@ This section addresses the fundamental decisions for the project's architecture.
 
 |===
 
-| *Data Management* |
-| *Deployment* |
-| *Security* |
-| *Monitoring* |
+| *Deployment* | Use of Azure for application deployment
+| *Security* | User access control
+| *Monitoring* | Prometheus and Grafana for monitoring
 
 |===

docs/src/06_runtime_view.adoc

@@ -49,18 +49,4 @@ In this view, the user can watch this options about his past games:
 - Best times
 - Correct/incorrect questions
 
-[plantuml,"sequencediagram-history",png]
-----
-actor User as user
-participant HistoryMS as MS
-participant MongoDB as db
-
-activate MS
-
-user -> MS: Request history
-MS -> db: Asks for the history
-db -> MS: Gives the user's history
-MS -> user: Shows the history
-
-deactivate MS
-----
+image::06_history.png["Game"]

docs/src/08_concepts.adoc

@@ -1,10 +1,14 @@
 ifndef::imagesdir[:imagesdir: ../images]
 
 [[section-concepts]]
-## First Designs
 
-### Home Page
+## 1.0 Designs
+
+### User Page
 :imagesdir: ../images
+image::UserView.png[User View]
+---
+### Home Page
 image::HomeView.png[Home Menu View]
 ---
 ### Game page
@@ -36,4 +40,4 @@ Various expansions to the application are proposed, such as a multiplayer versio
 
 ### Data persistence and availability:
 Application data is stored using MongoDB, one of the most commonly used NoSQL databases.
-The application can be deployed at any time locally or in an environment such as a virtual machine.
+The application can be deployed at any time locally or in an environment such as a virtual machine.

gameservice/game-service.js

@@ -156,9 +156,9 @@ app.get('/getParticipation/:userId', async (req, res) => {
       },
     ]);
 
-    if (participationData.length === 0) {
+    if (participationData.length === 0 || (participationData.length > 0 && participationData[0].totalGames === 0)) {
       // No se encontraron datos para el usuario
-      res.status(404).json({ error: 'No participation data found for the user.' });
+      res.status(204).send();
       return;
     }
 

gameservice/game-service.test.js

@@ -39,7 +39,6 @@ beforeEach(async () => {
     totalTime: 1200,
     gameMode: 'normal'
   });
-
 });
 
 afterEach(async () => {
@@ -82,7 +81,6 @@ describe('Game Service', () => {
       totalTime: 1200,
     };
 
-
     const response = await request(app).get(`/getParticipation/${userId}`);
 
     expect(response.status).toBe(200);
@@ -95,7 +93,19 @@ describe('Game Service', () => {
     const response = await request(app).get(`/getParticipation/${nonExistentUserId}`);
 
     expect(response.status).toBe(404);
-    expect(response.body).toEqual({ error: 'No participation data found for the user.' });
+    expect(response.body).toEqual({ error: 'User not found.' });
+  });
+  it('should return 204 when getting participation data for user with totalGames equal to 0', async () => {
+    const userNoGames = await User.create({
+      username: 'noGames',
+      profileImage: 'defaultProfileImg',
+      password: 'password123'
+    });
+    userNGId = userNoGames._id;
+
+    const response = await request(app).get(`/getParticipation/${userNGId}`);
+
+    expect(response.status).toBe(204);
   });
 });
 describe('Api info users', () => {

users/authservice/auth-service.js

@@ -39,7 +39,7 @@ app.post('/login', async (req, res) => {
       // Generate a JWT token
       const token = jwt.sign({ userId: user._id }, 'your-secret-key', { expiresIn: '1h' });
       // Respond with the token and user information
-      res.json({ token: token, username: username, createdAt: user.createdAt, userId: user._id });
+      res.json({ token: token, username: username, createdAt: user.createdAt, profileImage: user.profileImage, userId: user._id });
       return;
     } else {
       res.status(401).json({ error: 'Invalid credentials' });

webapp/src/components/AddUser.js

@@ -35,7 +35,7 @@ const AddUser = ({goTo}) => {
       setOpenSnackbar(true);
       try{
         const response = await axios.post(`${apiEndpoint}/login`, { username, password });
-        const { createdAt: userCreatedAt, username: loggedInUsername, token, profileImage, userId: id } = response.data;
+        const { createdAt: userCreatedAt, username: loggedInUsername, token: token, profileImage: profileImage, userId: id } = response.data;
         setLoginSuccess(true);
         saveSessionData({ username: loggedInUsername, createdAt: userCreatedAt, token: token, profileImage: profileImage, userId: id });
       } catch (error) {

webapp/src/components/Login.js

@@ -27,7 +27,7 @@ const Login = ({ goTo }) => {
       const response = await axios.post(`${apiEndpoint}/login`, { username, password });
 
       // Extract data from the response
-      const { createdAt: userCreatedAt, username: loggedInUsername, token, profileImage, userId: id } = response.data;
+      const { createdAt: userCreatedAt, username: loggedInUsername, token: token, profileImage: profileImage, userId: id } = response.data;
 
       setTimeStart(Date.now());
       setCreatedAt(userCreatedAt);

webapp/src/components/Participation.jsx

@@ -7,15 +7,22 @@ const gatewayUrl = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"
 export const Participation = ({ goTo }) => {
   const { sessionData } = useContext(SessionContext); // Obtener datos de sesión del contexto
   const [participationData, setParticipationData] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     // Realizar la solicitud al servidor para obtener los datos de participación
     const fetchData = async () => {
       try { 
         const response = await axios.get(`${gatewayUrl}/getParticipation/${sessionData.userId}`); 
-        setParticipationData(response.data);
+        if (response.status === 204) {
+          setLoading(false);
+        } else {
+          setParticipationData(response.data);
+          setLoading(false);
+        }
       } catch (error) {
         console.error('Error al obtener los datos de participación:', error);
+        setLoading(false);
       }
     };
 
@@ -28,15 +35,19 @@ export const Participation = ({ goTo }) => {
     <main>
       <div>
         <h1>Participación</h1>
-        {participationData !== null ? (
-          <div>
-            <p>Número de partidas jugadas: {participationData.totalGames}</p>
-            <p>Preguntas acertadas: {participationData.correctAnswers}</p>
-            <p>Preguntas falladas: {participationData.incorrectAnswers}</p>
-            <p>Tiempo total jugando: {participationData.totalTime} segundos</p>
-          </div>
+        {loading ? (
+          <p>{participationData ? 'Cargando datos de participación...' : 'No hay datos de participación'}</p>
         ) : (
-          <p>Cargando datos de participación...</p>
+          participationData !== null ? (
+            <div>
+              <p>Número de partidas jugadas: {participationData.totalGames}</p>
+              <p>Preguntas acertadas: {participationData.correctAnswers}</p>
+              <p>Preguntas falladas: {participationData.incorrectAnswers}</p>
+              <p>Tiempo total jugando: {participationData.totalTime} segundos</p>
+            </div>
+          ) : (
+            <p>No hay datos de participación</p>
+          )
         )}
       </div>
     </main>