Update next stage (fetching from backend) after a match in the preceding playoff stage changes to finished (after successful backend update)

js/components/Match.js

@@ -58,6 +58,7 @@ export class Match extends React.Component {
         updatedMatch.winnerTeamId = winner === null ? null : winner.id;
         this.setState({match: updatedMatch});
         this.toggleModal();
+        this.props.onFinish !== undefined && this.props.onFinish();
     }
 
     onEndMatchError() {

js/components/PlayoffStages.js

@@ -1,11 +1,59 @@
 import {Stage} from './Stage';
-import React from 'react';
+import React, {Component} from 'react';
+import {getStage} from '../redux/tournamentApi';
+import {notify} from 'react-notify-toast';
 
-export function PlayoffStages(props) {
+export class PlayoffStages extends Component {
-    return (<div>
+    constructor(props) {
-        {props.playoffStages.map(stage => <Stage isSignedIn={props.isSignedIn} isOwner={props.isOwner}
+        super(props);
-            level={getLevelName(stage.level)} matches={stage.matches} key={stage.level}/>)}
+        this.state = {stages: this.props.playoffStages};
-    </div>);
+
+        this.updateStage = this.updateStage.bind(this);
+        this.updateNextStage = this.updateNextStage.bind(this);
+        this.onUpdateStageSuccess = this.onUpdateStageSuccess.bind(this);
+        this.onUpdateStageError = this.onUpdateStageError.bind(this);
+    }
+
+    updateStage(id) {
+        getStage(id, this.onUpdateStageSuccess, this.onUpdateStageError);
+    }
+
+    updateNextStage(changedStageId) {
+        let found = false;
+        for (const stage of this.state.stages) {
+            if (found) {
+                this.updateStage(stage.id);
+                return;
+            }
+            if (stage.id === changedStageId) {
+                found = true;
+            }
+        }
+    }
+
+    onUpdateStageSuccess(status, updatedStage) {
+        const updatedStageIndex = this.state.stages.findIndex(stage => stage.id === updatedStage.id);
+        if (updatedStageIndex === -1) {
+            this.onUpdateStageError();
+            return;
+        }
+        const updatedStages = this.state.stages;
+        updatedStages[updatedStageIndex] = updatedStage;
+        this.setState({stages: updatedStages});
+    }
+
+    onUpdateStageError() {
+        notify.show('Die nachfolgende Stage konnte nicht aktualisiert werden.', 'error', 2500);
+    }
+
+    render() {
+        return (<div>
+            {this.props.playoffStages.map(stage => <Stage isSignedIn={this.props.isSignedIn}
+                isOwner={this.props.isOwner} updateNextStage={() => this.updateNextStage(stage.id)}
+                level={getLevelName(stage.level)} matches={stage.matches}
+                key={stage.level}/>)}
+        </div>);
+    }
 }
 
 function getLevelName(levelNumber) {

js/components/Stage.js

@@ -3,7 +3,7 @@ import {Match} from './Match';
 import React from 'react';
 
 export function Stage(props) {
-    const {isSignedIn, isOwner} = props;
+    const {isSignedIn, isOwner, updateNextStage} = props;
 
     return (<div>
         <Container className='py-5'>
@@ -11,7 +11,7 @@ export function Stage(props) {
             <Row>
                 {props.matches.map((match => (
                     <Col className='minw-25' key={match.id}><Match match={match} isSignedIn={isSignedIn}
-                        isOwner={isOwner}/></Col>)))}
+                        isOwner={isOwner} onFinish={updateNextStage}/></Col>)))}
             </Row>
         </Container>
     </div>);

js/redux/tournamentApi.js

@@ -17,18 +17,24 @@ export function getGroup(groupId, successCallback, errorCallback) {
         .catch(errorCallback);
 }
 
+export function getStage(stageId, successCallback, errorCallback) {
+    getRequest(getState(), '/stages/' + stageId)
+        .then(response => {
+            successCallback(response.status, convertPlayoffStage(response.data));
+        })
+        .catch(errorCallback);
+}
+
 function convertTournament(apiTournament) {
     let groupStage = null;
     const playoffStages = [];
-    for (const stage of apiTournament.stages) {
+    for (const apiStage of apiTournament.stages) {
-        if (stage.groups.length > 0) {
+        if (apiStage.groups.length > 0) {
             // group stage
-            groupStage = {groups: stage.groups.map(group => convertGroup(group))};
+            groupStage = {groups: apiStage.groups.map(group => convertGroup(group))};
         } else {
             // playoff stage
-            playoffStages.push({
+            playoffStages.push(convertPlayoffStage(apiStage));
-                id: stage.id, level: stage.level, matches: stage.matches.map(match => convertMatch(match, false))
-            });
         }
     }
     return {
@@ -43,6 +49,12 @@ function convertTournament(apiTournament) {
     };
 }
 
+function convertPlayoffStage(apiStage) {
+    return {
+        id: apiStage.id, level: apiStage.level, matches: apiStage.matches.map(match => convertMatch(match, false))
+    };
+}
+
 function convertGroup(apiGroup) {
     return {
         id: apiGroup.id,