90 lines
2.3 KiB
TypeScript
90 lines
2.3 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";
|
|
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,
|
|
loading: boolean,
|
|
users: TableEntry[],
|
|
mock: TableEntry[]
|
|
}
|
|
|
|
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()
|
|
// .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);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="App">
|
|
<Header />
|
|
{/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
|
|
{
|
|
(!this.state.error && this.state.loading)
|
|
? <UserList users={this.state.mock} />
|
|
: <UserList users={this.state.users} />
|
|
}
|
|
{
|
|
this.state.error && <ErrorContainer message={this.state.error} />
|
|
}
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
}
|