diff --git a/frontend/generate-react-cli.json b/frontend/generate-react-cli.json new file mode 100644 index 0000000..c7e3e62 --- /dev/null +++ b/frontend/generate-react-cli.json @@ -0,0 +1,15 @@ +{ + "usesTypeScript": true, + "usesCssModule": false, + "cssPreprocessor": "scss", + "testLibrary": "Testing Library", + "component": { + "default": { + "path": "src/components", + "withStyle": true, + "withTest": true, + "withStory": false, + "withLazy": true + } + } +} \ No newline at end of file diff --git a/frontend/src/App.scss b/frontend/src/App.scss index c4e2af9..2a8df4a 100644 --- a/frontend/src/App.scss +++ b/frontend/src/App.scss @@ -18,37 +18,6 @@ filter: blur(5px); } -.first-place { - font-size: xx-large; - font-weight: bolder; - color: gold; -} - -.second-place { - font-size: x-large; - font-weight: bold; - color: silver; -} - -.third-place { - font-size: larger; - color: saddlebrown; -} - -.title { - font-size: 4vw; - color: #88c9db; -} - - -.error-message { - color: red; -} - -footer { - padding: 2rem; -} - a:link, a:visited, a:hover, diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9b102e3..4f7c015 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,12 +4,16 @@ 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'; interface State { error?: string, - isLoaded: boolean, - users?: TableEntry[], - mock?: TableEntry[] + loading: boolean, + users: TableEntry[], + mock: TableEntry[] } export default class App extends React.Component { @@ -17,36 +21,47 @@ export default class App extends React.Component { private apiService: UserStatsService = new UserStatsService(); private mockService = new UserStatsMockService(); - state: State = { - error: undefined, - isLoaded: false, - users: undefined, - mock: undefined + state: State; + + constructor(props: Readonly<{}>) { + super(props); + this.state = { + error: undefined, + loading: false, + users: [], + mock: this.mockService.getStatsWithoutPromise() + } } - componentDidMount() { - this.setState({isLoaded: false, mock: this.mockService.getStatsWithoutPromise()}); - // this.mockService.getStats() - // .then(data => this.setState({ - // data: data, - // mock: data - // })) - // .finally(() => { - // }); - this.apiService.getStats() - .then(data => this.setState({ - isLoaded: true, - users: data - })) - .catch(error => { - error.response.json() - .then((err: any) => this.setState({ - isLoaded: true, - error: err.error - })) - }); + 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() + // .then(data => this.setState({ + // isLoaded: true, + // users: data + // })) + // .catch(error => { + // error.response.json() + // .then((err: any) => this.setState({ + // isLoaded: true, + // error: err.error + // })) + // }); + // } + componentDidUpdate() { const element = findDOMNode(this); if (element != null) { @@ -54,63 +69,20 @@ export default class App extends React.Component { } } - createTableEntries(entries: TableEntry[]) { - return entries.map((entry, index) => { - const placement = index + 1; - const placementClassName = placement === 1 ? "first-place" - : (placement === 2 ? "second-place" - : (placement === 3 ? "third-place" - : undefined)) - return ( - - {placement} - {entry.name} - {entry.rank} - {entry.onlineTime} - - ) - }); - } - - renderTableData() { - const { error, isLoaded, users, mock } = this.state; - if (users != null && isLoaded && error == null) { - return this.createTableEntries(users); - } else if (isLoaded && error != null && mock != null) { - return this.createTableEntries(mock); - } else if (mock != null) { - return this.createTableEntries(mock); - } - } - render() { return (
-

Humenius' TeamSpeak 3-Ranking

- { this.state.error != null ?

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

: null} - - - - - - - - - - - {this.renderTableData()} - -
PlacementNameRankOnline time
- +
+ {/* { 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.scss b/frontend/src/components/ErrorContainer/ErrorContainer.scss new file mode 100644 index 0000000..f6297a8 --- /dev/null +++ b/frontend/src/components/ErrorContainer/ErrorContainer.scss @@ -0,0 +1,5 @@ +.ErrorContainer { + .error-message { + color: red; + } +} \ No newline at end of file diff --git a/frontend/src/components/ErrorContainer/ErrorContainer.test.tsx b/frontend/src/components/ErrorContainer/ErrorContainer.test.tsx new file mode 100644 index 0000000..82bbf00 --- /dev/null +++ b/frontend/src/components/ErrorContainer/ErrorContainer.test.tsx @@ -0,0 +1,14 @@ +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/ErrorContainer/ErrorContainer.tsx b/frontend/src/components/ErrorContainer/ErrorContainer.tsx new file mode 100644 index 0000000..2fe99a9 --- /dev/null +++ b/frontend/src/components/ErrorContainer/ErrorContainer.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './ErrorContainer.scss'; + +export interface ErrorContainerProperties { + message: string +} + +class ErrorContainer extends React.Component { + constructor(props: Readonly) { + super(props) + } + + render() { + return ( +
+ { this.props.message } +
+ ) + } +} + +export default ErrorContainer; diff --git a/frontend/src/components/Footer/Footer.scss b/frontend/src/components/Footer/Footer.scss new file mode 100644 index 0000000..f746ee9 --- /dev/null +++ b/frontend/src/components/Footer/Footer.scss @@ -0,0 +1,5 @@ +.Footer { + footer { + padding: 2rem; + } +} \ No newline at end of file diff --git a/frontend/src/components/Footer/Footer.test.tsx b/frontend/src/components/Footer/Footer.test.tsx new file mode 100644 index 0000000..10f5584 --- /dev/null +++ b/frontend/src/components/Footer/Footer.test.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; +import Footer from './Footer'; + +describe('