Merge pull request #145 from Arquisoft/webapp_interface

README update and fixing sonarcloud issues
Arquisoft · May 2, 2024 · 8d7dca0 · 8d7dca0
2 parents fc7ddc9 + 78b4bfb
commit 8d7dca0
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,48 @@
 # wiq_es6c
 
+## Contributors
+<div align="center">
+
+| Contributor | Contact |
+| ------------- | ------------- | 
+| Liliana Suárez Díaz | <a href="https://github.com/uo288574"><img src="https://img.shields.io/badge/uo288574-Liliana Suárez-green"></a> |
+| Marco Quintana García | <a href="https://github.com/marco-qg"><img src="https://img.shields.io/badge/marcoqg-Marco Quintana-red"></a> |
+| Abel Menéndez Hernández | <a href="https://github.com/AbelMH1"><img src="https://img.shields.io/badge/AbelMH1-Abel Menéndez-purple"></a>  |
+| Marcos Barril Villaverde | <a href="https://github.com/MarcosBarrilVillaverde"><img src="https://img.shields.io/badge/MarcosBarrilVillaverde-Marcos Barril-yellow"></a> |
+| Alejandro García Mansilla | <a href="https://github.com/alegarman2002"><img src="https://img.shields.io/badge/alegarman2002-Alejandro García-blue"></a> |
+
+</div>
+
+## Links
+- [WIQEII](http://158.179.212.42:3000)
+- [User's API](http://158.179.212.42:8100)
+    - [/users](http://158.179.212.42:8100/users) -> Información de los usuarios
+    - [/history/questions](http://158.179.212.42:8100/history/questions) -> Información de las preguntas generadas
+    - [/usersStats](http://158.179.212.42:8100/usersStats) -> Información de las estadísticas de los usuarios
+
+## Code analisis
+
+<div align="center">
+
 [![Deploy on release](https://github.com/Arquisoft/wiq_es6c/actions/workflows/release.yml/badge.svg)](https://github.com/Arquisoft/wiq_es6c/actions/workflows/release.yml)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_es6c&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_es6c)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=Arquisoft_wiq_es6c&metric=coverage)](https://sonarcloud.io/summary/new_code?id=Arquisoft_wiq_es6c)
 
-This is a base repo for the [Software Architecture course](http://arquisoft.github.io/) in [2023/2024 edition](https://arquisoft.github.io/course2324.html). 
+</div>
 
-This repo is a basic application composed of several components.
+## Components
 
+This is a repo for the [Software Architecture course](http://arquisoft.github.io/) in [2023/2024 edition](https://arquisoft.github.io/course2324.html) composed of the following components.
+
+- **Game service**. 
 - **Gateway service**. Express service that is exposed to the public and serves as a proxy to the two previous ones.
+- **Question service**. 
+- **Store question service**. 
 - **User service**. Express service that handles the insertion of new users in the system.
 - **Auth service**. Express service that handles the authentication of users.
+- **User stats service**. 
 - **Webapp**. React web application that uses the gateway service to allow basic login and new user features.
 
-Both the user and auth service share a Mongo database that is accessed with mongoose.
 
 ## Quick start guide
 

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
@@ -100,11 +100,11 @@ app.get('/questions', async (req, res) => {
 
 app.post('/storeGame', async (req, res) => {
   try {
-    var id = req.body.id
-    var username = req.body.username
-    var points = req.body.points
-    var questions = req.body.questions
-    var avgtime = req.body.avgtime
+    let id = req.body.id
+    let username = req.body.username
+    let points = req.body.points
+    let questions = req.body.questions
+    let avgtime = req.body.avgtime
     console.log("Hacemos la llamada al guardar preguntas")
     const post = await axios.post(gameService + `/storeGame`, {id, username,  points, questions, avgtime})
     console.log("Devuelve la llamada")
@@ -131,7 +131,7 @@ const YAML = require('yaml')
 
 
 // Read the OpenAPI YAML file synchronously
-openapiPath='./openapi.yaml'
+let openapiPath='./openapi.yaml'
 if (fs.existsSync(openapiPath)) {
   const file = fs.readFileSync(openapiPath, 'utf8');
 

diff --git a/webapp/src/components/AddUser.js b/webapp/src/components/AddUser.js
@@ -1,4 +1,3 @@
-// src/components/AddUser.js
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Snackbar } from '@mui/material';

diff --git a/webapp/src/components/FirstGame.js b/webapp/src/components/FirstGame.js
@@ -23,10 +23,7 @@ const Quiz = () => {
   let allQuestions = useLocation().state.questions;
   let haveEnter = false;
   let id = useLocation().state.gameId;
-  console.log(id)
 
-  // const [currentQuestionIndex, setCurrentQuestionIndex] = useState(storedInt);
-  // const [isCorrect, setIsCorrect] = useState(false);
   const [remTime, setRemTime] = useState(0);
   const [totalTime, setTotalTime] = useState(0);
 
@@ -104,8 +101,7 @@ const Quiz = () => {
     } else {
       points = points += 100;
     }
-
-
+
     // Pasar a la siguiente pregunta después de responder
     let indexAnswers = [allQuestions[currentQuestionIndex].options.indexOf(option), numberAnswer]
 
@@ -148,15 +144,15 @@ const Quiz = () => {
 
         <div className="questionStructure">
 
-          <div class="questionFirstGame">
+          <div className="questionFirstGame">
 
             <Typography class="questionText" component="h1" variant="h5" sx={{ textAlign: 'center' }}>
               {allQuestions[currentQuestionIndex].question}
             </Typography>
 
           </div>
 
-          <div class="allAnswers">
+          <div className="allAnswers">
             {allQuestions[currentQuestionIndex].options.map((option, index) => (
               <div key={index} >
                 <Button

diff --git a/webapp/src/components/FirstGame.test.js b/webapp/src/components/FirstGame.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import Quiz from './FirstGame'; // Asegúrate de importar correctamente tu componente Quiz
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ContextFun } from './Context';
@@ -50,7 +50,7 @@ const state = {
 describe('Quiz Component', () => { 
     jest.setTimeout(13000);
     it('selects the correct answer', async () => {    
-        const { getByText, getByTestId } = render(<ContextFun>
+        const { getByText } = render(<ContextFun>
             <Router>
               <Quiz />
             </Router>

diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
@@ -1,8 +1,7 @@
-// src/components/Login.js
 import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Snackbar } from '@mui/material';
-import { useNavigate } from 'react-router-dom'; // Importa useHistory
+import { useNavigate } from 'react-router-dom'; 
 import Button from './Button';
 
 const Login = () => {
@@ -15,7 +14,7 @@ const Login = () => {
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
-  const navigation = useNavigate(); // Añade esto
+  const navigation = useNavigate(); 
 
   const loginUser = async () => {
     try {

diff --git a/webapp/src/components/Menu.js b/webapp/src/components/Menu.js
@@ -8,7 +8,6 @@ import { Footer } from './footer/Footer';
 import { Nav } from './nav/Nav';
 import axios from 'axios';
 
-//var isApiCalledRef = false;//ASK - is this necessary?
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT|| 'http://localhost:8000';
 
 let topics
@@ -17,12 +16,6 @@ const Menu = () => {
 
     const navigation = useNavigate(); 
 
-    /*
-    const [selectedButtonCustomize, isSelectedButtonCustomize] = useState('');
-    const [selectedCategory, setSelectedCategory] = useState('');
-    const [selectedValue, setSelectedValue] = useState('');
-    */
-
     const getTopics = async () => {
       try {
         topics = await axios.get(`${apiEndpoint}/topics`)
@@ -34,7 +27,6 @@ const Menu = () => {
 
     const initiateGame = async () => {
       await getTopics()  
-      //isApiCalledRef = true//ASK - is this necessary?
       navigation("/gameConfiguration", {state: {topics}})
     }
 

diff --git a/webapp/src/components/game/Calculator.js b/webapp/src/components/game/Calculator.js
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { shuffleArray, secureRandomNumber, generateGameId, esperar, gameStore} from '../Util';
 import { Container, Typography, Box, LinearProgress } from '@mui/material';
 import { Footer } from '../footer/Footer';
 import { Nav } from '../nav/Nav';
 import Button from '../Button';
-import { useState, useEffect} from 'react';
 import { useNavigate } from 'react-router-dom';
 
 let questions = [];
@@ -16,7 +15,6 @@ let answeredQuestions = [];
 
 const Calculator = () => {
 
-    //let questionIndex = -1
     let username = localStorage.getItem("username")
     const [questionIndex, setQuestionIndex] = useState(0);
     const id = generateGameId();
@@ -97,7 +95,6 @@ const Calculator = () => {
     }
 
 
-    //CAMBIAR ESTO EN FUNCIÓN DE CÓMO QUERAMOS QUE SEA EL JUEGO
     const handleOptionClick = async (selectedAnswer) => {
         load = false;
         const numberAnswer = questions[questionIndex].options.indexOf(questions[questionIndex].correctAnswer);
@@ -145,15 +142,15 @@ const Calculator = () => {
 
             <div className="questionStructure">
 
-                <div class="questionCalculator">
+                <div className="questionCalculator">
 
                 <Typography id="questionText" dclass="questionText" component="h1" variant="h5" sx={{ textAlign: 'center' }}>
                     {questions[questionIndex].q}
                 </Typography>
 
                 </div>
 
-                <div class="allAnswers">
+                <div className="allAnswers">
                     {questions[questionIndex].options.map((option, index) => (
                         <div key={index} >
                         <Button

diff --git a/webapp/src/components/game/Calculator.test.js b/webapp/src/components/game/Calculator.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ContextFun } from '../Context';
-import { BrowserRouter as Router, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import Calculator from './Calculator';
 
 describe('Calculator Component', () => {

diff --git a/webapp/src/components/game/GameConfiguration.js b/webapp/src/components/game/GameConfiguration.js
@@ -3,12 +3,11 @@ import { Container } from '@mui/material';
 import { Footer } from '../footer/Footer';
 import { Nav } from '../nav/Nav';
 import Button from '../Button';
-import { useLocation, useNavigate } from 'react-router-dom'; // Importa useHistory
+import { useLocation, useNavigate } from 'react-router-dom'; 
 import axios from 'axios'
-import { shuffleArray } from '../Util';
+import { shuffleArray, generateGameId } from '../Util';
 import './GameConfiguration.css';
 import Spinner from '../spinner/Spinner';
-import { generateGameId } from '../Util';
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -21,11 +20,10 @@ const GameConfiguration = () => {
   let tematicas = ['Paises', 'Capitales'];
   let state = useLocation().state;
 
-  console.log(state)
 
-  if (state !== null)
+  if( state !== null)
     tematicas = state.topics;
-  console.log(tematicas)
+
 
   // Almacen de temáticas 
   const [tematicasSeleccionadas, setTematicasSeleccionadas] = useState([]);
@@ -55,13 +53,9 @@ const GameConfiguration = () => {
     numPreguntas = numQuestions;
     numRes = numRespuestas;
 
-    console.log(numPreguntas);
-    console.log(numRes);
-
-    gameId = await generateGameId();
+    gameId = await generateGameId();  
     await getQuestions();
-    //isApiCalledRef = true//ASK - is this necessary?
-    navigation("/firstGame", { state: { questions, gameId } })
+    navigation("/firstGame", {state: {questions, gameId}})
   }
 
   function formatearTopics() {
@@ -93,7 +87,6 @@ const GameConfiguration = () => {
     } catch (error) {
       console.error(error);
     }
-    console.log(questions)
   }
 
   return (
@@ -115,10 +108,9 @@ const GameConfiguration = () => {
                   id={`t${index}`}
                   value={option}
                   className='option-input'
-                  // checked={tematicasSeleccionadas.includes({option})}
                   onChange={handleTematicaChange}
                 />
-                <label htmlFor={`t${index}`}>{option}</label>
+              <label htmlFor={`t${index}`}>{option}</label>
               </div>
             )
             )}

diff --git a/webapp/src/components/game/GameConfiguration.test.js b/webapp/src/components/game/GameConfiguration.test.js
@@ -2,10 +2,9 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { ContextFun } from '../Context';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { BrowserRouter as Router, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import GameConfiguration from './GameConfiguration';
 
-//const request = require('supertest');
 const mockAxios = new MockAdapter(axios);
 
 describe("Game Configuration", () => {