on Refactoring...

browser/main/Components/CodeForm.jsx

@@ -0,0 +1,151 @@
+var React = require('react/addons')
+var CodeEditor = require('./CodeEditor')
+var Select = require('react-select')
+
+var Hq = require('../Services/Hq')
+
+var LinkedState = require('../Mixins/LinkedState')
+
+var PlanetStore = require('../Stores/PlanetStore')
+
+var aceModes = require('../../../modules/ace-modes')
+
+var getOptions = function (input, callback) {
+  Hq.searchTag(input)
+    .then(function (res) {
+      callback(null, {
+          options: res.body.map(function (tag) {
+            return {
+              label: tag.name,
+              value: tag.name
+            }
+          }),
+          complete: false
+        })
+    })
+    .catch(function (err) {
+      console.log(err)
+    })
+}
+
+module.exports = React.createClass({
+  mixins: [LinkedState],
+  propTypes: {
+    planet: React.PropTypes.object,
+    close: React.PropTypes.func,
+    transitionTo: React.PropTypes.func,
+    code: React.PropTypes.object
+  },
+  getInitialState: function () {
+    var code = Object.assign({
+      description: '',
+      mode: '',
+      content: '',
+      Tags: []
+    }, this.props.code)
+
+    code.Tags = code.Tags.map(function (tag) {
+      return {
+        label: tag.name,
+        value: tag.name
+      }
+    })
+
+    return {
+      code: code
+    }
+  },
+  handleModeChange: function (selected) {
+    var code = this.state.code
+    code.mode = selected
+    this.setState({code: code})
+  },
+  handleTagsChange: function (selected, all) {
+    var code = this.state.code
+    code.Tags = all
+    this.setState({code: code})
+  },
+  handleContentChange: function (e, value) {
+    var code = this.state.code
+    code.content = value
+    this.setState({code: code})
+  },
+  submit: function () {
+    var planet = this.props.planet
+    var code = this.state.code
+    code.Tags = code.Tags.map(function (tag) {
+      return tag.value
+    })
+    if (this.props.code == null) {
+      Hq.createCode(planet.userName, planet.name, this.state.code)
+        .then(function (res) {
+          var code = res.body
+          PlanetStore.Actions.updateCode(code)
+          this.props.close()
+          this.props.transitionTo('codes', {userName: planet.userName, planetName: planet.name, localId: code.localId})
+        }.bind(this))
+        .catch(function (err) {
+          console.error(err)
+        })
+    } else {
+      Hq.updateCode(planet.userName, planet.name, this.props.code.localId, this.state.code)
+        .then(function (res) {
+          var code = res.body
+          PlanetStore.Actions.updateCode(code)
+          this.props.close()
+        }.bind(this))
+    }
+  },
+  handleKeyDown: function (e) {
+    if (e.keyCode === 13 && e.metaKey) {
+      this.submit()
+      e.stopPropagation()
+    }
+  },
+  render: function () {
+    var modeOptions = aceModes.map(function (mode) {
+      return {
+        label: mode,
+        value: mode
+      }
+    })
+    return (
+      <div className='CodeForm'>
+        <div className='modal-body'>
+          <div className='form-group'>
+            <textarea ref='description' className='codeDescription block-input' valueLink={this.linkState('code.description')} placeholder='Description'/>
+          </div>
+          <div className='form-group'>
+            <Select
+              name='mode'
+              className='modeSelect'
+              value={this.state.code.mode}
+              placeholder='Select Language'
+              options={modeOptions}
+              onChange={this.handleModeChange}/>
+          </div>
+          <div className='form-group'>
+            <CodeEditor onChange={this.handleContentChange} code={this.state.code.content} mode={this.state.code.mode}/>
+          </div>
+          <div className='form-group'>
+            <Select
+              name='Tags'
+              multi={true}
+              allowCreate={true}
+              value={this.state.code.Tags}
+              placeholder='Tags...'
+              asyncOptions={getOptions}
+              onChange={this.handleTagsChange}
+            />
+          </div>
+        </div>
+        <div className='modal-footer'>
+          <div className='modal-control'>
+            <button onClick={this.props.close} className='btn-default'>Cancel</button>
+            <button onClick={this.submit} className='btn-primary'>{this.props.code == null ? 'Launch' : 'Relaunch'}</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})