turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Fullscreen page: fetch matches from api

This commit is contained in:
Felix Hamme 2019-11-06 10:30:33 +01:00
parent 1371d8d207
commit aa3d026f83
2 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/redux/tournamentApi.js
View File

@ -33,6 +33,18 @@ export function getTournamentMeta(tournamentId, successCallback, errorCallback)
.catch(errorCallback); .catch(errorCallback);
} }
export function getTournamentMatches(tournamentId, successCallback, errorCallback, matchState=null) {
let matchFilter = '';
if (matchState) {
matchFilter = '?state=' + matchState;
}
getRequest(getState(), '/tournaments/' + tournamentId + '/matches' + matchFilter)
.then(response => {
successCallback(response.status, response.data);
})
.catch(errorCallback);
}
function convertTournament(apiTournament) { function convertTournament(apiTournament) {
let groupStage = null; let groupStage = null;

40
pages/tournament-fullscreen.js
View File

@ -4,16 +4,28 @@ import {ErrorPageComponent} from '../js/components/ErrorComponents';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/css/everypage.css'; import '../static/css/everypage.css';
import '../static/css/tournament-fullscreen.css'; import '../static/css/tournament-fullscreen.css';
import {getTournamentMeta} from '../js/redux/tournamentApi'; import {getTournamentMatches, getTournamentMeta} from '../js/redux/tournamentApi';
import {Navbar, NavbarBrand, NavItem} from 'reactstrap'; import {Navbar, NavbarBrand, NavItem} from 'reactstrap';
function FullscreenPage(props) { function FullscreenPage(props) {
return (<div> return (<div>
<FullscreenPageHeader title={props.tournamentMeta.name} code={props.tournamentMeta.code}/> <FullscreenPageHeader title={props.tournamentMeta.name} code={props.tournamentMeta.code}/>
{JSON.stringify(props.tournamentMeta)}
<Matches matches={props.matches}/>
</div>); </div>);
} }
function Matches(props) {
return (<div>
{props.matches.map(match => <Match key={match.id} match={match}/>)}
</div>);
}
function Match(props) {
return <div>{JSON.stringify(props.match)}</div>;
}
function FullscreenPageHeader(props) { function FullscreenPageHeader(props) {
return (<Navbar color='light' className='mb-4 border-bottom py-0'> return (<Navbar color='light' className='mb-4 border-bottom py-0'>
<NavItem className='font-weight-bold'>{props.levelName}</NavItem> <NavItem className='font-weight-bold'>{props.levelName}</NavItem>
@ -33,16 +45,22 @@ class Main extends React.Component {
super(props); super(props);
this.state = { this.state = {
tournamentMeta: null tournamentMeta: null, matches: []
}; };
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this); this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
this.onTournamentRequestError = this.onTournamentRequestError.bind(this); this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
this.onTournamentMatchesRequestSuccess = this.onTournamentMatchesRequestSuccess.bind(this);
this.onTournamentMatchesRequestError = this.onTournamentMatchesRequestError.bind(this);
} }
componentDidMount() { componentDidMount() {
getTournamentMeta(this.props.query.code, this.onTournamentRequestSuccess, this.onTournamentRequestError); const tournamentId = this.props.query.code;
getTournamentMeta(tournamentId, this.onTournamentRequestSuccess, this.onTournamentRequestError);
getTournamentMatches(tournamentId, this.onTournamentMatchesRequestSuccess,
this.onTournamentMatchesRequestError);
} }
onTournamentRequestSuccess(requestStatus, tournament) { onTournamentRequestSuccess(requestStatus, tournament) {
this.setState({metaStatus: requestStatus, tournamentMeta: tournament}); this.setState({metaStatus: requestStatus, tournamentMeta: tournament});
} }
@ -55,15 +73,27 @@ class Main extends React.Component {
} }
} }
onTournamentMatchesRequestSuccess(requestStatus, matches) {
this.setState({matchesStatus: requestStatus, matches: matches});
}
onTournamentMatchesRequestError(error) {
if (error.response) {
this.setState({matchesStatus: error.response.status});
} else {
this.setState({matchesStatus: -1});
}
}
render() { render() {
const {metaStatus, tournamentMeta} = this.state; const {metaStatus, tournamentMeta, matches} = this.state;
if (metaStatus === 200) { if (metaStatus === 200) {
return (<div> return (<div>
<Head> <Head>
<title>{tournamentMeta.name}: turnie.re</title> <title>{tournamentMeta.name}: turnie.re</title>
</Head> </Head>
<FullscreenPage tournamentMeta={tournamentMeta}/> <FullscreenPage tournamentMeta={tournamentMeta} matches={matches}/>
</div>); </div>);
} else { } else {
return <ErrorPageComponent code={metaStatus}/>; return <ErrorPageComponent code={metaStatus}/>;