Dev

gatewayservice/gateway-service.js

@@ -9,6 +9,7 @@ const port = 8000;
 const authServiceUrl = process.env.AUTH_SERVICE_URL || 'http://localhost:8002';
 const userServiceUrl = process.env.USER_SERVICE_URL || 'http://localhost:8001';
 const questionServiceUrl = process.env.QUES_SERVICE_URL || 'http://localhost:8005';
+const recordServiceUrl = process.env.REC_SERVICE_URL || 'http://localhost:8006';
 
 app.use(cors());
 app.use(express.json());
@@ -42,6 +43,14 @@ app.post('/adduser', async (req, res) => {
   }
 });
 
+app.post('/addRecord', async(req, res) => {
+  try{
+    const recordResponse = await axios.post(recordServiceUrl+'/addRecord', req.body);
+  }catch (error){
+    res.status(error.response.status).json({ error: error.response.data.error });
+  }
+});
+
 app.post('/getQuestionBody', async (req, res) => {
   try {
     // Forward the add user request to the user service

questions/recordservice/record-service.js

@@ -36,7 +36,7 @@ app.post('/addRecord', async (req, res) => {
       correctQuestions: req.body.correctQuestions,
       failedQuestions: req.body.failedQuestions
   });
-  newRecord.save();
+  await newRecord.save();
   res.json(newRecord);
 
   } catch (error) {

webapp/src/App.js

@@ -8,6 +8,11 @@ import Link from '@mui/material/Link';
 
 function App() {
   const [showLogin, setShowLogin] = useState(true);
+  const [isLogged, setLogged] = useState(false);
+
+  const handleIsLogged = () => {
+    setLogged(true);
+  };
 
   const handleToggleView = () => {
     setShowLogin(!showLogin);
@@ -19,18 +24,22 @@ function App() {
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
         Welcome to wiq_6B
       </Typography>
-      {showLogin ? <Login /> : <AddUser />}
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-            Don't have an account? Register here.
-          </Link>
+      {showLogin ? <Login setLogged={handleIsLogged}/> : <AddUser />}
+        {!isLogged ? (<Typography component="div" align="center" sx={{ marginTop: 2 }}>
+            {showLogin ? (
+                <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
+                    Don't have an account? Register here.
+                </Link>
+            ) : (
+                <Link component="button" variant="body2" onClick={handleToggleView}>
+                    Already have an account? Login here.
+                </Link>
+            )}
+        </Typography>
         ) : (
-          <Link component="button" variant="body2" onClick={handleToggleView}>
-            Already have an account? Login here.
-          </Link>
-        )}
-      </Typography>
+            <></>
+        ) }
+
     </Container>
   );
 }

webapp/src/components/Game.js

@@ -7,13 +7,16 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
 
 import Link from '@mui/material/Link';
 
-const Game = () => {
+const Game = ({username}) => {
   const [questionBody, setQuestionBody] = useState('');
   const [informacionWikidata, setInformacionWikidata] = useState('');
   const [respuestaCorrecta, setRespuestaCorrecta] = useState('');
   const [respuestasFalsas, setRespuestasFalsas] = useState([]);
   const [numberClics, setNumberClics] = useState(1);
   const [timer, setTimer] = useState(0);
+  const [correctQuestions, setCorrectQuestions] = useState(0);
+  const [error, setError] = useState('');
+  const [finish, setFinish] = useState(false);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -96,6 +99,11 @@ const Game = () => {
     fetchData();
   }, [obtenerPreguntaAleatoria]);
 
+  const handleButtonClickCorrecta = () => {
+    setCorrectQuestions(correctQuestions+1);
+    handleButtonClick();
+  };
+
   const handleButtonClick = () => {
     setNumberClics(numberClics + 1);
     obtenerPreguntaAleatoria();
@@ -109,10 +117,32 @@ const Game = () => {
     return `${minsRStr}:${secsRStr}`;
   };
 
+  useEffect(() => {
+    const addRecord = async () => {
+      try {
+        const response = await axios.post(`${apiEndpoint}/addRecord`, {
+          userId: username,
+          date: new Date(),
+          time: timer,
+          money: (25*correctQuestions),
+          correctQuestions: correctQuestions,
+          failedQuestions: (10-correctQuestions)
+        });
+      } catch (error) {
+        setError(error.response.data.error);
+      }
+    };
+
+    if((numberClics>10 || timer>180) && !finish){
+      addRecord();
+      setFinish(true);
+    }
+  }, [numberClics, timer]);
+
   return (
     <div>
       {numberClics > 10 || timer > 180 ? (
-        <p>Fin</p>
+        <p>Fin de la partida</p>
       ) : (
         <>
           <Typography component="h1" variant='h5' sx={{ textAlign: 'center' }}>
@@ -125,7 +155,7 @@ const Game = () => {
             <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
               {questionBody} {informacionWikidata}
             </Typography>
-            <Button variant="contained" color="primary" onClick={handleButtonClick}>
+            <Button variant="contained" color="primary" onClick={handleButtonClickCorrecta}>
               {respuestaCorrecta}
             </Button>
 

webapp/src/components/Login.js

@@ -1,15 +1,14 @@
 // src/components/Login.js
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
-
+import { Container, Typography, TextField, Button, Snackbar, AppBar, Toolbar, Link } from '@mui/material';
 
 import Game from './Game';
 import UsersList from './UsersList';
 
 //import Link from '@mui/material/Link';
 
-const Login = () => {
+const Login = ({setLogged}) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -25,7 +24,7 @@ const Login = () => {
     try {
       const response = await axios.post(`${apiEndpoint}/login`, { username, password });
 
-      // Extract data from the response
+      // Extraer datos de la respuesta
       const { createdAt: userCreatedAt } = response.data;
 
       setCreatedAt(userCreatedAt);
@@ -38,81 +37,88 @@ const Login = () => {
   };
 
   const handleShowGame = () => {
+    setLogged();
     setShowGame(true);
+    setShowUsersList(false);
   };
 
-  const handleCloseSnackbar = () => {
-    setOpenSnackbar(false);
+  const handleShowUsersList = () => {
+    setShowUsersList(true);
+    setShowGame(false);
   };
 
-  const handleShowUsersList= () => {
-    setShowUsersList(true);
+  const handleCloseSnackbar = () => {
+    setOpenSnackbar(false);
   };
 
   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}!
-                  </Typography>
-                  <Typography component="p" variant="body1" sx={{textAlign: 'center', marginTop: 2}}>
-                    Your account was created on {new Date(createdAt).toLocaleDateString()}.
-                  </Typography>
-                  <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>
-            )
-        ) : (
-            <div>
-              <Typography component="h1" variant="h5">
-                Login
-              </Typography>
-              <TextField
-                  margin="normal"
-                  fullWidth
-                  label="Username"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-              />
-              <TextField
-                  margin="normal"
-                  fullWidth
-                  label="Password"
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-              />
-              <Button variant="contained" color="primary" onClick={loginUser}>
-                Login
-              </Button>
-              <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
-              {error && (
-                  <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-              )}
-            </div>
-        )}
-      </Container>
+<Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+  {loginSuccess ? (
+    <>
+      <AppBar position="static">
+        <Toolbar>
+          <Button color="inherit" onClick={handleShowGame}>
+            Jugar
+          </Button>
+          <Button color="inherit" href="#" onClick={handleShowUsersList}>
+            Historial de Usuarios
+          </Button>
+        </Toolbar>
+      </AppBar>
+
+      {showGame ? (
+        <Game username={username} />
+      ) : showUsersList ? (
+        <UsersList />
+      ) : (
+        <div>
+          <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
+            Hello {username}!
+          </Typography>
+          <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}>
+            Your account was created on {new Date(createdAt).toLocaleDateString()}.
+          </Typography>
+          <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>
+      )}
+    </>
+  ) : (
+    <div>
+      <Typography component="h1" variant="h5">
+        Login
+      </Typography>
+      <TextField
+        margin="normal"
+        fullWidth
+        label="Username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <TextField
+        margin="normal"
+        fullWidth
+        label="Password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <Button variant="contained" color="primary" onClick={loginUser}>
+        Login
+      </Button>
+      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
+      {error && (
+        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+      )}
+    </div>
+  )}
+</Container>
   );
-};
+};  
+
 
 export default Login;