humenius/ts-onlinetime-ranks
1
1
Fork 0
Code Issues 1 Pull Requests Releases 2 Wiki Activity

feature(database-connection): Add routing for dynamic seasons

Browse Source
This commit is contained in:
Humenius
2021-01-11 15:46:09 +01:00
parent ff1c56c791
commit 29b6974714
17 changed files with 699 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/ErrorContainer/ErrorContainer.test.tsx
View File

@@ -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('<ErrorContainer />', () => {
test('it should mount', () => {
render(<ErrorContainer />);
const errorContainer = screen.getByTestId('ErrorContainer');
expect(errorContainer).toBeInTheDocument();
});
});

14
frontend/src/components/Footer/Footer.test.tsx
View File

@@ -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('<Footer />', () => {
test('it should mount', () => {
render(<Footer />);
const footer = screen.getByTestId('Footer');
expect(footer).toBeInTheDocument();
});
});

14
frontend/src/components/Header/Header.test.tsx
View File

@@ -1,14 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Header from './Header';
describe('<Header />', () => {
test('it should mount', () => {
render(<Header />);
const header = screen.getByTestId('Header');
expect(header).toBeInTheDocument();
});
});

1
frontend/src/components/SeasonDetail/SeasonDetail.scss Normal file
View File

@@ -0,0 +1 @@
.SeasonDetail {}

24
frontend/src/components/SeasonDetail/SeasonDetail.tsx Normal file
View File

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

1
frontend/src/components/SeasonSwitch/SeasonSwitch.scss Normal file
View File

@@ -0,0 +1 @@
.SeasonSwitch {}

28
frontend/src/components/SeasonSwitch/SeasonSwitch.tsx Normal file
View File

@@ -0,0 +1,28 @@
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";
class SeasonSwitch extends React.Component<SeasonDetailProperties> {
render() {
let seasonId = Number(this.props.seasonId)
return(
<div className="SeasonSwitch" data-testid="SeasonSwitch">
<Link to={"/season/" + (seasonId - 1)}>
<FontAwesomeIcon icon="arrow-circle-left" />
</Link>
<SeasonDetail {...this.props} />
<Link to={"/season/" + (seasonId + 1)}>
<FontAwesomeIcon icon="arrow-circle-right" />
</Link>
</div>
)
}
}
export default SeasonSwitch;

14
frontend/src/components/UserList/UserList.test.tsx
View File

@@ -1,14 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import UserList from './UserList';
describe('<UserList />', () => {
test('it should mount', () => {
render(<UserList />);
const userList = screen.getByTestId('UserList');
expect(userList).toBeInTheDocument();
});
});

28
frontend/src/components/UserList/UserList.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import TableEntry from '../../models/TableEntry';
import './UserList.scss';
import SeasonSwitch from "../SeasonSwitch/SeasonSwitch";
import UserStatsResponse from "../../models/UserStatsResponse";
// const UserList: React.FC = () => (
// <div className="UserList" data-testid="UserList">
@@ -8,17 +10,15 @@ import './UserList.scss';
// </div>
// );
interface UserListProperties {
users: TableEntry[]
}
export default class UserList extends React.Component<IUserListProperties, IUserListState> {
class UserList extends React.Component<UserListProperties> {
constructor(props: Readonly<IUserListProperties> | IUserListProperties) {
super(props);
constructor(props: Readonly<UserListProperties>) {
super(props);
}
this.state = { mocked: this.props.mocked }
}
private createTableEntries(entries: TableEntry[]) {
private createTableEntries(entries: TableEntry[]) {
return entries.map((entry, index) => {
const placement = index + 1;
const placementClassName = placement === 1 ? "first-place"
@@ -51,6 +51,7 @@ class UserList extends React.Component<UserListProperties> {
render() {
return (
<div className="UserList" data-testid="UserList">
<SeasonSwitch seasonId={this.props.userStats.seasonId} dates={this.props.userStats.dates} />
<table>
<thead>
<tr>
@@ -61,7 +62,7 @@ class UserList extends React.Component<UserListProperties> {
</tr>
</thead>
<tbody>
{this.createTableEntries(this.props.users)}
{this.createTableEntries(this.props.userStats.stats)}
</tbody>
</table>
</div>
@@ -69,4 +70,11 @@ class UserList extends React.Component<UserListProperties> {
}
}
export default UserList;
interface IUserListProperties {
userStats: UserStatsResponse
mocked: boolean
}
interface IUserListState {
mocked: boolean
}