feature(database-connection): Add prototype for spinner

frontend/src/components/ErrorContainer/ErrorContainer.tsx

@@ -6,9 +6,6 @@ export interface ErrorContainerProperties {
 }
 
 class ErrorContainer extends React.Component<ErrorContainerProperties> {
-  constructor(props: Readonly<ErrorContainerProperties>) {
-    super(props)
-  }
 
   render() {
     return (

frontend/src/components/SeasonDetail/SeasonDetail.tsx

@@ -4,6 +4,7 @@ import {IUserListProperties} from "../UserList/UserList";
 
 export interface SeasonDetailProperties {
   seasonId: string,
+  maxSeasonId: string
   dates: {
     start: Date,
     end: Date

frontend/src/components/SeasonSwitch/SeasonSwitch.tsx

@@ -9,6 +9,7 @@ class SeasonSwitch extends React.Component<IUserListProperties> {
 
   render() {
     let seasonId = Number(this.props.userStats.seasonId)
+      let maxSeasonId = Number(this.props.userStats.maxSeasonId)
     return(
         <div className="SeasonSwitch" data-testid="SeasonSwitch">
             {
@@ -20,9 +21,12 @@ class SeasonSwitch extends React.Component<IUserListProperties> {
 
             <SeasonDetail {...this.props} />
 
-            <Link to={"/season/" + (seasonId + 1)} onClick={() => this.props.onSeasonIdChange('' + (seasonId + 1))}>
-                <FontAwesomeIcon icon="arrow-circle-right" />
-            </Link>
+            {
+                seasonId !== maxSeasonId
+                &&  <Link to={"/season/" + (seasonId + 1)} onClick={() => this.props.onSeasonIdChange('' + (seasonId + 1))}>
+                        <FontAwesomeIcon icon="arrow-circle-right" />
+                    </Link>
+            }
         </div>
     )
   }

frontend/src/components/UserList/UserList.tsx

@@ -12,12 +12,6 @@ import UserStatsResponse from "../../models/UserStatsResponse";
 
 export default class UserList extends React.Component<IUserListProperties, IUserListState> {
 
-    constructor(props: Readonly<IUserListProperties> | IUserListProperties) {
-        super(props);
-
-        // this.state = { mocked: this.props.mocked }
-    }
-
     private createTableEntries(entries: TableEntry[]) {
     return entries.map((entry, index) => {
       const placement = index + 1;

frontend/src/mock/UserStatsMockService.ts

@@ -1,11 +1,10 @@
-import TableEntry from "../models/TableEntry";
-import UserStatsService from "../services/UserStatsService";
 import UserStatsResponse from "../models/UserStatsResponse";
 
 export default class UserStatsMockService {
     private static readonly mocks: UserStatsResponse[] = [
         {
             seasonId: "1",
+            maxSeasonId: "2",
             dates: {
                 start: new Date(2019, 12, 5),
                 end: new Date()
@@ -21,6 +20,7 @@ export default class UserStatsMockService {
         },
         {
             seasonId: "2",
+            maxSeasonId: "2",
             dates: {
                 start: new Date(new Date().getFullYear(), 0, 1),
                 end: new Date()
@@ -37,7 +37,6 @@ export default class UserStatsMockService {
     ]
 
     static async getStats(seasonId: string): Promise<UserStatsResponse> {
-
         return Promise.resolve(this.mocks[Number(seasonId) - 1])
     }
 

frontend/src/pages/MainPage/MainPage.scss

@@ -2,4 +2,18 @@
 
 .MainPage {
   @include background();
+
+  .blurred {
+    @include blurred();
+  }
+
+  .UserList-container {
+    .ClipLoader {
+      top: -10px;
+      z-index: 2;
+    }
+    .blurred {
+      z-index: 1;
+    }
+  }
 }

frontend/src/pages/MainPage/MainPage.tsx

@@ -1,4 +1,4 @@
-import React, {FC, FunctionComponent, useCallback, useEffect, useState} from "react";
+import React, {FC, useCallback, useEffect, useState} from "react";
 import UserStatsMockService from "../../mock/UserStatsMockService";
 import Header from "../../components/Header/Header";
 import UserList from "../../components/UserList/UserList";
@@ -9,6 +9,7 @@ import UserStatsResponse from "../../models/UserStatsResponse";
 import {withRouter} from "react-router";
 import RequestError from "../../models/RequestError";
 import './MainPage.scss';
+import {ClipLoader} from "react-spinners";
 
 // class MainPage extends React.Component<IMainPageProps, IMainPageState> {
 //
@@ -91,6 +92,7 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
     const [error, setError] = useState<RequestError | undefined>(undefined)
     const [loading, setLoadingState] = useState(true)
     const [seasonStats, setSeasonStats] = useState<UserStatsResponse>(UserStatsMockService.getStatsWithoutPromise(seasonId))
+    const [spinnerColor, setSpinnerColor] = useState('#61dafb')
 
     const toggleLoading = useCallback(() => setLoadingState(!loading), [setLoadingState, loading])
 
@@ -108,10 +110,20 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
                 error && <ErrorContainer message={error.message} />
             }
             {
-                (loading)
-                ? <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={true}         />
-                : <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={!(!error)}    />
+
             }
+            {
+                // (loading)
+                // ? <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={true}         />
+                // : <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={!(!error)}    />
+
+            }
+            <div className="UserList-container">
+                <ClipLoader color={spinnerColor} loading={true} size={150} />
+                <div className={loading ? "" : ""}>
+                    <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} />
+                </div>
+            </div>
             {/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
             <Footer />
         </div>