From a04bf2318c79da81449d2071696f9521f67c991c Mon Sep 17 00:00:00 2001 From: adrian Date: Sat, 27 Apr 2024 22:21:15 +0200 Subject: [PATCH 1/2] user profile and some fancy css all around --- gatewayservice/gateway-service.js | 4 +- users/userservice/user-service.js | 13 +- .../ranking => public}/profile_img.webp | Bin webapp/src/App.jsx | 8 +- webapp/src/components/MainPage.jsx | 6 +- webapp/src/components/Squads.jsx | 4 +- webapp/src/components/UserProfile.jsx | 75 ------- webapp/src/components/UserProfile.test.js | 59 ------ webapp/src/components/{ => auth}/AddUser.jsx | 2 +- .../src/components/{ => auth}/AddUser.test.js | 0 webapp/src/components/{ => auth}/Login.jsx | 2 +- .../src/components/{ => auth}/Login.test.js | 0 webapp/src/components/{ => game}/Game.jsx | 16 +- webapp/src/components/{ => game}/Game.test.js | 0 .../components/{ => game}/ImgGameReport.jsx | 0 webapp/src/components/{ => game}/Question.jsx | 6 +- .../components/{ => game}/Question.test.js | 0 .../src/components/ranking/RankingLayout.jsx | 2 +- webapp/src/components/user/UserProfile.jsx | 185 ++++++++++++++++++ .../src/components/user/UserProfile.test.js | 71 +++++++ webapp/src/index.css | 164 ++++++++++++++++ 21 files changed, 452 insertions(+), 165 deletions(-) rename webapp/{src/components/ranking => public}/profile_img.webp (100%) delete mode 100644 webapp/src/components/UserProfile.jsx delete mode 100644 webapp/src/components/UserProfile.test.js rename webapp/src/components/{ => auth}/AddUser.jsx (96%) rename webapp/src/components/{ => auth}/AddUser.test.js (100%) rename webapp/src/components/{ => auth}/Login.jsx (96%) rename webapp/src/components/{ => auth}/Login.test.js (100%) rename webapp/src/components/{ => game}/Game.jsx (93%) rename webapp/src/components/{ => game}/Game.test.js (100%) rename webapp/src/components/{ => game}/ImgGameReport.jsx (100%) rename webapp/src/components/{ => game}/Question.jsx (95%) rename webapp/src/components/{ => game}/Question.test.js (100%) create mode 100644 webapp/src/components/user/UserProfile.jsx create mode 100644 webapp/src/components/user/UserProfile.test.js diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js index 229cd8b..6eaee8f 100644 --- a/gatewayservice/gateway-service.js +++ b/gatewayservice/gateway-service.js @@ -130,14 +130,12 @@ app.get('/rankings/:filter', async (req, res) => { app.get('/ranking/user', async (req, res) => { const username = req.query.username; - const category = req.query.category; try { // Forward the request to the user service const result = await axios.get(`${userServiceUrl}/ranking/user`, { params: { - username: username, - category: category + username: username } }); diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js index a8989c6..0d63028 100644 --- a/users/userservice/user-service.js +++ b/users/userservice/user-service.js @@ -57,7 +57,6 @@ app.get('/rankings/:filter', async (req, res) => { // Get the ranking info for a specified category and user app.get('/ranking/user', async (req, res) => { const username = req.query.username; - const category = req.query.category; try { // Fetch the user with the specified username @@ -68,17 +67,7 @@ app.get('/ranking/user', async (req, res) => { return res.status(400).json("Error: User not found"); } - // Extract ranking info for the specified category - const rankingInfo = { - username: user.username, - category, - points: user.ranking[category].points, - questions: user.ranking[category].questions, - correct: user.ranking[category].correct, - wrong: user.ranking[category].wrong - }; - - res.status(200).json(rankingInfo); + res.status(200).json(user); } catch (error) { res.status(400).json({ error: error.message }); } diff --git a/webapp/src/components/ranking/profile_img.webp b/webapp/public/profile_img.webp similarity index 100% rename from webapp/src/components/ranking/profile_img.webp rename to webapp/public/profile_img.webp diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index 93dbea8..922ca25 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -1,13 +1,13 @@ import React from 'react'; import {BrowserRouter, Routes, Route} from 'react-router-dom' -import AddUser from './components/AddUser'; +import AddUser from './components/auth/AddUser'; import Navbar from './components/Navbar'; -import Login from './components/Login'; +import Login from './components/auth/Login'; import RankingsLayout from './components/ranking/RankingLayout'; -import Game from './components/Game'; +import Game from './components/game/Game'; import MainPage from './components/MainPage'; import Squads from './components/Squads'; -import UserProfile from './components/UserProfile'; +import UserProfile from './components/user/UserProfile'; function App() { diff --git a/webapp/src/components/MainPage.jsx b/webapp/src/components/MainPage.jsx index 7db41a5..bf95513 100644 --- a/webapp/src/components/MainPage.jsx +++ b/webapp/src/components/MainPage.jsx @@ -21,11 +21,11 @@ const MainPage = () => { , [logged]); return ( -
+
{logged ?
-

Welcome back, {auth.username}!

+

Welcome back, {auth.username}!

@@ -48,7 +48,7 @@ const MainPage = () => {
:
-

Welcome to WIQ, Please log in to play!

+

Welcome to WIQ, Please log in to play!

- - - - - -
- -
-

{category} Ranking

-
-

Total Answered Questions: {questions}

-

Right Answers: {right}

-

Wrong Answers: {wrong}

-
-
- -
-
-
- ); -}; - -export default UserProfile; diff --git a/webapp/src/components/UserProfile.test.js b/webapp/src/components/UserProfile.test.js deleted file mode 100644 index 4215e00..0000000 --- a/webapp/src/components/UserProfile.test.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { render, waitFor, fireEvent } from '@testing-library/react'; -import UserProfile from './UserProfile'; -import axios from 'axios'; -import useAuthUser from 'react-auth-kit/hooks/useAuthUser'; - -jest.mock('axios'); -jest.mock('react-auth-kit/hooks/useAuthUser', () => jest.fn()); - -describe('UserProfile', () => { - beforeEach(() => { - useAuthUser.mockReturnValue({ - username: 'testUser', - email: 'test@example.com', - createdAt: '2024-01-01T00:00:00Z', - }); - }); - - it('renders user details', async () => { - axios.get.mockResolvedValueOnce({ - data: { - questions: 10, - correct: 7, - wrong: 3, - }, - }); - - const { getByText } = render(); - - await waitFor(() => { - expect(getByText('Username: testUser')).toBeInTheDocument(); - expect(getByText('Email: test@example.com')).toBeInTheDocument(); - expect(getByText('Joined: 1/1/2024')).toBeInTheDocument(); - expect(getByText('Total Answered Questions: 10')).toBeInTheDocument(); - expect(getByText('Right Answers: 7')).toBeInTheDocument(); - expect(getByText('Wrong Answers: 3')).toBeInTheDocument(); - }); - }); - - it('changes category when category button is clicked', async () => { - axios.get.mockResolvedValueOnce({ - data: { - questions: 5, - correct: 3, - wrong: 2, - }, - }); - - const { getByText } = render(); - - fireEvent.click(getByText('Flags')); - - await waitFor(() => { - expect(getByText('Total Answered Questions: 5')).toBeInTheDocument(); - expect(getByText('Right Answers: 3')).toBeInTheDocument(); - expect(getByText('Wrong Answers: 2')).toBeInTheDocument(); - }); - }); - }); \ No newline at end of file diff --git a/webapp/src/components/AddUser.jsx b/webapp/src/components/auth/AddUser.jsx similarity index 96% rename from webapp/src/components/AddUser.jsx rename to webapp/src/components/auth/AddUser.jsx index 1e0bb31..2c9be4c 100644 --- a/webapp/src/components/AddUser.jsx +++ b/webapp/src/components/auth/AddUser.jsx @@ -40,7 +40,7 @@ const AddUser = () => { }; return ( -
+

Register diff --git a/webapp/src/components/AddUser.test.js b/webapp/src/components/auth/AddUser.test.js similarity index 100% rename from webapp/src/components/AddUser.test.js rename to webapp/src/components/auth/AddUser.test.js diff --git a/webapp/src/components/Login.jsx b/webapp/src/components/auth/Login.jsx similarity index 96% rename from webapp/src/components/Login.jsx rename to webapp/src/components/auth/Login.jsx index b960b5f..e4156a2 100644 --- a/webapp/src/components/Login.jsx +++ b/webapp/src/components/auth/Login.jsx @@ -62,7 +62,7 @@ const Login = () => { }; return ( -
+

Access WIQ diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/auth/Login.test.js similarity index 100% rename from webapp/src/components/Login.test.js rename to webapp/src/components/auth/Login.test.js diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/game/Game.jsx similarity index 93% rename from webapp/src/components/Game.jsx rename to webapp/src/components/game/Game.jsx index 9367d5b..a2e49e7 100644 --- a/webapp/src/components/Game.jsx +++ b/webapp/src/components/game/Game.jsx @@ -35,7 +35,20 @@ const Game = () => { }, [isAuthenticated, navigate]); return ( -
+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
{isAuthenticated() ? (flagGameStarted || cityGameStarted || monumentGameStarted || touristAttractionGameStarted || foodGameStarted) ? (
@@ -73,6 +86,7 @@ const Game = () => {
) : ""}
+
) }; diff --git a/webapp/src/components/Game.test.js b/webapp/src/components/game/Game.test.js similarity index 100% rename from webapp/src/components/Game.test.js rename to webapp/src/components/game/Game.test.js diff --git a/webapp/src/components/ImgGameReport.jsx b/webapp/src/components/game/ImgGameReport.jsx similarity index 100% rename from webapp/src/components/ImgGameReport.jsx rename to webapp/src/components/game/ImgGameReport.jsx diff --git a/webapp/src/components/Question.jsx b/webapp/src/components/game/Question.jsx similarity index 95% rename from webapp/src/components/Question.jsx rename to webapp/src/components/game/Question.jsx index 896e674..a7da832 100644 --- a/webapp/src/components/Question.jsx +++ b/webapp/src/components/game/Question.jsx @@ -118,7 +118,7 @@ const Question = (props) => { return ( finished ?
: -
+
Score: {score}
@@ -138,8 +138,8 @@ const Question = (props) => {
{questions[currentQuestion].images.map(image => ( - diff --git a/webapp/src/components/Question.test.js b/webapp/src/components/game/Question.test.js similarity index 100% rename from webapp/src/components/Question.test.js rename to webapp/src/components/game/Question.test.js diff --git a/webapp/src/components/ranking/RankingLayout.jsx b/webapp/src/components/ranking/RankingLayout.jsx index f675fe5..1a2f2e4 100644 --- a/webapp/src/components/ranking/RankingLayout.jsx +++ b/webapp/src/components/ranking/RankingLayout.jsx @@ -10,7 +10,7 @@ const RankingsLayout = () => { } return ( -
+