diff --git a/frontend/.babelrc b/frontend/.babelrc new file mode 100644 index 0000000..14aa27c --- /dev/null +++ b/frontend/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@babel/preset-react", "@babel/preset-env"], + "plugins": ["emotion"] +} \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index ae0e143..6d3aadb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", + "react-spinners": "^0.10.4", "sass": "^1.26.5", "typescript": "~3.7.2" }, diff --git a/frontend/src/components/ErrorContainer/ErrorContainer.tsx b/frontend/src/components/ErrorContainer/ErrorContainer.tsx index 2fe99a9..db80d45 100644 --- a/frontend/src/components/ErrorContainer/ErrorContainer.tsx +++ b/frontend/src/components/ErrorContainer/ErrorContainer.tsx @@ -6,9 +6,6 @@ export interface ErrorContainerProperties { } class ErrorContainer extends React.Component { - constructor(props: Readonly) { - super(props) - } render() { return ( diff --git a/frontend/src/components/SeasonDetail/SeasonDetail.tsx b/frontend/src/components/SeasonDetail/SeasonDetail.tsx index 555add0..3dc6dd6 100644 --- a/frontend/src/components/SeasonDetail/SeasonDetail.tsx +++ b/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 diff --git a/frontend/src/components/SeasonSwitch/SeasonSwitch.tsx b/frontend/src/components/SeasonSwitch/SeasonSwitch.tsx index bfe1225..50bce95 100644 --- a/frontend/src/components/SeasonSwitch/SeasonSwitch.tsx +++ b/frontend/src/components/SeasonSwitch/SeasonSwitch.tsx @@ -9,6 +9,7 @@ class SeasonSwitch extends React.Component { render() { let seasonId = Number(this.props.userStats.seasonId) + let maxSeasonId = Number(this.props.userStats.maxSeasonId) return(
{ @@ -20,9 +21,12 @@ class SeasonSwitch extends React.Component { - this.props.onSeasonIdChange('' + (seasonId + 1))}> - - + { + seasonId !== maxSeasonId + && this.props.onSeasonIdChange('' + (seasonId + 1))}> + + + }
) } diff --git a/frontend/src/components/UserList/UserList.tsx b/frontend/src/components/UserList/UserList.tsx index 24333f1..5bfec1f 100644 --- a/frontend/src/components/UserList/UserList.tsx +++ b/frontend/src/components/UserList/UserList.tsx @@ -12,12 +12,6 @@ import UserStatsResponse from "../../models/UserStatsResponse"; export default class UserList extends React.Component { - constructor(props: Readonly | IUserListProperties) { - super(props); - - // this.state = { mocked: this.props.mocked } - } - private createTableEntries(entries: TableEntry[]) { return entries.map((entry, index) => { const placement = index + 1; diff --git a/frontend/src/mock/UserStatsMockService.ts b/frontend/src/mock/UserStatsMockService.ts index 531f1b0..a552a4c 100644 --- a/frontend/src/mock/UserStatsMockService.ts +++ b/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 { - return Promise.resolve(this.mocks[Number(seasonId) - 1]) } diff --git a/frontend/src/pages/MainPage/MainPage.scss b/frontend/src/pages/MainPage/MainPage.scss index 5a0b98c..1809b4e 100644 --- a/frontend/src/pages/MainPage/MainPage.scss +++ b/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; + } + } } \ No newline at end of file diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx index feacadb..9af7ed2 100644 --- a/frontend/src/pages/MainPage/MainPage.tsx +++ b/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 { // @@ -91,6 +92,7 @@ const MainPage: FC = (props: IMainPageProps) => { const [error, setError] = useState(undefined) const [loading, setLoadingState] = useState(true) const [seasonStats, setSeasonStats] = useState(UserStatsMockService.getStatsWithoutPromise(seasonId)) + const [spinnerColor, setSpinnerColor] = useState('#61dafb') const toggleLoading = useCallback(() => setLoadingState(!loading), [setLoadingState, loading]) @@ -108,10 +110,20 @@ const MainPage: FC = (props: IMainPageProps) => { error && } { - (loading) - ? - : + } + { + // (loading) + // ? + // : + + } +
+ +
+ +
+
{/* { this.state.error != null ?

{ this.state.error } Please try again later!

: null} */}