on Refactoring...

browser/main/Components/PlanetCreateModal.jsx

@@ -1,26 +1,34 @@
+/* global localStorage */
+
 var React = require('react/addons')
-var Catalyst = require('../Mixins/Catalyst')
+var Select = require('react-select')
 
-var PlanetActions = require('../Actions/PlanetActions')
+var Hq = require('../Services/Hq')
 
+var LinkedState = require('../Mixins/LinkedState')
+
+var UserStore = require('../Stores/UserStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
-  mixins: [Catalyst.LinkedStateMixin],
+  mixins: [LinkedState],
   propTypes: {
+    transitionTo: React.PropTypes.func,
     close: React.PropTypes.func
   },
   getInitialState: function () {
+    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
     return {
-      planetName: ''
+      user: currentUser,
+      planet: {
+        name: '',
+        OwnerId: currentUser.id,
+        public: true
+      }
     }
   },
   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') {
@@ -28,26 +36,47 @@ module.exports = React.createClass({
     }
   },
   handleSubmit: function () {
-    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()
+    Hq.createPlanet(this.state.user.name, this.state.planet)
+      .then(function (res) {
+        var planet = res.body
+
+        var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+
+        var isNew = !currentUser.Planets.some(function (_planet, index) {
+          if (planet.id === _planet) {
+            currentUser.Planets.splice(index, 1, planet)
+            return true
+          }
+          return false
+        })
+        if (isNew) currentUser.Planets.push(planet)
+
+        localStorage.setItem('currentUser', JSON.stringify(currentUser))
+        UserStore.Actions.update(currentUser)
+        this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+        this.props.close()
+      }.bind(this))
+      .catch(function (err) {
+        console.error(err)
+      })
   },
   render: function () {
     return (
-      <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'/>
+      <div className='PlanetCreateModal modal'>
+        <input ref='name' valueLink={this.linkState('planet.name')} className='nameInput stripInput' placeholder='Crate new Planet'/>
+
+        <div className='formField'>
+          of
+          <select valueLink={this.linkState('planet.OwnerId')}>
+            <option value={this.state.user.id}>Me({this.state.user.name})</option>
+          </select>
+          as
+          <select valueLink={this.linkState('planet.public')}>
+            <option value={true}>Public</option>
+            <option value={false}>Private</option>
+          </select>
+        </div>
+
         <button onClick={this.handleSubmit} className='submitButton'>
           <i className='fa fa-check'/>
         </button>