Implement starting a match, make backend calls

js/api.js

@@ -221,6 +221,19 @@ const reducerTournamentinfo = (state = defaultStateTournamentinfo, action) => {
         return Object.assign({}, state, {});
     case actionTypesTournamentinfo.REHYDRATE:
 
+        return Object.assign({}, state, {});
+    case actionTypesTournamentinfo.START_MATCH:
+        patchRequest(action.state, '/matches/' + action.parameters.matchId, {
+            state: 'in_progress'
+        }).then(resp => {
+            storeOptionalToken(resp);
+            action.parameters.successCallback();
+        }).catch(error => {
+            if (error.response) {
+                storeOptionalToken(error.response);
+            }
+            action.parameters.errorCallback();
+        });
         return Object.assign({}, state, {});
     case actionTypesTournamentinfo.CLEAR:
 
@@ -364,6 +377,18 @@ export function updateTeamName(team, successCB, errorCB) {
     });
 }
 
+export function startMatch(matchId, successCallback, errorCallback) {
+    __store.dispatch({
+        type: actionTypesTournamentinfo.START_MATCH,
+        parameters: {
+            matchId: matchId,
+            successCallback: successCallback,
+            errorCallback: errorCallback
+        },
+        state: __store.getState()
+    });
+}
+
 export function getState() {
     return __store.getState();
 }

js/components/Match.js

@@ -12,15 +12,21 @@ import {
     Table
 } from 'reactstrap';
 import React from 'react';
+import {startMatch} from '../api';
+import {notify} from 'react-notify-toast';
 
 
 export class Match extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            modal: false
+            modal: false,
+            matchState: this.props.match.state
         };
         this.toggleModal = this.toggleModal.bind(this);
+        this.startMatch = this.startMatch.bind(this);
+        this.onStartMatchSuccess = this.onStartMatchSuccess.bind(this);
+        this.onStartMatchError = this.onStartMatchError.bind(this);
     }
 
     toggleModal() {
@@ -31,12 +37,26 @@ export class Match extends React.Component {
         }
     }
 
+    startMatch() {
+        startMatch(this.props.match.id, this.onStartMatchSuccess, this.onStartMatchError);
+    }
+
+    onStartMatchSuccess() {
+        this.setState({matchState: 'in_progress'});
+        this.toggleModal();
+    }
+
+    onStartMatchError() {
+        this.toggleModal();
+        notify.show('Das Match konnte nicht gestartet werden.', 'error', 3000);
+    }
+
     render() {
         let cardClass;
         let smallMessage;
         let borderClass;
         // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
-        switch (this.props.match.state) {
+        switch (this.state.matchState) {
         case 'in_progress':
             cardClass = 'table-warning';
             borderClass = 'border-warning';
@@ -76,7 +96,8 @@ export class Match extends React.Component {
                 </CardBody>
             </Card>
             <small className='text-muted'>{smallMessage}</small>
-            <MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.props.match}/>
+            <MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.props.match}
+                startMatch={this.startMatch}/>
         </div>);
     }
 }
@@ -104,7 +125,7 @@ function MatchModal(props) {
         break;
     case 'not_started':
         title = 'Spiel kann gestartet werden';
-        actionButton = <Button color='primary' onClick={props.toggle}>Spiel starten</Button>;
+        actionButton = <Button color='primary' onClick={props.startMatch}>Spiel starten</Button>;
         break;
     case 'undecided':
         title = 'Spiel beendet';

js/redux/tournamentInfo.js

@@ -8,6 +8,8 @@ export const actionTypesTournamentinfo = {
     'MODIFY_TOURNAMENT_SUCCESS': 'MODIFY_TOURNAMENT_SUCCESS',
     'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
 
+    'START_MATCH': 'START_MATCH',
+
     'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
     'CLEAR': 'TOURNAMENTINFO_CLEAR'
 };