116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
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";
|
|
|
|
interface State {
|
|
error?: string,
|
|
isLoaded: boolean,
|
|
users?: TableEntry[],
|
|
mock?: TableEntry[]
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
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
|
|
}))
|
|
});
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
const element = findDOMNode(this);
|
|
if (element != null) {
|
|
window.scrollTo(0, 0);
|
|
}
|
|
}
|
|
|
|
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 (
|
|
<tr key={index} className={placementClassName}>
|
|
<td>{placement}</td>
|
|
<td>{entry.name}</td>
|
|
<td>{entry.onlineTime}</td>
|
|
</tr>
|
|
)
|
|
});
|
|
}
|
|
|
|
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 (
|
|
<div className="App">
|
|
<p className="title">Humenius' TeamSpeak 3-Ranking</p>
|
|
{ this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Placement</th>
|
|
<th>Name</th>
|
|
<th>Online time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className={this.state.error != null || !this.state.isLoaded ? "blurred" : undefined}>
|
|
{this.renderTableData()}
|
|
</tbody>
|
|
</table>
|
|
<footer>
|
|
Made by <a href="https://humenius.me"
|
|
>Humenius</a>.
|
|
Powered by <a href="https://reactjs.org/"
|
|
>React</a>.
|
|
<br/>
|
|
<a href="ts3server://ts.humenius.me">
|
|
Click here to join my TeamSpeak server
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
}
|