Merge pull request #279 from Arquisoft/separate-history

Separate history into different categories

game_service/game.js

@@ -15,7 +15,7 @@ const YAML = require('yaml')
 // My own libs
 const authMiddleware = require('./auth/authMiddleware');
 const { newGame, next, awnser, update, getGameSettingsByUser, getHistory, getHistoryByUser, setGameSettingsByUser, getNumberOfQuestions,
-  getQuestion
+  getQuestion, getGamemodes
 } = require("./game/endpoints");
 const { saveQuestionsInDB, deleteOlderQuestions, loadInitialQuestions } = require('./services/questionsService');
 
@@ -44,6 +44,7 @@ app.post('/api/game/getHistory', getHistory);
 app.post('/api/game/getHistoryByUser', getHistoryByUser);
 app.post('/api/game/numberofquestions', getNumberOfQuestions);
 app.post('/api/game/currentquestion', getQuestion);
+app.post('/api/game/gamemodes', getGamemodes);
 
 // Read the OpenAPI YAML file synchronously
 openapiPath='./openapi.yaml'

game_service/game.test.js

@@ -116,7 +116,7 @@ describe('Game Service', () => {
     {
         const response = await request(app)
             .post('/api/game/getHistory')
-            .send({ token: validToken });
+            .send({ token: validToken, gameMode: 'classic' });
 
         expect(response.statusCode).toBe(200);
     });
@@ -199,4 +199,21 @@ describe('Game Service', () => {
 
         expect(response.statusCode).toBe(200);
     });
+
+    it("Should return 200 with a valid token when get number of questions", async () => {
+        let response = await request(app)
+            .post('/api/game/numberofquestions')
+            .send({ token: validToken });
+
+        expect(response.statusCode).toBe(200);
+    });
+
+    it("Should return 200 with a valid token when get gamemodes", async () => {
+        let response = await request(app)
+            .post('/api/game/gamemodes')
+            .send({ token: validToken });
+
+        expect(response.statusCode).toBe(200);
+    });
+
 })

game_service/game/endpoints.js

@@ -171,7 +171,8 @@ const getHistory = async (req,res) => {
 
   let games = await Game.findAll({
     where: {
-      user_id: userId
+      user_id: userId,
+      gameMode: req.body.gameMode
     },
     include: [{
       model: Question,
@@ -257,4 +258,15 @@ const setGameSettingsByUser = async (req, res) =>{
   res.status(200).send(settings);
 }
 
-module.exports = {newGame, next, awnser, update, getHistory, getHistoryByUser, getGameSettingsByUser, setGameSettingsByUser, getNumberOfQuestions, getQuestion}
+const getGamemodes = async (req, res) => {
+
+    let userId = jwt.verify(req.body.token, privateKey).user_id;
+
+    let games = await Game.aggregate('gameMode', 'DISTINCT', { plain: false, where: { user_id: userId } });
+
+    res.status(200).send(games.map(game => game.DISTINCT));
+};
+
+
+module.exports = {newGame, next, awnser, update, getHistory, getHistoryByUser, getGameSettingsByUser, setGameSettingsByUser, getNumberOfQuestions, getQuestion, getGamemodes}
+

webapp/src/components/history/History.js

@@ -17,11 +17,13 @@ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { getHistory } from "../../services/user.service"
+import { getGameModes } from "../../services/game.service"
 import { Nav } from '../nav/Nav';
 import {Footer} from '../footer/Footer';
-import { CssBaseline } from '@mui/material';
+import {CssBaseline, FormControl, InputLabel, MenuItem, Select} from '@mui/material';
 import StringColorChip from './ColorChip';
 import { useTranslation } from "react-i18next";
+import "../home/Home.css";
 
 function Row(props) {
     const { t } = useTranslation();
@@ -106,25 +108,62 @@ function Row(props) {
 export const History = () => {
     const { t } = useTranslation();
     const [history, setHistory] = useState([]);
+    const [gamemodes, setGamemodes] = useState([]);
+    const [gamemodeSelected, setGamemodeSelected] = useState("classic");
 
     useEffect(() => {
-        getHistory().then(item => setHistory(item));
+        getHistory("classic").then(item => setHistory(item));
     }, [])
 
+    useEffect(() => {
+        getGameModes(localStorage.getItem("token")).then(gamemodes => setGamemodes(gamemodes));
+    }, []);
+
+    const changeGamemode = (event) => {
+        getHistory(event.target.value).then(item => setHistory(item));
+        setGamemodeSelected(event.target.value);
+        console.log("Changing history to " + event.target.value);
+    }
+
     return (
         <>
             <Nav/>
             <CssBaseline/>
+            <div className="flex content-center">
+                <div className="m-2 p-3 content-center rounded-xl bg-white w-fit">
+                    <FormControl className="content-center" sx={{width: '20rem'}}>
+                        <InputLabel id="gamemode-label"
+                                    sx={{color: 'black', fontSize: '1.3em'}}>{t("History.gamemode")}</InputLabel>
+                        <Select
+                            labelId="gamemode-cb"
+                            id="gamemode-cb"
+                            value={gamemodeSelected}
+                            label="gamemode"
+                            className="bg-white m-3"
+                            onChange={changeGamemode}
+                        >
+                            {
+                                gamemodes.map((gamemode) =>
+                                    <MenuItem value={gamemode} key={gamemode}>{gamemode}</MenuItem>
+                                )
+                            }
+                        </Select>
+                    </FormControl>
+                </div>
+            </div>
+
+
             <Container className="flex flex-col items-center justify-center min-h-screen">
+
                 <TableContainer component={Paper} className="mt-8 bg-gray-800">
                     <Table aria-label="simple table">
                         <TableHead>
                             <TableRow>
                                 <TableCell/>
-                                <TableCell>{ t('History.date') }</TableCell>
-                                <TableCell>{ t('History.successful') }</TableCell>
-                                <TableCell>{ t('History.failed') }</TableCell>
-                                <TableCell>{ t('History.correctAnswers') }</TableCell>
+                                <TableCell>{t('History.date')}</TableCell>
+                                <TableCell>{t('History.successful')}</TableCell>
+                                <TableCell>{t('History.failed')}</TableCell>
+                                <TableCell>{t('History.correctAnswers')}</TableCell>
                             </TableRow>
                         </TableHead>
                         <TableBody>

webapp/src/components/history/History.test.js

@@ -33,6 +33,12 @@ jest.mock('../../services/user.service', () => ({
     )
 }));
 
+jest.mock('../../services/game.service', () => ({
+    getGameModes: () => Promise.resolve(
+        ["classic", "SuddenDeath" ]
+    )
+}));
+
 describe('Game Component', () => {
     beforeEach(() => localStorage.setItem("token", "manolineldelpino"));
 

webapp/src/components/home/Home.css

@@ -1,5 +1,5 @@
 
-p,h1,h2,h3,h4,h5,h6,span {
+p,h1,h2,h3,h4,h5,h6,span,label {
   font-family: Consolas, monaco, serif;
   /*color:#FFFFFF;*/
 }

webapp/src/i18n.js

@@ -74,7 +74,8 @@ i18n
                     correctAnswer: 'Correct answer',
                     yourAnswer: 'Your answer',
                     correct: 'Correct',
-                    any: 'Any'
+                    any: 'Any',
+                    gamemode: 'Game modes'
                 },
                 Friends: {
                     friends: 'Friends',
@@ -175,7 +176,8 @@ i18n
                     correctAnswer: 'Respuesta correcta',
                     yourAnswer: 'Tu respuesta',
                     correct: 'Correcta',
-                    any: 'Cualquiera'
+                    any: 'Cualquiera',
+                    gamemode: 'Modos de juego'
                 },
                 Friends: {
                     friends: 'Amigos',

webapp/src/services/game.service.js

@@ -103,4 +103,15 @@ const setGameSettings = async (token, duration, len) =>
   }
 }
 
-export {startNewGame, nextQuestion, awnser, getEndTime, getGameSettings, setGameSettings, getNumberOfQuestions, getCurrentQuestion};
+const getGameModes = async (token) => {
+    try {
+        const response = await axios.post(`${apiEndpoint}:8003/api/game/gamemodes`, { "token" : token});
+
+        return response.data;
+
+    } catch (error) {
+        return undefined;
+    }
+}
+
+export {startNewGame, nextQuestion, awnser, getEndTime, getGameSettings, setGameSettings, getNumberOfQuestions, getCurrentQuestion, getGameModes};

webapp/src/services/user.service.js

@@ -86,11 +86,11 @@ const getCreationDate = async () =>
 
 }
 
-const getHistory = async () =>
+const getHistory = async (gameMode) =>
 {
     try {
 
-        const response = await axios.post(`${apiEndpoint}:8004/api/userdetails/history`, { token: localStorage.getItem("token") });
+        const response = await axios.post(`${apiEndpoint}:8004/api/userdetails/history`, { token: localStorage.getItem("token"), gameMode: gameMode });
         if ( response.status === 200 )
             return response.data;
         else 
@@ -119,6 +119,18 @@ const getHistoryByUser = async (user) =>
   }
 }
 
+const getGamemodes = async () => {
+    try {
+        const response = await axios.post(`${apiEndpoint}:8003/api/game/gamemodes`, { token: localStorage.getItem("token") });
+        if ( response.status === 200 )
+            return response.data;
+        else
+            return "Cant load game modes";
+    } catch(error) {
+        return "Cant load game modes";
+    }
+}
+
 const getUsers = async () =>
 {
     try {