Merge branch 'develop' into dev_score

gatewayservice/gateway-service.js

@@ -113,10 +113,10 @@ app.post('/imgs/answer', async (req, res) => {
 });
 
 
-app.get('/rankings', async (req, res) => {
+app.get('/rankings/:filter', async (req, res) => {
   try {
     // Forward the request to the user service
-    const userResponse = await axios.get(userServiceUrl+'/rankings', req.body);
+    const userResponse = await axios.get(userServiceUrl+'/rankings/' + req.params.filter, req.body);
     res.json(userResponse.data);
   } catch (error) {
     res.status(error.response.status).json({ error: error.response.data.error });

users/userservice/package.json

@@ -21,7 +21,8 @@
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "express": "^4.18.2",
-    "mongoose": "^8.0.4"
+    "mongoose": "^8.0.4",
+    "ramda": "^0.29.1"
   },
   "devDependencies": {
     "jest": "^29.7.0",

users/userservice/user-model.js

@@ -18,12 +18,102 @@ const userSchema = new mongoose.Schema({
       type: Date,
       default: Date.now, 
     },
-    points: {
-      type: Number,
-      default: function() {
-        // Generate a random integer between 0 and 100
-        return Math.floor(Math.random() * 101);
-      }
+
+    ranking: {
+      global: {
+        points: {
+          type: Number,
+          default: 0,
+        },
+        questions: {
+          type: Number,
+          default: 0,
+        },
+        correct: {
+          type: Number,
+          default: 0,
+        },
+        wrong: {
+          type: Number,
+          default: 0,
+        },
+      },
+
+      flags: {
+        points: {
+          type: Number,
+          default: 0,
+        },
+        questions: {
+          type: Number,
+          default: 0,
+        },
+        correct: {
+          type: Number,
+          default: 0,
+        },
+        wrong: {
+          type: Number,
+          default: 0,
+        },
+      },
+
+      cities: {
+        points: {
+          type: Number,
+          default: 0,
+        },
+        questions: {
+          type: Number,
+          default: 0,
+        },
+        correct: {
+          type: Number,
+          default: 0,
+        },
+        wrong: {
+          type: Number,
+          default: 0,
+        },
+      },
+
+      monuments: {
+        points: {
+          type: Number,
+          default: 0,
+        },
+        questions: {
+          type: Number,
+          default: 0,
+        },
+        correct: {
+          type: Number,
+          default: 0,
+        },
+        wrong: {
+          type: Number,
+          default: 0,
+        },
+      },
+
+      food: {
+        points: {
+          type: Number,
+          default: 0,
+        },
+        questions: {
+          type: Number,
+          default: 0,
+        },
+        correct: {
+          type: Number,
+          default: 0,
+        },
+        wrong: {
+          type: Number,
+          default: 0,
+        },
+      },
     }
 });
 

users/userservice/user-service.js

@@ -3,6 +3,7 @@ const express = require('express');
 const mongoose = require('mongoose');
 const bcrypt = require('bcrypt');
 const bodyParser = require('body-parser');
+const R = require('ramda');
 
 const User = require('./user-model')
 
@@ -35,22 +36,32 @@ async function getRankingFor(loggedUser) {
   return { ranking: ranking, points: loggedUser.points, user: loggedUser.username }
 }
 
-app.get('/rankings', async (req, res) => {
+app.get('/rankings/:filter', async (req, res) => {
   try {
     /* const { token } = req.cookies
     const decoded = jwt.verify(token, 'your-secret-key')
     const userId = decoded.userId
     const loggedUser = await User.findById(userId)
     const userRanking = getRankingFor(loggedUser) */
-    const usersRanking = (await User.find().sort({points: -1})).map( (user, index) => {
-      return { 
-        ranking: index+1, 
-        points: user.points, 
-        user: user.username }
+
+    const category = req.params.filter;
+    const usersRanking = (await User.find());
+    const ascendingUsers = R.sortBy(R.prop("ranking." + category + ".points"), usersRanking);
+    const sortedUsers = R.reverse(ascendingUsers);
+    const sortedRanking = sortedUsers.map( (user, index) => {
+      return {
+        // User global data
+        name: user.username,
+        position: index+1,
+        points: user.ranking[category].points,
+        questions: user.ranking[category].questions,
+        correct: user.ranking[category].correct,
+        wrong: user.ranking[category].wrong
+      }
     })
 
     //res.json(userRanking, usersRanking)
-    res.json(usersRanking)
+    res.json(sortedRanking)
   } catch (error) {
     res.status(400).json({ error: error.message }); 
   }

webapp/src/App.jsx

@@ -3,7 +3,7 @@ import {BrowserRouter, Routes, Route} from 'react-router-dom'
 import AddUser from './components/AddUser';
 import Navbar from './components/Navbar';
 import Login from './components/Login';
-import Rankings from './components/Rankings';
+import RankingsLayout from './components/ranking/RankingLayout';
 import Game from './components/Game';
 import MainPage from './components/MainPage';
 
@@ -21,7 +21,7 @@ function App() {
         <Route path='/' element={<MainPage/>}/>
         <Route path='/login' element={<Login />} />
         <Route path='/register' element={<AddUser />} />
-        <Route path='/rankings' element={<Rankings />} />
+        <Route path='/rankings' element={<RankingsLayout />} />
         <Route path='/play' element={<Game />} />
       </Routes>
     </BrowserRouter>

webapp/src/components/ranking/RankingLayout.jsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import RankingsTable from "./RankingTable";
+
+const RankingsLayout = () => {
+    const [filter, setFilter] = useState('global'); // default ranking = global
+
+    const handleFilterClick = (filter) => {
+        setFilter(filter);
+    }
+
+    return (
+        <div className="flex h-screen">
+            <div id="sidebar" className="md:flex flex-col w-48 bg-[#504185]">
+                <div className="flex items-center justify-center h-16 bg-[#322653]">
+                    <span className="text-xl font-bold text-white">Rankings</span>
+                </div>
+                <div id="categories" className="flex flex-col flex-1 overflow-y-auto">
+                    <nav className="flex-1 px-2 py-4 bg-gradient-to-b
+                        from-[#3a2f60] from-10% to-[#504185] to-60%">
+                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                            onClick={() => handleFilterClick('global')}>
+                            Global
+                        </button>
+                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                            onClick={() => handleFilterClick('flags')}>
+                            Flags
+                        </button>
+                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                            onClick={() => handleFilterClick('cities')}>
+                            Cities
+                        </button>
+                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                            onClick={() => handleFilterClick('monuments')}>
+                            Monuments
+                        </button>
+                        <button className="flex items-center px-4 py-2 text-gray-100 rounded-lg hover:bg-[#73689b]"
+                            onClick={() => handleFilterClick('food')}>
+                            Food
+                        </button>
+                    </nav>
+                </div>
+            </div>
+
+            <div className="flex flex-col flex-1 overflow-y-auto">
+                <div className="flex items-center px-4 h-16">
+                    <h1 className="text-4xl font-bold uppercase text-[#4d3b7f]">{filter}</h1>
+                </div>
+                <div className="p-4" id="table">
+                    <RankingsTable filter={filter} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default RankingsLayout;

webapp/src/components/ranking/RankingTable.jsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+const apiEndpoint =  process.env.REACT_APP_API_ENDPOINT ||'http://localhost:8000';
+
+const RankingsTable = ({ filter }) => {
+    const [users, setUsers] = useState([]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+          try {
+            const response = await axios.get(`${apiEndpoint}/rankings/${filter}`);
+            setUsers(response.data);
+          } catch (error) {
+            console.error('Error fetching data:', error);
+          }
+        };
+
+        fetchData();
+      }, [filter]);
+
+    return (
+        <div className="flex flex-col">
+          <div className="overflow-x-auto sm:mx-6 lg:mx-8">
+            <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
+              <div className="overflow-hidden">
+                <table className="min-w-full">
+                  <thead className="border-b">
+                    <tr>
+                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left"></th>
+                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">User</th>
+                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Points</th>
+                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Questions</th>
+                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Correct</th>
+                      <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">Wrong</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    { 
+                      users.map(user => (
+                        <tr className="border-b">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.position}</td>
+                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.name}</td>
+                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.points}</td>
+                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.questions}</td>
+                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.correct}</td>
+                          <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{user.wrong}</td>
+                        </tr>
+                      ))
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+    )
+}
+
+export default RankingsTable;