adding User to planet is available

browser/main/Actions/PlanetActions.js

@@ -4,6 +4,8 @@ module.exports = Reflux.createActions([
   'createPlanet',
   'fetchPlanet',
 
+  'addUser',
+
   'createSnippet',
   'updateSnippet',
   'deleteSnippet',

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>
     )
   }

browser/main/Containers/PlanetContainer.jsx

@@ -11,6 +11,7 @@ var SnippetEditModal = require('../Components/SnippetEditModal')
 var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
 var BlueprintEditModal = require('../Components/BlueprintEditModal')
 var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
+var PlanetAddUserModal = require('../Components/PlanetAddUserModal')
 
 var PlanetActions = require('../Actions/PlanetActions')
 
@@ -70,6 +71,7 @@ module.exports = React.createClass({
   componentDidUpdate: function () {
     if (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()
     }
   },
   getFilteredIndexOfCurrentArticle: function () {
@@ -185,6 +187,17 @@ module.exports = React.createClass({
       return
     }
 
+    if (res.status === 'userAdded') {
+      var user = res.data
+      if (user == null) {
+        return null
+      }
+      this.state.currentPlanet.Users.push(user)
+      this.setState({currentPlanet: this.state.currentPlanet}, function () {
+        this.closeAddUserModal()
+      })
+    }
+
     var article = res.data
     var filteredIndex = this.getFilteredIndexOfCurrentArticle()
     var index = this.getIndexOfCurrentArticle()
@@ -229,6 +242,15 @@ module.exports = React.createClass({
   closeLaunchModal: function () {
     this.setState({isLaunchModalOpen: false})
   },
+  openAddUserModal: function () {
+    this.setState({isAddUserModalOpen: true})
+  },
+  closeAddUserModal: function () {
+    this.setState({isAddUserModalOpen: false})
+  },
+  submitAddUserModal: function () {
+    this.setState({isAddUserModalOpen: false})
+  },
   openEditModal: function () {
     if (this.refs.detail.props.article == null) {return}
     this.setState({isEditModalOpen: true})
@@ -251,7 +273,6 @@ module.exports = React.createClass({
   },
   focus: function () {
     React.findDOMNode(this).focus()
-    console.log('focus this')
   },
   handleKeyDown: function (e) {
     // Bypath for modal open state
@@ -276,6 +297,13 @@ module.exports = React.createClass({
       }
       return
     }
+    if (this.state.isAddUserModalOpen) {
+      if (e.keyCode === 27) {
+        this.closeAddUserModal()
+        this.focus()
+      }
+      return
+    }
 
     // LaunchModal
     if ((e.keyCode === 13 && e.metaKey)) {
@@ -390,9 +418,13 @@ module.exports = React.createClass({
           {deleteModal}
         </ModalBase>
 
+        <ModalBase isOpen={this.state.isAddUserModalOpen} close={this.closeAddUserModal}>
+          <PlanetAddUserModal submit={this.submitAddUserModal} close={this.closeAddUserModal}/>
+        </ModalBase>
+
         <PlanetHeader search={this.state.search} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet} currentUser={user}/>
 
-        <PlanetNavigator onOpenLaunchModal={this.openLaunchModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
+        <PlanetNavigator openLaunchModal={this.openLaunchModal} openAddUserModal={this.openAddUserModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
 
         <PlanetArticleList ref='list' articles={filteredArticles}/>
 

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.addUser, this.addUser)
     this.listenTo(PlanetActions.createSnippet, this.createSnippet)
     this.listenTo(PlanetActions.updateSnippet, this.updateSnippet)
     this.listenTo(PlanetActions.deleteSnippet, this.deleteSnippet)
@@ -78,6 +79,27 @@ var PlanetStore = Reflux.createStore({
         })
       }.bind(this))
   },
+  addUser: function (planetName, userName) {
+    request
+      .post(apiUrl + planetName + '/users')
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
+      .send({name: userName})
+      .end(function (err, res) {
+        if (err) {
+          console.error(err)
+          this.trigger(null)
+          return
+        }
+        var user = res.body
+
+        this.trigger({
+          status: 'userAdded',
+          data: user
+        })
+      }.bind(this))
+  },
   createSnippet: function (planetName, input) {
     input.description = input.description.substring(0, 255)
     request

browser/styles/main/containers/PlanetContainer.styl

@@ -121,6 +121,18 @@
         background-color hoverBackgroundColor
       &:active, &.active
         color brandColor
+  .usersLabel
+    margin-top 35px
+    margin-bottom 5px
+  .users
+    li
+      width 44px
+      height 44px
+      float left
+      circle()
+      margin 3px
+      line-height 44px
+
 
 .PlanetArticleList
   absolute bottom right

browser/styles/main/containers/UserContainer.styl

@@ -68,28 +68,3 @@
         border-color darken(brandBorderColor, 10%)
         background-color brandColor
         color white
-.PlanetCreateModal.modal
-  padding 60px 0
-  .nameInput
-    width 80%
-    font-size 1.3em
-    margin 35px auto
-    text-align center
-  .submitButton
-    display block
-    margin 0 auto
-    box-sizing border-box
-    width 55px
-    height 55px
-    border-style solid
-    border-width 1px
-    circle()
-    border-color brandBorderColor
-    background-color transparent
-    color brandColor
-    &:hover, &.hover, &:focus, &.focus
-      border-color darken(brandBorderColor, 30%)
-      color darken(brandColor, 30%)
-    &:active, &.active
-      background-color brandColor
-      color white

browser/styles/shared/modal.styl

@@ -86,3 +86,34 @@
     border solid 1px borderColor
     border-radius 5px
     marked()
+
+  .PlanetCreateModal.modal, .PlanetAddUserModal.modal
+    padding 60px 0
+    .nameInput
+      width 80%
+      font-size 1.3em
+      margin 35px auto
+      text-align center
+    .userNameSelect
+      width 80%
+      font-size 1.3em
+      margin 35px auto
+      text-align center
+    .submitButton
+      display block
+      margin 0 auto
+      box-sizing border-box
+      width 55px
+      height 55px
+      border-style solid
+      border-width 1px
+      circle()
+      border-color brandBorderColor
+      background-color transparent
+      color brandColor
+      &:hover, &.hover, &:focus, &.focus
+        border-color darken(brandBorderColor, 30%)
+        color darken(brandColor, 30%)
+      &:active, &.active
+        background-color brandColor
+        color white