add user management for planet setting modal

Author: Rokt33r

browser/main/Actions/PlanetActions.js

@@ -6,6 +6,7 @@ module.exports = Reflux.createActions([
 
   'changeName',
   'addUser',
+  'removeUser',
 
   'createSnippet',
   'updateSnippet',

browser/main/Components/PlanetSettingModal.jsx

@@ -1,10 +1,33 @@
 var React = require('react/addons')
+var request = require('superagent')
 var Select = require('react-select')
 
 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],
   propTypes: {
@@ -15,7 +38,8 @@ module.exports = React.createClass({
     return {
       currentTab: 'planetProfile',
       planetName: this.props.currentPlanet.name,
-      isDeletePlanetChecked: false
+      isDeletePlanetChecked: false,
+      userName: ''
     }
   },
   activePlanetProfile: function () {
@@ -29,6 +53,17 @@ module.exports = React.createClass({
     var currentPlanet = this.props.currentPlanet
     PlanetActions.changeName(currentPlanet.userName, currentPlanet.name, this.state.planetName)
   },
+  handleChange: function (value) {
+    this.setState({userName: value})
+  },
+  addUser: function () {
+    PlanetActions.addUser(this.props.currentPlanet.userName + '/' + this.props.currentPlanet.name, this.state.userName)
+  },
+  removeUser: function (userName) {
+    return function () {
+      PlanetActions.removeUser(this.props.currentPlanet.userName + '/' + this.props.currentPlanet.name, userName)
+    }.bind(this)
+  },
   doubleCheckDeletePlanet: function () {
     if (this.state.isDeletePlanetChecked) {
       console.log('delete it')
@@ -72,7 +107,7 @@ module.exports = React.createClass({
             <img className='userPhoto' width='44' height='44' src='../vendor/dummy.jpg'/>
             <div className='userName'>{user.name}</div>
             <div className='userControl'>
-              {this.props.currentPlanet.OwnerId !== user.id ? <button className='btn-default'>Delete</button> : <span className='ownerLabel'>Owner</span>}
+              {this.props.currentPlanet.OwnerId !== user.id ? <button onClick={this.removeUser(user.name)} className='btn-default'>Delete</button> : <span className='ownerLabel'>Owner</span>}
             </div>
           </li>
         )
@@ -86,8 +121,15 @@ module.exports = React.createClass({
           <div className='addUserForm'>
             <div className='addUserLabel'>Invite user</div>
             <div className='addUserControl'>
-              <Select className='addUserSelect'/>
-              <button className='addUserSubmit btn-primary'>Invite</button>
+              <Select
+                name='userName'
+                value={this.state.userName}
+                placeholder='Username'
+                asyncOptions={getOptions}
+                onChange={this.handleChange}
+                className='addUserSelect'
+              />
+            <button onClick={this.addUser} className='addUserSubmit btn-primary'>Invite</button>
             </div>
           </div>
         </div>

browser/main/Containers/PlanetContainer.jsx

@@ -220,6 +220,24 @@ module.exports = React.createClass({
       return
     }
 
+    if (res.status === 'userRemoved') {
+      var user = res.data
+      if (user == null) {
+        return null
+      }
+      this.state.currentPlanet.Users.some(function (_user, index) {
+        if (user.id === _user.id) {
+          this.state.currentPlanet.Users.splice(index, 1)
+          return true
+        }
+        return false
+      }.bind(this))
+      this.setState({currentPlanet: this.state.currentPlanet}, function () {
+        if (this.state.isAddUserModalOpen) {this.closeAddUserModal()}
+      })
+      return
+    }
+
     if (res.status === 'nameChanged') {
       var params = Object.assign({}, this.props.params)
       params.planetName = res.data.name

browser/main/Stores/PlanetStore.js

@@ -12,6 +12,7 @@ var PlanetStore = Reflux.createStore({
     this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet)
     this.listenTo(PlanetActions.changeName, this.changeName)
     this.listenTo(PlanetActions.addUser, this.addUser)
+    this.listenTo(PlanetActions.removeUser, this.removeUser)
     this.listenTo(PlanetActions.createSnippet, this.createSnippet)
     this.listenTo(PlanetActions.updateSnippet, this.updateSnippet)
     this.listenTo(PlanetActions.deleteSnippet, this.deleteSnippet)
@@ -133,6 +134,27 @@ var PlanetStore = Reflux.createStore({
         })
       }.bind(this))
   },
+  removeUser: function (planetName, userName) {
+    request
+      .del(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: 'userRemoved',
+          data: user
+        })
+      }.bind(this))
+  },
   createSnippet: function (planetName, input) {
     input.description = input.description.substring(0, 255)
     request