import Head from 'next/head';
import React from 'react';
import {ErrorPageComponent} from '../js/components/ErrorComponents';
import {getTournament} from '../js/redux/tournamentApi';
import {
Col,
Container, Navbar, NavbarBrand, NavItem, Row, Spinner
} from 'reactstrap';
import {Group} from '../js/components/GroupStage';
function FullscreenPage(props) {
return (
{props.groups.map(group => )}
Hallo Welt
);
}
function FullscreenPageHeader(props) {
return (
{props.title}
turnie.re
);
}
class Main extends React.Component {
static async getInitialProps({query}) {
return {query};
}
constructor(props) {
super(props);
this.maxPage = 2;
this.state = {
groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0
};
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
this.updateTournament = this.updateTournament.bind(this);
this.increasePage = this.increasePage.bind(this);
}
componentDidMount() {
this.updateTournament();
const intervalId = setInterval(this.updateTournament, 3000);
const intervalIdPage = setInterval(this.increasePage, 10000);
this.setState({intervalId: intervalId});
this.setState({intervalIdPage: intervalIdPage});
}
increasePage() {
if (this.state.page >= this.maxPage) {
this.setState({page: 0});
} else {
this.setState({page: this.state.page + 1});
}
}
componentWillUnmount() {
clearInterval(this.state.intervalId);
clearInterval(this.state.intervalIdPage);
}
updateTournament() {
getTournament(this.props.query.code, this.onTournamentRequestSuccess, this.onTournamentRequestError);
}
onTournamentRequestSuccess(requestStatus, tournament) {
// filter groups by page
const groups = tournament.groupStage.groups;
const offset = this.state.page * 12;
this.setState({
loadingStatus: requestStatus, tournament: tournament,
groups: groups.slice(offset, offset + 11), loadedTournament: true
});
}
onTournamentRequestError(error) {
if (error.response) {
this.setState({loadingStatus: error.response.status, loadedTournament: true});
} else {
this.setState({loadingStatus: -1, loadedTournament: true});
}
}
render() {
const {groups, tournament, loadedTournament, loadingStatus} = this.state;
if (!loadedTournament) {
return (
Vollbild-Ansicht: turnie.re
lade Vollbild-Ansicht
);
}
if (loadingStatus === 200) {
return (
{tournament.name}: turnie.re
);
} else {
return ;
}
}
}
export default Main;