From 29b697471458fbf0591ac0b0494f4e0992a11880 Mon Sep 17 00:00:00 2001 From: Humenius Date: Mon, 11 Jan 2021 15:46:09 +0100 Subject: [PATCH] feature(database-connection): Add routing for dynamic seasons --- frontend/package.json | 23 +- frontend/src/App.tsx | 74 +-- .../ErrorContainer/ErrorContainer.test.tsx | 14 - .../src/components/Footer/Footer.test.tsx | 14 - .../src/components/Header/Header.test.tsx | 14 - .../components/SeasonDetail/SeasonDetail.scss | 1 + .../components/SeasonDetail/SeasonDetail.tsx | 24 + .../components/SeasonSwitch/SeasonSwitch.scss | 1 + .../components/SeasonSwitch/SeasonSwitch.tsx | 28 ++ .../src/components/UserList/UserList.test.tsx | 14 - frontend/src/components/UserList/UserList.tsx | 28 +- frontend/src/mock/UserStatsMockService.ts | 54 +- frontend/src/models/UserStatsResponse.tsx | 6 + frontend/src/pages/MainPage/MainPage.scss | 3 + frontend/src/pages/MainPage/MainPage.tsx | 96 ++++ frontend/src/services/UserStatsService.ts | 4 +- frontend/yarn.lock | 467 +++++++++++++++++- 17 files changed, 699 insertions(+), 166 deletions(-) delete mode 100644 frontend/src/components/ErrorContainer/ErrorContainer.test.tsx delete mode 100644 frontend/src/components/Footer/Footer.test.tsx delete mode 100644 frontend/src/components/Header/Header.test.tsx create mode 100644 frontend/src/components/SeasonDetail/SeasonDetail.scss create mode 100644 frontend/src/components/SeasonDetail/SeasonDetail.tsx create mode 100644 frontend/src/components/SeasonSwitch/SeasonSwitch.scss create mode 100644 frontend/src/components/SeasonSwitch/SeasonSwitch.tsx delete mode 100644 frontend/src/components/UserList/UserList.test.tsx create mode 100644 frontend/src/models/UserStatsResponse.tsx create mode 100644 frontend/src/pages/MainPage/MainPage.scss create mode 100644 frontend/src/pages/MainPage/MainPage.tsx diff --git a/frontend/package.json b/frontend/package.json index 87334d9..ae0e143 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,22 +2,34 @@ "name": "ts-onlinetime-ranks-frontend", "version": "0.0.2", "private": true, - "proxy": "https://api.tsotr.humenius.me", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.32", + "@fortawesome/free-solid-svg-icons": "^5.15.1", + "@fortawesome/react-fontawesome": "^0.1.14", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", - "@types/react": "^16.9.0", - "@types/react-dom": "^16.9.0", + "husky": "^4.3.7", + "lint-staged": "^10.5.3", + "prettier": "^2.2.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "sass": "^1.26.5", "typescript": "~3.7.2" }, + "lint-staged": { + "/src/**/*.{js,jsx,ts,tsx,json,css,scss}": [ + "prettier --single-quote --write", + "git add" + ] + }, "scripts": { + "precommit": "lint-staged", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", @@ -37,5 +49,10 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/react": "^16.14.2", + "@types/react-dom": "^16.9.10", + "@types/react-router-dom": "^5.1.7" } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4f7c015..8742bff 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,51 +1,15 @@ import React from 'react'; import './App.scss'; -import UserStatsMockService from "./mock/UserStatsMockService"; -import UserStatsService from "./services/UserStatsService"; -import {findDOMNode} from "react-dom"; -import TableEntry from "./models/TableEntry"; -import UserList from './components/UserList/UserList'; -import ErrorContainer from './components/ErrorContainer/ErrorContainer'; -import Footer from './components/Footer/Footer'; -import Header from './components/Header/Header'; +import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; -interface State { - error?: string, - loading: boolean, - users: TableEntry[], - mock: TableEntry[] -} +import {library} from "@fortawesome/fontawesome-svg-core"; +import {faArrowCircleLeft, faArrowCircleRight} from "@fortawesome/free-solid-svg-icons"; +import MainPage, {IMainPageProps} from "./pages/MainPage/MainPage"; + +library.add(faArrowCircleLeft, faArrowCircleRight) export default class App extends React.Component { - private apiService: UserStatsService = new UserStatsService(); - private mockService = new UserStatsMockService(); - - state: State; - - constructor(props: Readonly<{}>) { - super(props); - this.state = { - error: undefined, - loading: false, - users: [], - mock: this.mockService.getStatsWithoutPromise() - } - } - - componentWillMount() { - this.fetchData(); - } - - private fetchData() { - this.setState({ loading: true }) - this.apiService.getStats() - .then(data => this.setState({ - loading: false, - users: data - })) - } - // componentDidMount() { // this.setState({loading: false, mock: this.mockService.getStatsWithoutPromise()}); // this.apiService.getStats() @@ -62,28 +26,14 @@ export default class App extends React.Component { // }); // } - componentDidUpdate() { - const element = findDOMNode(this); - if (element != null) { - window.scrollTo(0, 0); - } - } - render() { return ( -
-
- {/* { this.state.error != null ?

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

: null} */} - { - (!this.state.error && this.state.loading) - ? - : - } - { - this.state.error && - } -
-
+ + + ()} /> + ()} /> + + ); } } diff --git a/frontend/src/components/ErrorContainer/ErrorContainer.test.tsx b/frontend/src/components/ErrorContainer/ErrorContainer.test.tsx deleted file mode 100644 index 82bbf00..0000000 --- a/frontend/src/components/ErrorContainer/ErrorContainer.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom/extend-expect'; -import ErrorContainer from './ErrorContainer'; - -describe('', () => { - test('it should mount', () => { - render(); - - const errorContainer = screen.getByTestId('ErrorContainer'); - - expect(errorContainer).toBeInTheDocument(); - }); -}); \ No newline at end of file diff --git a/frontend/src/components/Footer/Footer.test.tsx b/frontend/src/components/Footer/Footer.test.tsx deleted file mode 100644 index 10f5584..0000000 --- a/frontend/src/components/Footer/Footer.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom/extend-expect'; -import Footer from './Footer'; - -describe('