adding User to planet is available

browser/main/Components/PlanetAddUserModal.jsx

@@ -0,0 +1,75 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Select = require('react-select')
+var request = require('superagent')
+
+var Catalyst = require('../Mixins/Catalyst')
+
+var PlanetActions = require('../Actions/PlanetActions')
+
+var getOptions = function (input, callback) {
+  request
+    .get('http://localhost:8000/users/search')
+    .query({name: input})
+    .send()
+    .end(function (err, res) {
+      if (err) {
+        callback(err)
+        return
+      }
+      callback(null, {
+          options: res.body.map(function (user) {
+            return {
+              label: user.name,
+              value: user.name
+            }
+          }),
+          complete: false
+      })
+    })
+}
+
+module.exports = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      userName: ''
+    }
+  },
+  componentDidMount: function () {
+    window.ns = React.findDOMNode(this).querySelector('.Select')
+  },
+  handleSubmit: function () {
+    var userName = this.state.userName
+    var params = this.getParams()
+    var ownerName = params.userName
+    var planetName = params.planetName
+
+    PlanetActions.addUser(ownerName + '/' + planetName, userName)
+  },
+  handleChange: function (value) {
+    this.setState({userName: value})
+  },
+  stopPropagation: function (e) {
+    e.stopPropagation()
+  },
+  render: function () {
+    return (
+      <div onClick={this.stopPropagation} className='PlanetAddUserModal modal'>
+        <Select
+          name='userName'
+          value={this.state.userName}
+          placeholder='Username'
+          asyncOptions={getOptions}
+          onChange={this.handleChange}
+          className='userNameSelect'
+        />
+
+        <button onClick={this.handleSubmit} className='submitButton'><i className='fa fa-check'/></button>
+      </div>
+    )
+  }
+})

browser/main/Components/PlanetNavigator.jsx

@@ -3,12 +3,14 @@ var React = require('react/addons')
 var PlanetNavigator = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.shape({
-      name: React.PropTypes.string
+      name: React.PropTypes.string,
+      Users: React.PropTypes.array
     }),
     currentUser: React.PropTypes.shape({
       name: React.PropTypes.string
     }),
-    onOpenLaunchModal: React.PropTypes.func
+    openLaunchModal: React.PropTypes.func,
+    openAddUserModal: React.PropTypes.func
   },
   getInitialState: function () {
     return {
@@ -20,9 +22,15 @@ var PlanetNavigator = React.createClass({
     this.setState({isLaunchModalOpen: false})
   },
   render: function () {
+    var users = this.props.currentPlanet.Users.map(function (user) {
+      return (
+        <li key={'user-' + user.id}><img width='44' height='44' src='../vendor/dummy.jpg'/></li>
+      )
+    })
+
     return (
       <div className='PlanetNavigator'>
-        <button onClick={this.props.onOpenLaunchModal} className='launchButton btn-primary btn-block'>
+        <button onClick={this.props.openLaunchModal} className='launchButton btn-primary btn-block'>
           <i className='fa fa-rocket fa-fw'/> Launch
         </button>
         <nav>
@@ -36,6 +44,11 @@ var PlanetNavigator = React.createClass({
             <i className='fa fa-file-text-o fa-fw'/> Blueprints
           </a>
         </nav>
+        <div className='usersLabel'>Users</div>
+        <ul className='users'>
+          {users}
+          <li onClick={this.props.openAddUserModal} className='btn-default'><i className='fa fa-plus'/></li>
+        </ul>
       </div>
     )
   }