add planet create modal & switching func

browser/main/Components/PlanetCreateModal.jsx

@@ -1,6 +1,8 @@
 var React = require('react/addons')
 var Catalyst = require('../Mixins/Catalyst')
 
+var PlanetActions = require('../Actions/PlanetActions')
+
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
@@ -13,16 +15,39 @@ module.exports = React.createClass({
       planetName: ''
     }
   },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.name).focus()
+    this.unsubscribe = PlanetStore.listen(this.onListen)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onListen: function (res) {
+    if (res.status === 'planetCreated') {
+      this.props.close()
+    }
+  },
   handleSubmit: function () {
-    console.log(this.state.planetName)
+    PlanetActions.createPlanet({
+      name: this.state.planetName
+    })
+  },
+  handleKeyDown: function (e) {
+    if (e.keyCode === 13 && e.metaKey) {
+      this.handleSubmit()
+      return
+    }
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
   },
   stopPropagation: function (e) {
     e.stopPropagation()
   },
   render: function () {
     return (
-      <div onClick={this.stopPropagation} className='PlanetCreateModal modal'>
-        <input valueLink={this.linkState('planetName')} className='stripInput'/>
+      <div tabIndex='3' onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='PlanetCreateModal modal'>
+        <input ref='name' valueLink={this.linkState('planetName')} className='nameInput stripInput' placeholder='Crate new Planet'/>
         <button onClick={this.handleSubmit} className='submitButton'>
           <i className='fa fa-check'/>
         </button>

browser/main/Components/PlanetHeader.jsx

@@ -18,11 +18,6 @@ var PlanetHeader = React.createClass({
   interceptClick: function (e) {
     e.stopPropagation()
   },
-  handleKeyDown: function (e) {
-    if (e.keyCode === 27) {
-      React.findDOMNode(this.refs.search).blur()
-    }
-  },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
     var currentUserName = this.props.currentUser.name
@@ -39,7 +34,7 @@ var PlanetHeader = React.createClass({
         <div className='headerControl'>
           <span className='searchInput'>
             <i className='fa fa-search'/>
-            <input onKeyDown={this.handleKeyDown} onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
+            <input onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
           </span>
           <a className='downloadButtton btn-primary'>Download Mac app</a>
         </div>