Partially goes towards #2 by just periodically polling the matches AP…

…I for updates - needs push rather than pull
ajfisher · Jul 16, 2017 · 642a67f · 642a67f
1 parent 410fca8
commit 642a67f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 32 deletions.
diff --git a/app/src/components/finals/index.js b/app/src/components/finals/index.js
@@ -24,17 +24,17 @@ class Final extends Component {
     handleResult = (match) => this.props.onResult(match, this.props.finalType);
 
     render() {
-        const { finalType } = this.props;
+        const { authed, finalType, teams, matches } = this.props;
 
         return (
             <Container>
                 <Divider section />
                 <Header as="h2">{ final_names[finalType]}</Header>
-                <Fixture teams={ this.props.teams}
-                    matches={this.props.matches}
+                <Fixture teams={ teams }
+                    matches={ matches }
                     finalType={finalType}
                     onResult={ this.handleResult }
-                    authed={ this.props.authed }
+                    authed={ authed }
                 />
             </Container>
         )
@@ -45,6 +45,7 @@ class Finals extends Component {
 
     handleResult = (match, finalType) => this.props.onResult(match, finalType);
 
+
     render() {
 
         const no_pools = this.props.tournament.pools.length;

diff --git a/app/src/components/fixture/index.js b/app/src/components/fixture/index.js
@@ -21,8 +21,6 @@ class Fixture extends Component {
     // handler in the object, which will allow a call later.
     handle_win_result = (result) => {
 
-        // TODO - make call to the API to update the data
-
         let matches = this.state.matches;
         let index = _.findIndex(matches, {'id': result.match_id});
         let match = matches[index];
@@ -58,6 +56,13 @@ class Fixture extends Component {
                 matches: nextProps.matches,
             });
         }
+
+        // we do this to ensure the matches update properly
+        if (nextProps.matches !== this.props.matches) {
+            this.setState({
+                matches: nextProps.matches,
+            });
+        }
     };
 
 

diff --git a/app/src/layouts/tournament/index.js b/app/src/layouts/tournament/index.js
@@ -31,8 +31,6 @@ class Tournament extends Component {
     load_data = (id, secret) => {
         // gets the actual tournament data.
 
-        let tournament = null;
-
         this.state = { loading: true, sk: secret };
 
         const options = {
@@ -54,41 +52,64 @@ class Tournament extends Component {
             }
         }).then((data) => {
 
-            tournament = data;
+            this.load_matches(data);
 
-            // now we know we have a tournament, get the pool matches
-            fetch("/api/tournament/" + id + "/matches").then((res) => {
-                if (! res.ok) {
-                    throw new Error(res.json());
-                } else {
-                    return res.json();
-                }
-            }).then((matches) => {
+        }).catch((err) => {
+            console.log(err);
+            this.setState({loading: false, status: 404 });
+        });
 
-                // attach the matches to the right place in tournament object
-                tournament.pool_matches = _.filter(matches, {type: 'group'});
-                tournament.finals = {};
+    };
 
-                tournament.finals_required.forEach((finaltype) => {
-                    tournament.finals[finaltype] = {};
-                    tournament.finals[finaltype]["matches"] = _.filter(matches, {type: finaltype});
-                });
+    load_matches(tournament_data) {
+        // use this to load or reload the match data
 
-                this.setState(tournament);
-                this.setState({loading: false});
+        let tournament = {};
+
+        if (typeof(tournament_data) === "undefined") {
+            tournament = this.state;
+        } else {
+            tournament = tournament_data;
+        }
+
+        const { id } = tournament;
+
+        // now we know we have a tournament, get the pool matches
+        fetch("/api/tournament/" + id + "/matches").then((res) => {
+            if (! res.ok) {
+                throw new Error(res.json());
+            } else {
+                return res.json();
+            }
+        }).then((matches) => {
 
-            }).catch((err) => {
-                console.log(err);
-                this.setState({loading: false, status: 404 });
+            // attach the matches to the right place in tournament object
+            tournament.pool_matches = _.filter(matches, {type: 'group'});
+            tournament.finals = {};
+
+            tournament.finals_required.forEach((finaltype) => {
+                tournament.finals[finaltype] = {};
+                tournament.finals[finaltype]["matches"] = _.filter(matches, {type: finaltype});
             });
 
+            this.setState(tournament);
+
+            if (this.state.loading) {
+                this.setState({loading: false});
+            }
+
+            if (! this.state.match_refreshing && ! this.state.sk) {
+                setInterval(this.load_matches.bind(this), 60000);
+                this.setState({match_refreshing: true});
+            }
+
         }).catch((err) => {
             console.log(err);
             this.setState({loading: false, status: 404 });
         });
-
     };
 
+
     handleResult = (match, match_type) => {
         // this occurs when a result gets posted so we want to update the
         // results of the matches.
@@ -173,10 +194,8 @@ class Tournament extends Component {
         }, 0);
 
         if (result_count === matches.length) {
-
             this.advanceRound(round_type);
         }
-
     }
 
     advanceRound(round_type) {