Merge pull request #41 from jordus100/games-migration

Fix stuff in Games, handle user role

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.5",
+    "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",

src/Tournaments/TournamentDetails.js

@@ -3,7 +3,7 @@ import { getListOfTournaments } from './getListOfTournaments';
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { login, logout } from '../User/actions';
+import { login, logout } from '../User/store';
 function TournamentDetails({isAuthenticated, user, login, logout }) {
 
     const { tournamentId } = useParams();

src/Tournaments/TournamentNav.js

@@ -1,7 +1,7 @@
 import './TournamentNav.scss';
 import React from "react";
 import { NavLink, Link } from 'react-router-dom';
-import { login, logout } from '../User/actions';
+import { login, logout } from '../User/store';
 import { connect } from 'react-redux';
 
 

src/User/User.js

@@ -1,6 +1,6 @@
 import '../App.scss'
 import { connect } from 'react-redux';
-import { login, logout } from './actions';
+import { login, logout } from './store';
 import {Link} from "react-router-dom";
 
 function User({ isAuthenticated, user, login, logout }) {

src/User/UserButtons.js

@@ -4,7 +4,7 @@ import logoutIcon from '../resources/logout.svg';
 import userIcon from '../resources/user.svg';
 import settingsIcon from '../resources/settings.svg';
 import { connect } from 'react-redux';
-import { login, logout } from './actions';
+import { login, logout } from './store';
 import {Link} from "react-router-dom";
 
 function UserButtons({ isAuthenticated, user, login, logout }) {

src/User/store.js

@@ -1,7 +1,6 @@
-// store.js
 import { createStore } from 'redux';
 import { persistStore, persistReducer } from 'redux-persist';
-import storage from 'redux-persist/lib/storage/session'; // Use sessionStorage
+import storage from 'redux-persist/lib/storage/session';
 
 const initialState = {
   isAuthenticated: false,
@@ -35,5 +34,13 @@ const persistConfig = {
 const persistedReducer = persistReducer(persistConfig, authReducer);
 const store = createStore(persistedReducer);
 export const persistor = persistStore(store);
-
 export default store;
+
+export const login = (user) => ({
+  type: 'LOGIN',
+  payload: user,
+});
+
+export const logout = () => ({
+  type: 'LOGOUT',
+});

src/forms/AddTournamentForm.js

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import './Form.scss';
 import { connect } from 'react-redux';
-import { login, logout } from '../User/actions';
+import { login, logout } from '../User/store';
 import {TournamentService} from "../services/TournamentService";
 
 

src/forms/EditTournamentForm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import './Form.scss';
 import { connect } from 'react-redux';
-import { login, logout } from '../User/actions';
+import { login, logout } from '../User/store';
 import { getListOfTournaments } from '../Tournaments/getListOfTournaments';
 
 function EditTournamentForm({ isAuthenticated, user, login, logout }) {
@@ -23,7 +23,6 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
   const [date, setDate] = useState('');
 
   useEffect(() => {
-    // Initialize state based on tournament data when available
     if (tournament) {
       setTitle(tournament.name);
       setDescription(tournament.description);
@@ -37,8 +36,6 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
     return <div>Resource not allowed :( </div>;
   }
 
-  // Handle form submissions and updates here
-
     return (
         <div className="form">
             <h1>Dodaj nowy turniej</h1>
@@ -105,8 +102,6 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
                     />
                 </div>
 
-                {/* Add logic for restrictions if needed */}
-
                 <div className="form-group actions">
                     <button type="submit" className="submit">Dodaj turniej</button>
                     <button type="button" className="cancel">Anuluj</button>

src/forms/LoginForm.js

@@ -3,7 +3,7 @@ import './Form.scss'
 import React, { useState } from "react";
 import {UserService} from "../services/UserService";
 import { connect } from 'react-redux';
-import { login, logout } from '../User/actions';
+import { login, logout } from '../User/store';
 
 function LoginForm({isAuthenticated, user, login, logout}) {
 
@@ -15,8 +15,7 @@ function LoginForm({isAuthenticated, user, login, logout}) {
         e.preventDefault();
 
         try {
-            const response = await UserService.loginUser(email, password)
-            login({ email: email , token: response.data.data})
+            await UserService.loginUser(email, password)
             setMessage('Login succesful.')
         } catch (e) {
             setMessage('There was a problem with login.')

src/lists/GamesList.js

@@ -2,7 +2,7 @@ import './List.scss'
 import DeleteGameButton from './DeleteGameButton';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { login, logout } from '../User/actions';
+import { login, logout } from '../User/store';
 import React, { useState, useEffect } from "react";
 import {GameService} from "../services/GameService";
 function GamesList({games, isAuthenticated, user, login, logout }) {
@@ -28,15 +28,17 @@ function GamesList({games, isAuthenticated, user, login, logout }) {
             <h1>Games</h1>
             <div className="menu-btns container-list">
                 <div className="item-list">
-                    {isAuthenticated && (
+                    {isAuthenticated && user.role === 'Admin' && (
                         <div className="menu-btns list-element btn">
                             <Link className="item-name add-btn color-primary-3" to="/games/add">Dodaj grę</Link>
                         </div>
                     )}
                     {gamesList.map((game, index) => (
                         <div key={index} className="menu-btns list-element btn">
-                            <button className="item-name color-primary-3 btn">{game.gameFile}</button>
+                            <button className="item-name color-primary-3 btn">{game.gameFileName}</button>
+                          {isAuthenticated && user.role === 'Admin' && (
                             <DeleteGameButton gameId={index} />
+                          )}
                         </div>
                     ))}
                 </div>

src/services/Api.js

@@ -2,7 +2,6 @@ import axios from "axios";
 import c from "./client.config.json";
 const baseURL = c["protocol"] + "://" + c["host"] + ":" + c["port"] + "/" + c["path"] + c["version"];
 
-
 export const Api = axios.create({
     baseURL: '/api/v1/',
     withCredentials: true

src/services/UserService.js

@@ -1,4 +1,7 @@
+import {jwtDecode} from 'jwt-decode'
 import { Api } from './Api'
+import {login} from "../User/store";
+import store from '../User/store'
 export const UserService = {
 
     registerUser: async function (username, email, password, roleId) {
@@ -17,10 +20,17 @@ export const UserService = {
     },
     loginUser: async function (email, password) {
         try {
-            return await Api.post('Player/login', {
+            const response = await Api.post('Player/login', {
                 email: email,
                 password: password,
             })
+            const token = response.data.data
+            const jwtData = jwtDecode(token)
+            store.dispatch(login({
+                email: email,
+                token: token,
+                role: jwtData['http://schemas.microsoft.com/ws/2008/06/identity/claims/role']
+            }))
         } catch(e) {
              return Api.processError(e)
         }