feature(database-connection): Fix routing and refactor style sheets

frontend/src/components/Header/Header.scss

@@ -1,3 +1,4 @@
+
 .Header {
     .title {
         font-size: 4vw;

frontend/src/components/SeasonDetail/SeasonDetail.scss

@@ -1 +1,4 @@
-.SeasonDetail {}
+.SeasonDetail {
+  vertical-align: middle;
+  justify-content: center;
+}

frontend/src/components/SeasonDetail/SeasonDetail.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import './SeasonDetail.scss';
+import {IUserListProperties} from "../UserList/UserList";
 
 export interface SeasonDetailProperties {
   seasonId: string,
@@ -9,10 +10,10 @@ export interface SeasonDetailProperties {
   }
 }
 
-class SeasonDetail extends React.Component<SeasonDetailProperties> {
+class SeasonDetail extends React.Component<IUserListProperties> {
 
   render() {
-    const { seasonId, dates } = this.props
+    const { seasonId, dates } = this.props.userStats
     return (
       <span className="SeasonDetail" data-testid="SeasonDetail">
         Season {seasonId} - Duration: {dates.start.toDateString()} - {dates.end.toDateString()}

frontend/src/components/SeasonSwitch/SeasonSwitch.scss

@@ -1 +1,13 @@
-.SeasonSwitch {}
+.SeasonSwitch {
+
+
+  a {
+    font-size: 3vw;
+    max-font-size: 4vw;
+    padding-left: 1em;
+    padding-right: 1em;
+    vertical-align: middle;
+    justify-content: center;
+  }
+
+}

frontend/src/components/SeasonSwitch/SeasonSwitch.tsx

@@ -2,24 +2,27 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './SeasonSwitch.scss';
-import SeasonDetail, { SeasonDetailProperties } from '../SeasonDetail/SeasonDetail';
-import {withRouter} from "react-router";
+import SeasonDetail from '../SeasonDetail/SeasonDetail';
+import {IUserListProperties} from "../UserList/UserList";
 
-class SeasonSwitch extends React.Component<SeasonDetailProperties> {
+class SeasonSwitch extends React.Component<IUserListProperties> {
 
   render() {
-    let seasonId = Number(this.props.seasonId)
+    let seasonId = Number(this.props.userStats.seasonId)
     return(
         <div className="SeasonSwitch" data-testid="SeasonSwitch">
-          <Link to={"/season/" + (seasonId - 1)}>
-            <FontAwesomeIcon icon="arrow-circle-left" />
-          </Link>
+            {
+                seasonId > 1
+                &&  <Link to={"/season/" + (seasonId - 1)} onClick={() => this.props.onSeasonIdChange('' + (seasonId - 1))}>
+                        <FontAwesomeIcon icon="arrow-circle-left" />
+                    </Link>
+            }
 
-          <SeasonDetail {...this.props} />
+            <SeasonDetail {...this.props} />
 
-          <Link to={"/season/" + (seasonId + 1)}>
-            <FontAwesomeIcon icon="arrow-circle-right" />
-          </Link>
+            <Link to={"/season/" + (seasonId + 1)} onClick={() => this.props.onSeasonIdChange('' + (seasonId + 1))}>
+                <FontAwesomeIcon icon="arrow-circle-right" />
+            </Link>
         </div>
     )
   }

frontend/src/components/UserList/UserList.scss

@@ -15,5 +15,9 @@
         font-size: larger;
         color: saddlebrown;
     }
+
+    .SeasonSwitch {
+        padding-bottom: 1rem;
+    }
 }
 

frontend/src/components/UserList/UserList.tsx

@@ -15,7 +15,7 @@ export default class UserList extends React.Component<IUserListProperties, IUser
     constructor(props: Readonly<IUserListProperties> | IUserListProperties) {
         super(props);
 
-        this.state = { mocked: this.props.mocked }
+        // this.state = { mocked: this.props.mocked }
     }
 
     private createTableEntries(entries: TableEntry[]) {
@@ -51,7 +51,7 @@ export default class UserList extends React.Component<IUserListProperties, IUser
   render() {
     return (
       <div className="UserList" data-testid="UserList">
-          <SeasonSwitch seasonId={this.props.userStats.seasonId} dates={this.props.userStats.dates} />
+          <SeasonSwitch onSeasonIdChange={this.props.onSeasonIdChange} userStats={this.props.userStats} />
          <table>
           <thead>
           <tr>
@@ -65,14 +65,15 @@ export default class UserList extends React.Component<IUserListProperties, IUser
             {this.createTableEntries(this.props.userStats.stats)}
           </tbody>
         </table>
-      </div> 
+      </div>
     )
   }
 }
 
-interface IUserListProperties {
+export interface IUserListProperties {
     userStats: UserStatsResponse
-    mocked: boolean
+    mocked?: boolean
+    onSeasonIdChange: any
 }
 
 interface IUserListState {