Implement editing of team names

js/api.js

@@ -80,8 +80,11 @@ export function deleteRequest(state, url) {
     });
 }
 
-// PATCH /teams/{ id }
-// { 'name' : ... }
+export function patchRequest(state, url, data) {
+    return axios.patch(api_url + url, data, {
+        headers : generateHeaders(state)
+    });
+}
 
 function generateHeaders(state) {
     if(state.userinfo.isSignedIn) {
@@ -260,7 +263,6 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
             storeOptionalToken(resp);
             action.parameters.successCallback();
         }).catch((error) => {
-            console.log(error);
             action.parameters.errorCallback();
         });
         return Object.assign({}, state, {});
@@ -275,7 +277,17 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
             teams : action.parameters.teams
         });
     case actiontypes_tournamentinfo.MODIFY_TOURNAMENT:
-
+        patchRequest(action.state, '/teams/' + action.parameters.teamid, {
+            name: action.parameters.name
+        }).then((resp) => {
+            storeOptionalToken(resp);
+            action.parameters.onSuccess();
+        }).catch((error) => {
+            if(error.response) {
+                storeOptionalToken(error.response);
+            }
+            action.parameters.onError();
+        });
         return Object.assign({}, state, {});
     case actiontypes_tournamentinfo.MODIFY_TOURNAMENT_SUCCESS:
 
@@ -371,6 +383,19 @@ export function requestTournament(code, successCallback, errorCallback) {
     });
 }
 
+export function updateTeamName(team, successCB, errorCB) {
+    __store.dispatch({
+        type: actiontypes_tournamentinfo.MODIFY_TOURNAMENT,
+        parameters: {
+            teamid: team.id,
+            name: team.name,
+            onSuccess : successCB,
+            onError : errorCB
+        },
+        state: __store.getState()
+    });
+}
+
 function rehydrateApplicationState() {
     const persistedState = localStorage.getItem('reduxState') ?
         JSON.parse(localStorage.getItem('reduxState')) :

package.json

@@ -20,6 +20,7 @@
     "next": "^7.0.2",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
+    "react-notify-toast": "^0.5.0",
     "react-redux": "^5.1.1",
     "reactstrap": "^6.5.0",
     "redux": "^4.0.1",

pages/tournament-edit.js

@@ -1,6 +1,8 @@
 import Head from 'next/head';
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { connect } from 'react-redux';
+import { notify } from 'react-notify-toast';
 
 import { requestTournament } from '../js/api';
 import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
@@ -15,7 +17,9 @@ import {
     Table
 } from 'reactstrap';
 
-import { connect } from 'react-redux';
+import {
+    updateTeamName
+} from '../js/api';
 
 import '../static/everypage.css';
 import '../static/css/index.css';
@@ -237,8 +241,8 @@ class EditTeamNamesForm extends React.Component {
                         {
                             teams.map((team, index) => 
                                 <tr key={index}>
-                                    <td><Button outline size="sm" className="changeTeamnameButton">Ändern</Button></td>
-                                    <td className="w-100">{ team.name }</td>
+                                    <td><Button outline size="sm" className="changeTeamnameButton" onClick={ this.handleClick.bind(this, index) }>Ändern</Button></td>
+                                    <td className="w-100"><input className="form-control" type="text" id="name" value={ team.name } placeholder={ team.name } onChange={ this.handleNameInput.bind(this, index) } /></td>
                                 </tr>
                             )
                         }
@@ -256,8 +260,22 @@ class EditTeamNamesForm extends React.Component {
         });
     }
 
-    handleClick(input, index) {
-        // TODO: Apply changes to the tournament properties
+    handleNameInput(index, input) {
+        var team = this.state.teams.slice();
+
+        team[index].name = input.target.value;
+
+        this.setState({
+            teams : team
+        });
+    }
+
+    handleClick(index, input) {
+        updateTeamName(this.state.teams[index], () => {
+            notify.show('Team Name wurde erfolgreich geändert.', 'success', 5000);
+        }, () => {
+            notify.show('Team Name konnte nicht geändert werden.', 'warning', 5000);
+        });
     }
 }
 

yarn.lock

@@ -5635,7 +5635,7 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -6388,6 +6388,14 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-notify-toast@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/react-notify-toast/-/react-notify-toast-0.5.0.tgz#b00cf50a3cc97a1d222ecd7d7a8e7f14bef5fa67"
+  integrity sha1-sAz1CjzJeh0iLs19eo5/FL71+mc=
+  dependencies:
+    object-assign "^4.0.0"
+    prop-types "^15.5.8"
+
 react-popper@^0.10.4:
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"