extract BlueprintForm from LaunchModal & add Tag search

browser/main/Components/BlueprintForm.jsx

@@ -0,0 +1,93 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var CodeEditor = require('./CodeEditor')
+var Catalyst = require('../Mixins/Catalyst')
+var Select = require('react-select')
+var request = require('superagent')
+
+var getOptions = function (input, callback) {
+  request
+    .get('http://localhost:8000/tags/search')
+    .query({name: input})
+    .send()
+    .end(function (err, res) {
+      if (err) {
+        callback(err)
+        return
+      }
+      callback(null, {
+          options: res.body.map(function (tag) {
+            return {
+              label: tag.name,
+              value: tag.name
+            }
+          }),
+          complete: true
+      })
+    })
+}
+
+var BlueprintForm = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      blueprint: {
+        title: '',
+        content: '',
+        Tags: []
+      }
+    }
+  },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.title).focus()
+  },
+  handleTagsChange: function (selected, all) {
+    var blueprint = this.state.blueprint
+    blueprint.Tags = all
+    this.setState({blueprint: blueprint})
+  },
+  handleContentChange: function (e, value) {
+    var blueprint = this.state.blueprint
+    blueprint.content = value
+    this.setState({blueprint: blueprint})
+  },
+  submit: function () {
+    console.log(this.state.blueprint)
+  },
+  render: function () {
+    return (
+      <div className='BlueprintForm'>
+        <div className='modal-body'>
+          <div className='form-group'>
+            <input ref='title' className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
+          </div>
+          <div className='form-group'>
+            <CodeEditor onChange={this.handleContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
+          </div>
+          <div className='form-group'>
+            <Select
+                name='Tags'
+                multi={true}
+                allowCreate={true}
+                value={this.state.blueprint.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'>Cancle</button>
+            <button onClick={this.submit} className='btn-primary'>Launch</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})
+
+module.exports = BlueprintForm

browser/main/Components/LaunchModal.jsx

@@ -1,81 +1,10 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
-var CodeEditor = require('./CodeEditor')
 var Catalyst = require('../Mixins/Catalyst')
-
-var Select = require('react-select')
-
 var PlanetStore = require('../Stores/PlanetStore')
 
 var SnippetForm = require('./SnippetForm')
-
+var BlueprintForm = require('./BlueprintForm')
-var options = [
-  { value: 'one', label: 'One' },
-  { value: 'two', label: 'Two' }
-]
-
-var BlueprintForm = React.createClass({
-  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
-  propTypes: {
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    return {
-      blueprint: {
-        title: '',
-        content: '',
-        Tags: []
-      }
-    }
-  },
-  componentDidMount: function () {
-    React.findDOMNode(this.refs.title).focus()
-  },
-  handleBlueprintTagsChange: function (selected, all) {
-    var blueprint = this.state.blueprint
-    blueprint.Tags = all
-    this.setState({blueprint: blueprint})
-  },
-  handleBlueprintContentChange: function (e, value) {
-    var blueprint = this.state.blueprint
-    blueprint.content = value
-    this.setState({blueprint: blueprint})
-  },
-  submit: function () {
-    console.log(this.state.blueprint)
-  },
-  render: function () {
-    return (
-      <div className='BlueprintForm'>
-        <div className='modal-body'>
-          <div className='form-group'>
-            <input ref='title' className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
-          </div>
-          <div className='form-group'>
-            <CodeEditor onChange={this.handleBlueprintContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
-          </div>
-          <div className='form-group'>
-            <Select
-                name='Tags'
-                multi={true}
-                allowCreate={true}
-                value={this.state.blueprint.Tags}
-                placeholder='Tags...'
-                options={options}
-                onChange={this.handleBlueprintTagsChange}
-            />
-          </div>
-        </div>
-        <div className='modal-footer'>
-          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
-            <button onClick={this.submit} className='btn-primary'>Launch</button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
 
 var LaunchModal = React.createClass({
   mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],

browser/main/Components/SnippetForm.jsx

@@ -2,15 +2,31 @@ var React = require('react/addons')
 var ReactRouter = require('react-router')
 var CodeEditor = require('./CodeEditor')
 var Catalyst = require('../Mixins/Catalyst')
-
 var Select = require('react-select')
-
+var request = require('superagent')
 var PlanetActions = require('../Actions/PlanetActions')
 
-var options = [
+var getOptions = function (input, callback) {
-  { value: 'one', label: 'One' },
+  request
-  { value: 'two', label: 'Two' }
+    .get('http://localhost:8000/tags/search')
-]
+    .query({name: input})
+    .send()
+    .end(function (err, res) {
+      if (err) {
+        callback(err)
+        return
+      }
+      callback(null, {
+          options: res.body.map(function (tag) {
+            return {
+              label: tag.name,
+              value: tag.name
+            }
+          }),
+          complete: false
+      })
+    })
+}
 
 var SnippetForm = React.createClass({
   mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
@@ -31,12 +47,12 @@ var SnippetForm = React.createClass({
   componentDidMount: function () {
     React.findDOMNode(this.refs.description).focus()
   },
-  handleSnippetTagsChange: function (selected, all) {
+  handleTagsChange: function (selected, all) {
     var snippet = this.state.snippet
     snippet.Tags = all
     this.setState({snippet: snippet})
   },
-  handleSnippetContentChange: function (e, value) {
+  handleContentChange: function (e, value) {
     var snippet = this.state.snippet
     snippet.content = value
     this.setState({snippet: snippet})
@@ -67,7 +83,7 @@ var SnippetForm = React.createClass({
             </select>
           </div>
           <div className='form-group'>
-            <CodeEditor onChange={this.handleSnippetContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>
+            <CodeEditor onChange={this.handleContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>
           </div>
           <div className='form-group'>
             <Select
@@ -76,8 +92,8 @@ var SnippetForm = React.createClass({
               allowCreate={true}
               value={this.state.snippet.Tags}
               placeholder='Tags...'
-              options={options}
+              asyncOptions={getOptions}
-              onChange={this.handleSnippetTagsChange}
+              onChange={this.handleTagsChange}
             />
           </div>
         </div>

browser/styles/shared/modal.styl

@@ -28,6 +28,7 @@
         margin 0
         border-radius 0
         border-width 1px
+        width 150px
         &:nth-child(1)
           border-top-left-radius 10px
           border-bottom-left-radius 10px