Use new modal for edit functionality

src/browser/components/NewTeamModal.jsx

@@ -13,6 +13,15 @@ class NewTeamModal extends React.Component {
     };
   }
 
+  componentWillMount() {
+    this.state = {
+      teamName: this.props.team ? this.props.team.name : '',
+      teamUrl: this.props.team ? this.props.team.url : '',
+      teamIndex: this.props.team ? this.props.team.index : false,
+      saveStarted: false
+    };
+  }
+
   getTeamNameValidationError() {
     if (!this.state.saveStarted) {
       return null;
@@ -69,7 +78,8 @@ class NewTeamModal extends React.Component {
       if (this.validateForm()) {
         this.props.onSave({
           url: this.state.teamUrl,
-          name: this.state.teamName
+          name: this.state.teamName,
+          index: this.state.teamIndex
         });
       }
     });
@@ -159,7 +169,8 @@ class NewTeamModal extends React.Component {
 
 NewTeamModal.propTypes = {
   onClose: React.PropTypes.func,
-  onSave: React.PropTypes.func
+  onSave: React.PropTypes.func,
+  team: React.PropTypes.object
 };
 
 module.exports = NewTeamModal;

src/browser/components/TeamList.jsx

@@ -14,7 +14,7 @@ const TeamList = React.createClass({
 
   getInitialState() {
     return {
-      showTeamListItemNew: false,
+      showEditTeamForm: false,
       indexToRemoveServer: -1,
       team: {
         url: '',
@@ -41,7 +41,7 @@ const TeamList = React.createClass({
     }
 
     this.setState({
-      showTeamListItemNew: false,
+      showEditTeamForm: false,
       team: {
         url: '',
         name: '',
@@ -53,7 +53,7 @@ const TeamList = React.createClass({
   },
   handleTeamEditing(teamName, teamUrl, teamIndex) {
     this.setState({
-      showTeamListItemNew: true,
+      showEditTeamForm: true,
       team: {
         url: teamUrl,
         name: teamName,
@@ -94,19 +94,40 @@ const TeamList = React.createClass({
     });
 
     var addTeamForm;
-    if (this.props.showAddTeamForm || this.state.showTeamListItemNew) {
+    if (this.props.showAddTeamForm || this.state.showEditTeamForm) {
       addTeamForm = (
         <NewTeamModal
-          onClose={this.props.toggleAddTeamForm}
+          onClose={() => {
-          onSave={(newTeam) => {
             this.setState({
-              showNewTeamModal: false
+              showNewTeamModal: false,
+              showEditTeamForm: false,
+              team: {
+                name: '',
+                url: '',
+                index: false
+              }
+            });
+          }}
+          onSave={(newTeam) => {
+            if (this.props.showAddTeamForm) {
+              this.props.teams.push(newTeam);
+            } else {
+              this.props.teams[newTeam.index] = newTeam;
+            }
+            this.setState({
+              showNewTeamModal: false,
+              showEditTeamForm: false,
+              team: {
+                name: '',
+                url: '',
+                index: false
+              }
             });
-            this.props.teams.push(newTeam);
             this.render();
 
             this.props.onTeamsChange(this.props.teams);
           }}
+          team={this.state.team}
         />);
     } else {
       addTeamForm = '';