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

feature(database-connection): Fix routing and refactor style sheets

Browse Source
This commit is contained in:
Humenius
2021-01-12 11:49:08 +01:00
parent 29b6974714
commit 816d5df943
15 changed files with 251 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/src/pages/MainPage/MainPage.tsx
View File

@@ -1,7 +1,5 @@
import React, {useEffect} from "react";
import UserStatsService from "../../services/UserStatsService";
import React, {FC, FunctionComponent, useCallback, useEffect, useState} from "react";
import UserStatsMockService from "../../mock/UserStatsMockService";
import {findDOMNode} from "react-dom";
import Header from "../../components/Header/Header";
import UserList from "../../components/UserList/UserList";
import ErrorContainer from "../../components/ErrorContainer/ErrorContainer";
@@ -9,77 +7,115 @@ import Footer from "../../components/Footer/Footer";
import {RouteComponentProps} from "react-router/index";
import UserStatsResponse from "../../models/UserStatsResponse";
import {withRouter} from "react-router";
import RequestError from "../../models/RequestError";
import './MainPage.scss';
class MainPage extends React.Component<IMainPageProps, IMainPageState> {
// class MainPage extends React.Component<IMainPageProps, IMainPageState> {
//
// private apiService: UserStatsService = new UserStatsService();
// private mockService = new UserStatsMockService();
//
// constructor(props: IMainPageProps) {
// super(props)
//
// console.log("this.props.match.params.id = " + this.props.match.params.id)
//
//
//
// let seasonId = !this.props.match.params.id ? "1" : this.props.match.params.id
//
// console.log("seasonId = " + seasonId)
//
// this.state = {
// id: seasonId,
// error: undefined,
// loading: false,
// users: this.mockService.getStatsWithoutPromise("1")
// }
// }
//
// componentWillMount() {
// this.fetchData();
// }
//
// componentDidUpdate(prevProps: Readonly<IMainPageProps>) {
// const element = findDOMNode(this);
// if (element != null) {
// window.scrollTo(0, 0);
// }
//
// if(prevProps.match.params.id !== this.props.match.params.id) {
// this.setState({ id: this.props.match.params.id })
// this.fetchData()
// }
// }
//
// private fetchData() {
// this.setState({ loading: true })
// // this.apiService.getStats(this.state.id)
// // .then(data => this.setState({
// // loading: false,
// // users: data
// // }))
// this.mockService.getStats(this.state.id)
// .then(data => this.setState({
// loading: false,
// users: data
// }))
// }
//
// render() {
// console.log("this.state.id = " + this.state.id)
// console.log("this.state.users.seasonId = " + this.state.users.seasonId)
//
// return (
// <div className="MainPage">
// <Header />
// {
// this.state.error && <ErrorContainer message={this.state.error} />
// }
// {
// (this.state.loading)
// ? <UserList userStats={this.state.users} mocked={true} />
// : <UserList userStats={this.state.users} mocked={!(!this.state.error)} />
// }
// {/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
// <Footer />
// </div>
// )
// }
// }
private apiService: UserStatsService = new UserStatsService();
private mockService = new UserStatsMockService();
const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
const [seasonId, setSeasonId] = useState(props.match.params.id)
const [error, setError] = useState<RequestError | undefined>(undefined)
const [loading, setLoadingState] = useState(true)
const [seasonStats, setSeasonStats] = useState<UserStatsResponse>(UserStatsMockService.getStatsWithoutPromise(seasonId))
constructor(props: IMainPageProps) {
super(props)
const toggleLoading = useCallback(() => setLoadingState(!loading), [setLoadingState, loading])
console.log("this.props.match.params.id = " + this.props.match.params.id)
useEffect(() => {
UserStatsMockService.getStats(seasonId)
.then(res => setSeasonStats(res))
.catch(err => setError(err))
.finally(() => toggleLoading())
}, [seasonId, toggleLoading])
let seasonId = !this.props.match.params.id ? "1" : this.props.match.params.id
console.log("seasonId = " + seasonId)
this.state = {
id: seasonId,
error: undefined,
loading: false,
users: this.mockService.getStatsWithoutPromise("1")
}
}
componentWillMount() {
this.fetchData();
}
componentDidUpdate(prevProps: Readonly<IMainPageProps>) {
const element = findDOMNode(this);
if (element != null) {
window.scrollTo(0, 0);
}
// if(prevProps.match.params.id !== this.props.match.params.id) {
// this.setState({ id: this.props.match.params.id })
// }
}
private fetchData() {
this.setState({ loading: true })
// this.apiService.getStats(this.state.id)
// .then(data => this.setState({
// loading: false,
// users: data
// }))
this.mockService.getStats(this.state.id)
.then(data => this.setState({
loading: false,
users: data
}))
}
render() {
return (
<div className="MainPage">
<Header />
{
this.state.error && <ErrorContainer message={this.state.error} />
}
{
(this.state.loading)
? <UserList userStats={this.state.users} mocked={true} />
: <UserList userStats={this.state.users} mocked={!(!this.state.error)} />
}
{/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
<Footer />
</div>
)
}
return (
<div className="MainPage">
<Header />
{
error && <ErrorContainer message={error.message} />
}
{
(loading)
? <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={true} />
: <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={!(!error)} />
}
{/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
<Footer />
</div>
)
}
export interface IMainPageProps extends RouteComponentProps<{ id: string }> {