cherry pick first set of marco's changes

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "sopra-fs23-client-template",
+  "name": "sopra-fs24-client-template",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.24.0",
-    "node-gyp": "^8.4.1",
-    "node-sass": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.4",
-    "react-scripts": "^5.0.0"
+    "axios": "^1.6.7",
+    "eslint-config-react-app": "^7.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
+    "react-scripts": "^5.0.1",
+    "serve": "^14.2.1"
   },
   "scripts": {
     "dev": "react-scripts start",
@@ -21,16 +21,19 @@
   "eslintConfig": {
     "extends": "react-app"
   },
+  "jest": {
+    "moduleNameMapper": {
+      "^axios$": "axios/dist/node/axios.cjs"
+    }
+  },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
   ],
   "devDependencies": {
-    "@babel/eslint-parser": "^7.23.10",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "sass": "^1.70.0"
   }
 }

public/index.html

@@ -28,7 +28,7 @@
   <noscript>
     You need to enable JavaScript to run this app.
   </noscript>
-  <div id="root"></div>
+  <div id="app"></div>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/App.test.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import {createRoot} from "react-dom/client";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  const root = createRoot(div); // createRoot(div!) if you use TypeScript
+  root.render(<App />);
+  root.unmount();
 });

src/App.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import Header from "components/views/Header";
-import AppRouter from "components/routing/routers/AppRouter";
+import Header from "./components/views/Header";
+import AppRouter from "./components/routing/routers/AppRouter";
 
 /**
  * Happy coding!
  * React Template by Lucas Pelloni
  * Overhauled by Kyrill Hux
+ * Updated by Marco Leder
  */
 const App = () => {
     return (

src/components/routing/routeProtectors/GameGuard.js

@@ -1,4 +1,4 @@
-import {Redirect} from "react-router-dom";
+import {Navigate, Outlet} from "react-router-dom";
 import PropTypes from "prop-types";
 
 /**
@@ -10,11 +10,11 @@ import PropTypes from "prop-types";
  * @Guard
  * @param props
  */
-export const GameGuard = props => {
+export const GameGuard = () => {
   if (localStorage.getItem("token")) {
-    return props.children;
+    return <Outlet />;
   }
-  return <Redirect to="/login"/>;
+  return <Navigate to="/login" replace />;
 };
 
 GameGuard.propTypes = {

src/components/routing/routeProtectors/LoginGuard.js

@@ -1,16 +1,15 @@
-import {Redirect} from "react-router-dom";
+import {Navigate, Outlet} from "react-router-dom";
 import PropTypes from "prop-types";
 
 /**
  *
  * Another way to export directly your functional component.
  */
-export const LoginGuard = props => {
+export const LoginGuard = () => {
   if (!localStorage.getItem("token")) {
-    return props.children;
+    return <Outlet />;
   }
-  // if user is already logged in, redirects to the main /app
-  return <Redirect to="/game"/>;
+  return <Navigate to="/game" replace />;
 };
 
 LoginGuard.propTypes = {

src/components/routing/routers/AppRouter.js

@@ -1,8 +1,8 @@
-import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
-import {GameGuard} from "components/routing/routeProtectors/GameGuard";
-import GameRouter from "components/routing/routers/GameRouter";
-import {LoginGuard} from "components/routing/routeProtectors/LoginGuard";
-import Login from "components/views/Login";
+import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
+import {GameGuard} from "../routeProtectors/GameGuard";
+import GameRouter from "./GameRouter";
+import {LoginGuard} from "../routeProtectors/LoginGuard";
+import Login from "../../views/Login";
 
 /**
  * Main router of your application.
@@ -16,21 +16,21 @@ import Login from "components/views/Login";
 const AppRouter = () => {
   return (
     <BrowserRouter>
-      <Switch>
-        <Route path="/game">
-          <GameGuard>
-            <GameRouter base="/game"/>
-          </GameGuard>
-        </Route>
-        <Route exact path="/login">
-          <LoginGuard>
-            <Login/>
-          </LoginGuard>
+      <Routes>
+
+        <Route path="/game/*" element={<GameGuard />}>
+            <Route path="/game/*" element={<GameRouter base="/game"/>} />
         </Route>
-        <Route exact path="/">
-          <Redirect to="/game"/>
+
+        <Route path="/login" element={<LoginGuard />}>
+            <Route path="/login" element={<Login/>} />
         </Route>
-      </Switch>
+
+        <Route path="/" element={
+          <Navigate to="/game" replace />
+        }/>
+
+      </Routes>
     </BrowserRouter>
   );
 };

src/components/routing/routers/GameRouter.js

@@ -1,19 +1,22 @@
-import {Redirect, Route} from "react-router-dom";
-import Game from "components/views/Game";
-import PropTypes from 'prop-types';
+import {Navigate, Route, Routes} from "react-router-dom";
+import Game from "../../views/Game";
+import PropTypes from "prop-types";
 
 const GameRouter = props => {
   /**
    * "this.props.base" is "/app" because as been passed as a prop in the parent of GameRouter, i.e., App.js
    */
   return (
-    <div style={{display: 'flex', flexDirection: 'column'}}>
-      <Route exact path={`${props.base}/dashboard`}>
-        <Game/>
-      </Route>
-      <Route exact path={`${props.base}`}>
-        <Redirect to={`${props.base}/dashboard`}/>
-      </Route>
+    <div style={{display: "flex", flexDirection: "column"}}>
+      <Routes>
+
+        <Route path="" element={<Game />} />
+
+        <Route path="dashboard" element={<Game />} />
+
+        <Route path="*" element={<Navigate to="dashboard" replace />} />
+
+      </Routes>
     </div>
   );
 };

src/components/ui/BaseContainer.tsx

@@ -1,8 +1,8 @@
-import 'styles/ui/BaseContainer.scss';
+import "../../styles/ui/BaseContainer.scss";
 import PropTypes from "prop-types";
 
 const BaseContainer = props => (
-  <div {...props} className={`base-container ${props.className ?? ''}`}>
+  <div {...props} className={`base-container ${props.className ?? ""}`}>
     {props.children}
   </div>
 );

src/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import "styles/ui/Button.scss";
+import "../../styles/ui/Button.scss";
 
 export const Button = props => (
   <button

src/components/ui/ReactLogo.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import "styles/ui/ReactLogo.scss";
+import "../../styles/ui/ReactLogo.scss";
 
 export const ReactLogo = props => {
   return (
-    <svg viewBox="0 0 841.9 595.3" {...props} className={`react-logo ${props.className ?? ''}`}>
+    <svg viewBox="0 0 841.9 595.3" {...props} className={`react-logo ${props.className ?? ""}`}>
       <g>
         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" />
         <circle cx="420.9" cy="296.5" r="45.7" />

src/components/ui/Spinner.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "styles/ui/Spinner.scss";
+import "../../styles/ui/Spinner.scss";
 
 export const Spinner = () => (
   <div className="loading-spinner">

src/components/views/Header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ReactLogo } from "components/ui/ReactLogo";
+import {ReactLogo} from "../ui/ReactLogo";
 import PropTypes from "prop-types";
-import "styles/views/Header.scss";
+import "../../styles/views/Header.scss";
 
 /**
  * This is an example of a Functional and stateless component (View) in React. Functional components are not classes and thus don't handle internal state changes.

src/helpers/api.js

@@ -1,9 +1,9 @@
-import axios from 'axios';
-import { getDomain } from 'helpers/getDomain';
+import axios from "axios";
+import { getDomain } from "./getDomain";
 
 export const api = axios.create({
   baseURL: getDomain(),
-  headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }
+  headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" }
 });
 
 export const handleError = error => {
@@ -22,14 +22,14 @@ export const handleError = error => {
       info += `\nerror message:\n${response.data}`;
     }
 
-    console.log('The request was made and answered but was unsuccessful.', error.response);
+    console.log("The request was made and answered but was unsuccessful.", error.response);
     return info;
   } else {
     if (error.message.match(/Network Error/)) {
-      alert('The server cannot be reached.\nDid you start it?');
+      alert("The server cannot be reached.\nDid you start it?");
     }
 
-    console.log('Something else happened.', error);
+    console.log("Something else happened.", error);
     return error.message;
   }
 };

src/helpers/getDomain.js

@@ -1,4 +1,4 @@
-import { isProduction } from 'helpers/isProduction'
+import { isProduction } from "./isProduction"
 
 /**
  * This helper function returns the current domain of the API.
@@ -7,8 +7,8 @@ import { isProduction } from 'helpers/isProduction'
  * @returns {string}
  */
 export const getDomain = () => {
-  const prodUrl = 'https://my-server-url.oa.r.appspot.com/' // TODO: insert your prod url for server (once deployed)
-  const devUrl = 'http://localhost:8080'
+  const prodUrl = "https://my-server-url.oa.r.appspot.com/" // TODO: insert your prod url for server (once deployed)
+  const devUrl = "http://localhost:8080"
 
   return isProduction() ? prodUrl : devUrl
 }

src/index.js

@@ -1,12 +1,14 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import "styles/index.scss";
-import App from "App";
+import {createRoot} from "react-dom/client";
+import "./styles/index.scss";
+import App from "./App";
 
 /**
  * This is the entry point of your React application where the root element is in the public/index.html.
  * We call this a “root” DOM node because everything inside it will be managed by React DOM.
  * Applications built with just React usually have a single root DOM node.
  * More: https://reactjs.org/docs/rendering-elements.html
  */
-ReactDOM.render(<App />, document.getElementById("root"));
+const container = document.getElementById("app");
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<App tab="home" />);

src/styles/index.scss

@@ -1,5 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Roboto+Mono:wght@300;400;500;700&display=swap');
-@import 'styles/theme';
+@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Roboto+Mono:wght@300;400;500;700&display=swap");
+@import "./theme";
 
 /**
 This file contains the general and shared style of your application.

src/styles/ui/BaseContainer.scss

@@ -1,4 +1,4 @@
-@import 'styles/theme';
+@import "../theme";
 
 .base-container {
   margin-left: auto;

src/styles/ui/Button.scss

@@ -1,4 +1,4 @@
-@import 'styles/theme';
+@import "../theme";
 
 .primary-button {
   &:hover {

src/styles/ui/ReactLogo.scss

@@ -1,4 +1,4 @@
-@import 'styles/theme';
+@import "../theme";
 
 .react-logo {
   fill: $background;

src/styles/ui/Spinner.scss

@@ -1,4 +1,4 @@
-@import 'styles/theme';
+@import "../theme";
 
 .loading-spinner {
     display: inline-block;

src/styles/views/Game.scss

@@ -1,4 +1,4 @@
-@import 'styles/theme';
+@import "../theme";
 
 /* The '&' is a shorthand for the containing element,
   so for example a '&.user-list' inside .game will compile to

src/styles/views/Header.scss

@@ -1,4 +1,4 @@
-@import 'styles/theme';
+@import "../theme";
 
 .header {
   &.container {

src/styles/views/Login.scss

@@ -1,4 +1,4 @@
-@import 'styles/theme';
+@import "../theme";
 
 .login {
   &.container {