From aa3d026f83e09fb83003f780761043b1bbbdec9b Mon Sep 17 00:00:00 2001
From: Felix Hamme <gitlab@fj.hamme.net>
Date: Wed, 6 Nov 2019 10:30:33 +0100
Subject: [PATCH] Fullscreen page: fetch matches from api

---
 js/redux/tournamentApi.js      | 12 ++++++++++
 pages/tournament-fullscreen.js | 40 +++++++++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/js/redux/tournamentApi.js b/js/redux/tournamentApi.js
index 746a176..4669257 100644
--- a/js/redux/tournamentApi.js
+++ b/js/redux/tournamentApi.js
@@ -33,6 +33,18 @@ export function getTournamentMeta(tournamentId, successCallback, 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) {
     let groupStage = null;
diff --git a/pages/tournament-fullscreen.js b/pages/tournament-fullscreen.js
index 9f8b83e..5aa3f9f 100644
--- a/pages/tournament-fullscreen.js
+++ b/pages/tournament-fullscreen.js
@@ -4,16 +4,28 @@ import {ErrorPageComponent} from '../js/components/ErrorComponents';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import '../static/css/everypage.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';
 
 
 function FullscreenPage(props) {
     return (<div>
         <FullscreenPageHeader title={props.tournamentMeta.name} code={props.tournamentMeta.code}/>
+        {JSON.stringify(props.tournamentMeta)}
+        <Matches matches={props.matches}/>
     </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) {
     return (<Navbar color='light' className='mb-4 border-bottom py-0'>
         <NavItem className='font-weight-bold'>{props.levelName}</NavItem>
@@ -33,16 +45,22 @@ class Main extends React.Component {
         super(props);
 
         this.state = {
-            tournamentMeta: null
+            tournamentMeta: null, matches: []
         };
         this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
         this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
+        this.onTournamentMatchesRequestSuccess = this.onTournamentMatchesRequestSuccess.bind(this);
+        this.onTournamentMatchesRequestError = this.onTournamentMatchesRequestError.bind(this);
     }
 
     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) {
         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() {
-        const {metaStatus, tournamentMeta} = this.state;
+        const {metaStatus, tournamentMeta, matches} = this.state;
         if (metaStatus === 200) {
             return (<div>
                 <Head>
                     <title>{tournamentMeta.name}: turnie.re</title>
                 </Head>
-                <FullscreenPage tournamentMeta={tournamentMeta}/>
+                <FullscreenPage tournamentMeta={tournamentMeta} matches={matches}/>
             </div>);
         } else {
             return <ErrorPageComponent code={metaStatus}/>;