Cleanup and add deps

package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.7.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -9,6 +12,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",
+    "reactjs-popup": "^2.0.6",
     "recharts": "^2.12.1",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",

src/User/ProfileView/ProfileInfoTable.js

@@ -101,10 +101,10 @@ function changeState(newState) {
 }
 
 function ProfileInfoTable(props) {
-    const { state, user } = props;
+    const { state } = props;
     const [content, setContent] = useState(null);
     useEffect(() => {
-        var con = changeState(state);
+        const con = changeState(state);
         setContent(con);
     }, [state]);
 

src/User/ProfileView/ProfileInfoTableAchivments.js → src/User/ProfileView/ProfileInfoTableAchievements.js

@@ -1,12 +1,12 @@
 
 
-function ProfileInfoTableAchivments(props) {
+function ProfileInfoTableAchievements(props) {
     const {playerId} = props;
 
     return (
         <table>
             <tr>
-                <th>Achivments</th>
+                <th>achievements</th>
             </tr>
             <tr>
                 <td>{playerId}</td>
@@ -15,4 +15,4 @@ function ProfileInfoTableAchivments(props) {
     );
 }
 
-export default ProfileInfoTableAchivments;
+export default ProfileInfoTableAchievements;

src/User/ProfileView/ProfileView.css

@@ -85,7 +85,7 @@
     height: 100%;
 }
 
-.user-achivments {
+.user-achievements {
     bottom: 0;
     padding: 10px;
     border: 3px solid black;

src/User/ProfileView/ProfileView.js

@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
 import React, { useState, useEffect } from 'react';
 import { getUser } from '../../services/Api';
 import ProfileInfoTable from './ProfileInfoTable';
-import ProfileInfoTableAchivments from './ProfileInfoTableAchivments';
+import ProfileInfoTableAchievements from './ProfileInfoTableAchievements';
 
 import './ProfileView.css';
 import ProfileInfoTableButtons from './ProfileInfoTableButtons';
@@ -34,12 +34,12 @@ function ProfileView() {
                         <p>{user.rating}</p>
                     </div>
                 </div>
-                <div className='widget user-achivments'>
-                    <ProfileInfoTableAchivments userId={user.playerid}/>
+                <div className='widget user-achievements'>
+                    <ProfileInfoTableAchievements userId={user.playerid}/>
                 </div>
             </div>
             <div className='cell row2col1'>
-                {id == myID ? 
+                {id === myID ?
                     <a className='change-photo' href='/'>Change photo</a> 
                     : 
                     <></>

src/User/Settings/ChangePhoto.js

@@ -1,6 +1,3 @@
-import { act } from "react-dom/test-utils";
-
-
 export default function ChangePhotoPopup(props) {
     var {setReturn} = props;
     var updatePhoto = function(e){

src/User/Settings/DeleteAccount.js

@@ -6,7 +6,7 @@ export default function DeleteAccountPopup(setReturn) {
         var writen = e.target[0].value;
         if (writen !== 'delete') {
             console.log("Wrong input");
-            return;
+
         } else {
             setReturn();
         }

src/User/Settings/UserSettings.js

@@ -1,13 +1,10 @@
-import {useEffect, useState} from 'react';
-import Popup            from 'reactjs-popup';
-import ChangeUsernamePopup from './ChangeUsername';
+import {useState} from 'react';
 
-
-import Switch           from '@mui/material/Switch';
-import Select           from '@mui/material/Select';
-import InputLabel       from '@mui/material/InputLabel';
-import MenuItem         from '@mui/material/MenuItem';
-import FormGroup        from '@mui/material/FormGroup';
+import Switch from '@mui/material/Switch';
+import Select from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import SettingPopup from './SettingPopup';
 
@@ -28,14 +25,6 @@ function deleteAccount(){
   console.log("yo account was removed");
 }
 
-function saveSettings(settings){
-  console.log("yo settings ware updated");
-}
-
-function resetSettings(){
-  console.log("yo settings ware reversed");
-}
-
 function setDarkMode() {
   console.log("yo dark mode was changed");
 }

src/User/User.js

@@ -16,7 +16,6 @@ function User({ isAuthenticated, user, login, logout }) {
           <Link to="/register">
               <button className="login-btn">Register</button>
           </Link>
-
         </>
         )}
         </>

src/User/store.js

@@ -1,5 +1,5 @@
 // store.js
-import { createStore, applyMiddleware } from 'redux';
+import { createStore } from 'redux';
 import { persistStore, persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage/session'; // Use sessionStorage
 
@@ -34,7 +34,6 @@ const persistConfig = {
 
 const persistedReducer = persistReducer(persistConfig, authReducer);
 const store = createStore(persistedReducer);
-
 export const persistor = persistStore(store);
 
 export default store;

src/forms/LoginForm.js

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

src/services/Api.js

@@ -67,15 +67,15 @@ function Request(data, endpoint, apifunc) {
         })
 }
 
-const achivments = c["urls"]["achivments"]
+const achievements = c["urls"]["achievements"]
 //const gametype = c["urls"]["gametype"]
 //const player = c["urls"]["player"]
 //const points = c["urls"]["points"]
 const tournament = c["urls"]["tournament"]
 //const userSettings = c["urls"]["userSettings"]
 
 function getAcivmentsForPlayer(request) {
-    return Request(request, "achivments", achivments["functions"]["GetAchivmentsForPlayer"])
+    return Request(request, "achievements", achievements["functions"]["GetachievementsForPlayer"])
 }
 
 function getTournaments(request) {

src/services/client.config.json

@@ -5,16 +5,16 @@
     "path": "api/",
     "version": "v1",
     "urls": {
-        "achivments": {
+        "achievements": {
             "path": "/Achievements",
             "functions":{
-                "GetAchivmentsForPlayer": {
-                    "path": "/getAchivmentsForPlayer",
+                "GetachievementsForPlayer": {
+                    "path": "/getachievementsForPlayer",
                     "method": "GET",
                     "params": ["playerId"]
                 },
-                "GetAchivmentTypes": {
-                    "path": "/getAchivmentTypes",
+                "GetachievementTypes": {
+                    "path": "/getachievementTypes",
                     "method": "GET"
                 }
             }