add name change for planet & fix minor bugs

browser/main/Actions/PlanetActions.js

@@ -4,6 +4,7 @@ module.exports = Reflux.createActions([
   'createPlanet',
   'fetchPlanet',
 
+  'changeName',
   'addUser',
 
   'createSnippet',

browser/main/Components/BlueprintDeleteModal.jsx

@@ -1,5 +1,5 @@
 var React = require('react')
-var PlanetStore = require('../Stores/PlanetStore')
+
 var PlanetActions = require('../Actions/PlanetActions')
 
 var BlueprintDeleteModal = React.createClass({
@@ -7,20 +7,6 @@ var BlueprintDeleteModal = React.createClass({
     close: React.PropTypes.func,
     blueprint: React.PropTypes.object
   },
-  componentDidMount: function () {
-    this.unsubscribe = PlanetStore.listen(this.onListen)
-    React.findDOMNode(this.refs.submit).focus()
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
-  onListen: function (res) {
-    switch (res.status) {
-      case 'articleDeleted':
-        this.props.close()
-        break
-    }
-  },
   stopPropagation: function (e) {
     e.stopPropagation()
   },

browser/main/Components/BlueprintEditModal.jsx

@@ -1,25 +1,12 @@
 var React = require('react')
+
 var BlueprintForm = require('./BlueprintForm')
-var PlanetStore = require('../Stores/PlanetStore')
 
 var BlueprintEditModal = React.createClass({
   propTypes: {
     close: React.PropTypes.func,
     blueprint: React.PropTypes.object
   },
-  componentDidMount: function () {
-    this.unsubscribe = PlanetStore.listen(this.onListen)
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
-  onListen: function (res) {
-    switch (res.status) {
-      case 'articleUpdated':
-        this.props.close()
-        break
-    }
-  },
   stopPropagation: function (e) {
     e.stopPropagation()
   },

browser/main/Components/LaunchModal.jsx

@@ -1,7 +1,6 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
 var Catalyst = require('../Mixins/Catalyst')
-var PlanetStore = require('../Stores/PlanetStore')
 
 var SnippetForm = require('./SnippetForm')
 var BlueprintForm = require('./BlueprintForm')
@@ -16,19 +15,6 @@ var LaunchModal = React.createClass({
       currentTab: 'snippet'
     }
   },
-  componentDidMount: function () {
-    this.unsubscribe = PlanetStore.listen(this.onListen)
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
-  onListen: function (res) {
-    switch (res.status) {
-      case 'articleCreated':
-        this.props.close()
-        break
-    }
-  },
   stopPropagation: function (e) {
     e.stopPropagation()
   },

browser/main/Components/PlanetSettingModal.jsx

@@ -1,7 +1,10 @@
 var React = require('react/addons')
 var Select = require('react-select')
+
 var Catalyst = require('../Mixins/Catalyst')
 
+var PlanetActions = require('../Actions/PlanetActions')
+
 module.exports = React.createClass({
   mixins: [Catalyst.LinkedStateMixin],
   propTypes: {
@@ -22,6 +25,10 @@ module.exports = React.createClass({
   activeManageMember: function () {
     this.setState({currentTab: 'manageMember'})
   },
+  saveProfile: function () {
+    var currentPlanet = this.props.currentPlanet
+    PlanetActions.changeName(currentPlanet.userName, currentPlanet.name, this.state.planetName)
+  },
   doubleCheckDeletePlanet: function () {
     if (this.state.isDeletePlanetChecked) {
       console.log('delete it')
@@ -44,7 +51,7 @@ module.exports = React.createClass({
           <div className='planetProfileForm'>
             <label>Planet name </label>
             <input valueLink={this.linkState('planetName')} className='inline-input'/>
-            <button className='saveButton btn-primary'>Save</button>
+            <button onClick={this.saveProfile} className='saveButton btn-primary'>Save</button>
           </div>
 
           <div className='planetDeleteForm'>

browser/main/Components/SnippetDeleteModal.jsx

@@ -1,5 +1,5 @@
 var React = require('react')
-var PlanetStore = require('../Stores/PlanetStore')
+
 var PlanetActions = require('../Actions/PlanetActions')
 
 var SnippetDeleteModal = React.createClass({
@@ -7,20 +7,6 @@ var SnippetDeleteModal = React.createClass({
     close: React.PropTypes.func,
     snippet: React.PropTypes.object
   },
-  componentDidMount: function () {
-    this.unsubscribe = PlanetStore.listen(this.onListen)
-    React.findDOMNode(this.refs.submit).focus()
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
-  onListen: function (res) {
-    switch (res.status) {
-      case 'articleDeleted':
-        this.props.close()
-        break
-    }
-  },
   stopPropagation: function (e) {
     e.stopPropagation()
   },

browser/main/Components/SnippetEditModal.jsx

@@ -1,25 +1,11 @@
 var React = require('react')
 var SnippetForm = require('./SnippetForm')
-var PlanetStore = require('../Stores/PlanetStore')
 
 var SnippetEditModal = React.createClass({
   propTypes: {
     close: React.PropTypes.func,
     snippet: React.PropTypes.object
   },
-  componentDidMount: function () {
-    this.unsubscribe = PlanetStore.listen(this.onListen)
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
-  onListen: function (res) {
-    switch (res.status) {
-      case 'articleUpdated':
-        this.props.close()
-        break
-    }
-  },
   stopPropagation: function (e) {
     e.stopPropagation()
   },

browser/main/Components/UserNavigator.jsx

@@ -37,7 +37,7 @@ module.exports = React.createClass({
     var planets = this.props.currentUser.Planets.map(function (planet, index) {
       return (
         <li key={planet.id} className={this.props.currentPlanet != null && this.props.currentPlanet.name === planet.name ? 'active' : ''}>
-          <Link to='planet' params={{userName: this.props.currentUser.name, planetName: planet.name}} href>{planet.name[0]}</Link>
+          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}} href>{planet.name[0]}</Link>
           <div className='shortCut'>⌘{index + 1}</div>
         </li>
       )

browser/main/Containers/PlanetContainer.jsx

@@ -70,7 +70,7 @@ module.exports = React.createClass({
     this.unsubscribe()
   },
   componentDidUpdate: function () {
-    if (this.state.currentPlanet.name !== this.props.params.planetName || this.state.currentPlanet.userName !== this.props.params.userName) {
+    if (this.state.currentPlanet == null || this.state.currentPlanet.name !== this.props.params.planetName || this.state.currentPlanet.userName !== this.props.params.userName) {
       PlanetActions.fetchPlanet(this.props.params.userName, this.props.params.planetName)
       this.focus()
     }
@@ -162,6 +162,10 @@ module.exports = React.createClass({
     }
   },
   onFetched: function (res) {
+    if (res == null) {
+      return
+    }
+
     var articles = this.state.currentPlanet == null ? null : this.state.currentPlanet.Articles
 
     if (res.status === 'planetFetched') {
@@ -195,8 +199,16 @@ module.exports = React.createClass({
       }
       this.state.currentPlanet.Users.push(user)
       this.setState({currentPlanet: this.state.currentPlanet}, function () {
-        this.closeAddUserModal()
+        if (this.state.isAddUserModalOpen) {this.closeAddUserModal()}
       })
+      return
+    }
+
+    if (res.status === 'nameChanged') {
+      var params = Object.assign({}, this.props.params)
+      params.planetName = res.data.name
+      this.transitionTo('planet', params)
+      return
     }
 
     var article = res.data
@@ -209,6 +221,7 @@ module.exports = React.createClass({
           articles.unshift(article)
 
           this.setState({planet: this.state.currentPlanet, search: ''}, function () {
+            this.closeLaunchModal()
             this.selectArticleByIndex(0)
           })
           break
@@ -216,7 +229,9 @@ module.exports = React.createClass({
           articles.splice(index, 1)
           articles.unshift(article)
 
-          this.setState({planet: this.state.currentPlanet})
+          this.setState({planet: this.state.currentPlanet}, function () {
+            this.closeEditModal()
+          })
           break
         case 'articleDeleted':
           articles.splice(index, 1)
@@ -241,20 +256,26 @@ module.exports = React.createClass({
     this.setState({isLaunchModalOpen: true})
   },
   closeLaunchModal: function () {
-    this.setState({isLaunchModalOpen: false})
+    this.setState({isLaunchModalOpen: false}, function () {
+      this.focus()
+    })
   },
   openAddUserModal: function () {
     this.setState({isAddUserModalOpen: true})
   },
   closeAddUserModal: function () {
-    this.setState({isAddUserModalOpen: false})
+    this.setState({isAddUserModalOpen: false}, function () {
+      this.focus()
+    })
   },
   openEditModal: function () {
     if (this.refs.detail.props.article == null) {return}
     this.setState({isEditModalOpen: true})
   },
   closeEditModal: function () {
-    this.setState({isEditModalOpen: false})
+    this.setState({isEditModalOpen: false}, function () {
+      this.focus()
+    })
   },
   submitEditModal: function () {
     this.setState({isEditModalOpen: false})
@@ -264,7 +285,9 @@ module.exports = React.createClass({
     this.setState({isDeleteModalOpen: true})
   },
   closeDeleteModal: function () {
-    this.setState({isDeleteModalOpen: false})
+    this.setState({isDeleteModalOpen: false}, function () {
+      this.focus()
+    })
   },
   submitDeleteModal: function () {
     this.setState({isDeleteModalOpen: false})
@@ -273,7 +296,9 @@ module.exports = React.createClass({
     this.setState({isSettingModalOpen: true})
   },
   closeSettingModal: function () {
-    this.setState({isSettingModalOpen: false})
+    this.setState({isSettingModalOpen: false}, function () {
+      this.focus()
+    })
   },
   focus: function () {
     React.findDOMNode(this).focus()
@@ -283,28 +308,30 @@ module.exports = React.createClass({
     if (this.state.isLaunchModalOpen) {
       if (e.keyCode === 27) {
         this.closeLaunchModal()
-        this.focus()
       }
       return
     }
     if (this.state.isEditModalOpen) {
       if (e.keyCode === 27) {
         this.closeEditModal()
-        this.focus()
       }
       return
     }
     if (this.state.isDeleteModalOpen) {
       if (e.keyCode === 27) {
         this.closeDeleteModal()
-        this.focus()
       }
       return
     }
     if (this.state.isAddUserModalOpen) {
       if (e.keyCode === 27) {
         this.closeAddUserModal()
-        this.focus()
+      }
+      return
+    }
+    if (this.state.isSettingModalOpen) {
+      if (e.keyCode === 27) {
+        this.closeSettingModal()
       }
       return
     }

browser/main/Containers/UserContainer.jsx

@@ -27,6 +27,8 @@ module.exports = React.createClass({
     this.unsubscribe()
   },
   onListen: function (res) {
+    if (res.status == null) return
+
     if (res.status === 'planetCreated') {
       var currentUser = this.state.currentUser
       currentUser.Planets.push(res.data)
@@ -34,6 +36,10 @@ module.exports = React.createClass({
       localStorage.setItem('user', JSON.stringify(currentUser))
       this.setState({currentUser: currentUser})
     }
+
+    if (res.status === 'nameChanged') {
+      this.setState({currentUser: AuthStore.getUser()})
+    }
   },
   render: function () {
     var currentPlanetName = this.props.params.planetName

browser/main/Stores/PlanetStore.js

@@ -10,6 +10,7 @@ var PlanetStore = Reflux.createStore({
   init: function () {
     this.listenTo(PlanetActions.createPlanet, this.createPlanet)
     this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet)
+    this.listenTo(PlanetActions.changeName, this.changeName)
     this.listenTo(PlanetActions.addUser, this.addUser)
     this.listenTo(PlanetActions.createSnippet, this.createSnippet)
     this.listenTo(PlanetActions.updateSnippet, this.updateSnippet)
@@ -79,6 +80,38 @@ var PlanetStore = Reflux.createStore({
         })
       }.bind(this))
   },
+  changeName: function (userName, planetName, name) {
+    request
+      .put(apiUrl + userName + '/' + planetName)
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
+      .send({name: name})
+      .end(function (err, res) {
+        if (err) {
+          console.error(err)
+          this.trigger(null)
+          return
+        }
+
+        var planet = res.body
+
+        var user = JSON.parse(localStorage.getItem('user'))
+        user.Planets.some(function (_planet, index) {
+          if (planet.id === _planet.id) {
+            user.Planets[index].name = planet.name
+            return true
+          }
+          return false
+        })
+        localStorage.setItem('user', JSON.stringify(user))
+
+        this.trigger({
+          status: 'nameChanged',
+          data: planet
+        })
+      }.bind(this))
+  },
   addUser: function (planetName, userName) {
     request
       .post(apiUrl + planetName + '/users')