Update group after a match score changes

js/components/GroupStage.js

@@ -1,6 +1,8 @@
 import {Button, Card, CardBody, Col, Collapse, Row, Table} from 'reactstrap';
 import {Match} from './Match';
 import React, {Component} from 'react';
+import {getGroup} from '../redux/tournamentApi';
+import {notify} from 'react-notify-toast';
 
 export default class GroupStage extends Component {
     constructor(props) {
@@ -33,20 +35,43 @@ function ShowMatchesToggleButton(props) {
     </Button>);
 }
 
-function Group(props) {
+class Group extends Component {
+    constructor(props) {
+        super(props);
+        this.state = props.group;
+        this.reload = this.reload.bind(this);
+        this.onReloadSuccess = this.onReloadSuccess.bind(this);
+        this.onReloadError = this.onReloadError.bind(this);
+    }
+
+    reload() {
+        getGroup(this.state.id, this.onReloadSuccess, this.onReloadError);
+    }
+
+    onReloadSuccess(status, updatedGroup) {
+        this.setState(updatedGroup);
+    }
+
+    onReloadError() {
+        notify.show('Die Gruppe konnte nicht aktualisiert werden.', 'warning', 2000);
+    }
+
+    render() {
         return (<Col className='minw-25'>
             <Card>
                 <CardBody>
-                <h3 className='custom-font'>Gruppe {props.group.id + 1}</h3>
+                    <h3 className='custom-font'>Gruppe {this.state.id + 1}</h3>
-                <Collapse isOpen={props.showMatches}>
+                    <Collapse isOpen={this.props.showMatches}>
-                    {props.group.matches.map((match => (
+                        {this.state.matches.map((match => (
-                        <Match match={match} isSignedIn={props.isSignedIn} isOwner={props.isOwner} key={match.id}/>)))}
+                            <Match match={match} isSignedIn={this.props.isSignedIn} isOwner={this.props.isOwner}
+                                onChange={this.reload} key={match.id}/>)))}
                     </Collapse>
-                <GroupScoresTable scores={props.group.scores}/>
+                    <GroupScoresTable scores={this.state.scores}/>
                 </CardBody>
             </Card>
         </Col>);
     }
+}
 
 function GroupScoresTable(props) {
     return (<Table className='mt-4' striped size='sm' responsive>

js/components/Match.js

@@ -70,6 +70,7 @@ export class Match extends React.Component {
         updatedMatch.team1.score = scoreTeam1;
         updatedMatch.team2.score = scoreTeam2;
         this.setState({match: updatedMatch});
+        this.props.onChange !== undefined && this.props.onChange();
     }
 
     getMatchFinishedMessage() {

js/redux/tournamentApi.js

@@ -9,6 +9,14 @@ export function getTournament(code, successCallback, errorCallback) {
         .catch(errorCallback);
 }
 
+export function getGroup(groupId, successCallback, errorCallback) {
+    getRequest(getState(), '/groups/' + groupId)
+        .then(response => {
+            successCallback(response.status, convertGroup(response.data));
+        })
+        .catch(errorCallback);
+}
+
 function convertTournament(apiTournament) {
     let groupStage = null;
     const playoffStages = [];