fix search bug

browser/main/Components/PlanetCreateModal.jsx

@@ -0,0 +1,32 @@
+var React = require('react/addons')
+var Catalyst = require('../Mixins/Catalyst')
+
+var PlanetStore = require('../Stores/PlanetStore')
+
+module.exports = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      planetName: ''
+    }
+  },
+  handleSubmit: function () {
+    console.log(this.state.planetName)
+  },
+  stopPropagation: function (e) {
+    e.stopPropagation()
+  },
+  render: function () {
+    return (
+      <div onClick={this.stopPropagation} className='PlanetCreateModal modal'>
+        <input valueLink={this.linkState('planetName')} className='stripInput'/>
+        <button onClick={this.handleSubmit} className='submitButton'>
+          <i className='fa fa-check'/>
+        </button>
+      </div>
+    )
+  }
+})

browser/main/Components/PlanetHeader.jsx

@@ -4,7 +4,8 @@ var PlanetHeader = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.object,
     currentUser: React.PropTypes.object,
-    onSearchChange: React.PropTypes.func
+    onSearchChange: React.PropTypes.func,
+    search: React.PropTypes.string
   },
   getInitialState: function () {
     return {
@@ -17,10 +18,6 @@ var PlanetHeader = React.createClass({
   interceptClick: function (e) {
     e.stopPropagation()
   },
-  handleChange: function (e) {
-    this.setState({search: e.target.value})
-    this.props.onSearchChange(e.target.value)
-  },
   handleKeyDown: function (e) {
     if (e.keyCode === 27) {
       React.findDOMNode(this.refs.search).blur()
@@ -33,8 +30,8 @@ var PlanetHeader = React.createClass({
     return (
       <div onClick={this.interceptClick} className='PlanetHeader'>
         <div className='headerLabel'>
-          <span className='planetName'>{currentPlanetName}</span>
           <span className='userName'>{currentUserName}</span><br/>
+          <span className='planetName'>{currentPlanetName}</span>
           <button className={'menuBtn'}>
             <i className='fa fa-gears'></i>
           </button>
@@ -42,7 +39,7 @@ var PlanetHeader = React.createClass({
         <div className='headerControl'>
           <span className='searchInput'>
             <i className='fa fa-search'/>
-            <input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='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...'/>
           </span>
           <a className='downloadButtton btn-primary'>Download Mac app</a>
         </div>

browser/main/Components/UserNavigator.jsx

@@ -0,0 +1,67 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+var ModalBase = require('./ModalBase')
+var PlanetCreateModal = require('./PlanetCreateModal')
+
+var AuthStore = require('../Stores/AuthStore')
+
+module.exports = React.createClass({
+  mixins: [ReactRouter.Navigation],
+  propTypes: {
+    currentPlanet: React.PropTypes.object,
+    currentUser: React.PropTypes.object
+  },
+  getInitialState: function () {
+    return {
+      isPlanetCreateModalOpen: false
+    }
+  },
+  componentDidMount: function () {
+    this.unsubscribe = AuthStore.listen(this.onLogout)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onLogout: function () {
+    this.transitionTo('login')
+  },
+  openPlanetCreateModal: function () {
+    this.setState({isPlanetCreateModalOpen: true})
+  },
+  closePlanetCreateModal: function () {
+    this.setState({isPlanetCreateModalOpen: false})
+  },
+  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 tabIndex='2' 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 onClick={this.openPlanetCreateModal} className='newPlanet'><i className='fa fa-plus'/></button>
+        <ModalBase isOpen={this.state.isPlanetCreateModalOpen} close={this.closePlanetCreateModal}>
+          <PlanetCreateModal close={this.closePlanetCreateModal}/>
+        </ModalBase>
+      </div>
+    )
+  }
+})