Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Ranking #88

Merged
merged 6 commits into from
Apr 5, 2024
Merged

New Ranking #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4ecd159
modified userSchema
adriiglz Apr 3, 2024
6db3610
modified "/rankings" endpoint returned data
adriiglz Apr 3, 2024
9f4f997
added a new rankings layout
adriiglz Apr 4, 2024
c7afae7
new Ranking page and model finished
adriiglz Apr 5, 2024
a239e6b
removed all Ranking component
adriiglz Apr 5, 2024
51029fa
removed a testing control line
adriiglz Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions gatewayservice/gateway-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,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 });
Expand Down
12 changes: 11 additions & 1 deletion users/userservice/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion users/userservice/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
102 changes: 96 additions & 6 deletions users/userservice/user-model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
}
});

Expand Down
25 changes: 18 additions & 7 deletions users/userservice/user-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand Down Expand Up @@ -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 });
}
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>
Expand Down
42 changes: 0 additions & 42 deletions webapp/src/components/Rankings.jsx
View file
Open in desktop

This file was deleted.

56 changes: 56 additions & 0 deletions webapp/src/components/ranking/RankingLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
60 changes: 60 additions & 0 deletions webapp/src/components/ranking/RankingTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Loading