add planet create modal & switching func

browser/main/Containers/PlanetContainer.jsx

@@ -63,11 +63,14 @@ module.exports = React.createClass({
     this.unsubscribe = PlanetStore.listen(this.onFetched)
 
     PlanetActions.fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
-    document.addEventListener('keydown', this.handleKeyDown)
   },
   componentWillUnmount: function () {
     this.unsubscribe()
-    document.removeEventListener('keydown', this.handleKeyDown)
+  },
+  componentDidUpdate: function () {
+    if (this.state.currentPlanet.planetName !== this.props.params.planetName) {
+      PlanetActions.fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
+    }
   },
   getFilteredIndexOfCurrentArticle: function () {
     var params = this.props.params
@@ -164,7 +167,19 @@ module.exports = React.createClass({
         if (this.refs.detail.props.article == null) {
           var params = this.props.params
           delete params.localId
-          this.transitionTo('planetHome', params)
+
+          var articles = this.refs.list.props.articles
+          if (articles.length > 0) {
+            console.log('need to redirect', this.refs.list.props.articles)
+            var article = articles[0]
+            params.localId = article.localId
+
+            if (article.type === 'snippet') {
+              this.transitionTo('snippets', params)
+            } else {
+              this.transitionTo('blueprints', params)
+            }
+          }
         }
       })
       return
@@ -234,18 +249,31 @@ module.exports = React.createClass({
   submitDeleteModal: function () {
     this.setState({isDeleteModalOpen: false})
   },
+  focus: function () {
+    React.findDOMNode(this).focus()
+    console.log('focus this')
+  },
   handleKeyDown: function (e) {
     // Bypath for modal open state
     if (this.state.isLaunchModalOpen) {
-      if (e.keyCode === 27) this.closeLaunchModal()
+      if (e.keyCode === 27) {
+        this.closeLaunchModal()
+        this.focus()
+      }
       return
     }
     if (this.state.isEditModalOpen) {
-      if (e.keyCode === 27) this.closeEditModal()
+      if (e.keyCode === 27) {
+        this.closeEditModal()
+        this.focus()
+      }
       return
     }
     if (this.state.isDeleteModalOpen) {
-      if (e.keyCode === 27) this.closeDeleteModal()
+      if (e.keyCode === 27) {
+        this.closeDeleteModal()
+        this.focus()
+      }
       return
     }
 
@@ -259,17 +287,18 @@ module.exports = React.createClass({
     var searchInput = React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input')
 
     if (document.activeElement === searchInput) {
+      console.log('fff', e.keyCode)
       switch (e.keyCode) {
         case 38:
-          searchInput.blur()
+          this.focus()
           break
         case 40:
           e.preventDefault()
-          searchInput.blur()
+          this.focus()
           break
         case 27:
           e.preventDefault()
-          searchInput.blur()
+          this.focus()
           break
       }
       return
@@ -349,7 +378,7 @@ module.exports = React.createClass({
     )) : null
 
     return (
-      <div className='PlanetContainer'>
+      <div tabIndex='1' onKeyDown={this.handleKeyDown} className='PlanetContainer'>
         <ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
           <LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
         </ModalBase>

browser/main/Containers/UserContainer.jsx

@@ -1,54 +1,12 @@
+/* global localStorage */
 var React = require('react/addons')
 var ReactRouter = require('react-router')
-var Link = ReactRouter.Link
 var RouteHandler = ReactRouter.RouteHandler
 
+var UserNavigator = require('../Components/UserNavigator')
+
 var AuthStore = require('../Stores/AuthStore')
-
-var UserNavigator = React.createClass({
-  mixins: [ReactRouter.Navigation],
-  propTypes: {
-    currentPlanet: React.PropTypes.object,
-    currentUser: React.PropTypes.object
-  },
-  componentDidMount: function () {
-    this.unsubscribe = AuthStore.listen(this.onLogout)
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
-  onLogout: function () {
-    this.transitionTo('login')
-  },
-  render: function () {
-    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>
-          <div className='shortCut'>⌘{index + 1}</div>
-        </li>
-      )
-    }.bind(this))
-    if (this.props.currentUser == null) {
-      return (
-        <div className='UserNavigator'>
-        </div>
-      )
-    }
-
-    return (
-      <div className='UserNavigator'>
-        <Link to='userHome' params={{userName: this.props.currentUser.name}} className='userConfig'>
-          <img width='50' height='50' src='../vendor/dummy.jpg'/>
-        </Link>
-        <ul>
-          {planets}
-        </ul>
-        <button className='newPlanet'><i className='fa fa-plus'/></button>
-      </div>
-    )
-  }
-})
+var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
   mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
@@ -57,9 +15,29 @@ module.exports = React.createClass({
       planetName: React.PropTypes.string
     })
   },
+  getInitialState: function () {
+    return {
+      currentUser: AuthStore.getUser()
+    }
+  },
+  componentDidMount: function () {
+    this.unsubscribe = PlanetStore.listen(this.onListen)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onListen: function (res) {
+    if (res.status === 'planetCreated') {
+      var currentUser = this.state.currentUser
+      currentUser.Planets.push(res.data)
+
+      localStorage.setItem('user', JSON.stringify(currentUser))
+      this.setState({currentUser: currentUser})
+    }
+  },
   render: function () {
     var currentPlanetName = this.props.params.planetName
-    var currentUser = AuthStore.getUser()
+    var currentUser = this.state.currentUser
 
     // user must be logged in
     if (currentUser == null) return (<div></div>)