refactor modal & setup ordering for snippet

2025-12-13 17:56:25 +00:00 · 2015-07-16 01:34:40 +09:00
parent 8b10eb130a
commit f56dd10106
6 changed files with 252 additions and 99 deletions
--- a/browser/main/Components/LaunchModal.jsx
+++ b/browser/main/Components/LaunchModal.jsx
@@ -1,19 +1,22 @@
 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 PlanetActions = require('../Actions/PlanetActions')
+var PlanetStore = require('../Stores/PlanetStore')
+
 // TODO: remove
 var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
 ]

-var LaunchModal = React.createClass({
-  mixins: [Catalyst.LinkedStateMixin],
+var SnippetForm = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
  propTypes: {
-    submit: React.PropTypes.func,
    close: React.PropTypes.func
  },
  getInitialState: function () {
@@ -23,28 +26,13 @@ var LaunchModal = React.createClass({
        mode: 'javascript',
        content: '',
        callSign: '',
-        tags: []
-      },
-      blueprint: {
-        title: '',
-        content: '',
-        tags: []
-      },
-      currentTab: 'snippet'
+        Tags: []
+      }
    }
  },
-  handleClick: function (e) {
-    e.stopPropagation()
-  },
-  selectSnippetTab: function () {
-    this.setState({currentTab: 'snippet'})
-  },
-  selectBlueprintTab: function () {
-    this.setState({currentTab: 'blueprint'})
-  },
  handleSnippetTagsChange: function (selected, all) {
    var snippet = this.state.snippet
-    snippet.tags = all
+    snippet.Tags = all
    this.setState({snippet: snippet})
  },
  handleSnippetContentChange: function (e, value) {
@@ -52,31 +40,22 @@ var LaunchModal = React.createClass({
    snippet.content = value
    this.setState({snippet: snippet})
  },
-  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 () {
-    // this.props.submit('yolo')
-    if (this.state.currentTab === 'snippet') {
-      console.log(this.state.snippet)
-    } else {
-      console.log(this.state.blueprint)
-    }
+    var params = this.getParams()
+    var userName = params.userName
+    var planetName = params.planetName
+    var snippet = Object.assign({}, this.state.snippet)
+    snippet.Tags = snippet.Tags.map(function (tag) {
+      return tag.value
+    })
+    PlanetActions.createSnippet(userName + '/' + planetName, snippet)
  },
  render: function () {
-    var form
-    if (this.state.currentTab === 'snippet') {
-      form = (
-        <div>
+    return (
+      <div className='SnippetForm'>
+        <div className='modal-body'>
          <div className='form-group'>
-            <textarea className='block-input' valueLink={this.linkState('snippet.description')} placeholder='Description'/>
+            <textarea className='snippetDescription block-input' valueLink={this.linkState('snippet.description')} placeholder='Description'/>
          </div>
          <div className='form-group'>
            <input className='inline-input' valueLink={this.linkState('snippet.callSign')} type='text' placeholder='Callsign'/>
@@ -91,49 +70,16 @@ var LaunchModal = React.createClass({
          </div>
          <div className='form-group'>
            <Select
-                name='tags'
-                multi={true}
-                allowCreate={true}
-                value={this.state.snippet.tags}
-                placeholder='Tags...'
-                options={options}
-                onChange={this.handleSnippetTagsChange}
+              name='Tags'
+              multi={true}
+              allowCreate={true}
+              value={this.state.snippet.Tags}
+              placeholder='Tags...'
+              options={options}
+              onChange={this.handleSnippetTagsChange}
            />
          </div>
        </div>
-      )
-    } else {
-      form = (
-        <div>
-            <div className='form-group'>
-              <input 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>
-      )
-    }
-
-    return (
-      <div onClick={this.handleClick} className='modal launch-modal'>
-        <div className='modal-body'>
-          <div className='modal-tab form-group'>
-            <button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button><button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>
-          </div>
-          {form}
-        </div>
        <div className='modal-footer'>
          <div className='modal-control'>
            <button onClick={this.props.close} className='btn-default'>Cancle</button>
@@ -145,4 +91,130 @@ var LaunchModal = React.createClass({
  }
 })

+var BlueprintForm = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      blueprint: {
+        title: '',
+        content: '',
+        Tags: []
+      }
+    }
+  },
+  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 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],
+  propTypes: {
+    submit: React.PropTypes.func,
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      currentTab: 'snippet'
+    }
+  },
+  componentDidMount: function () {
+    this.unsubscribe = PlanetStore.listen(this.onListen)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onListen: function (res) {
+    switch (res.status) {
+      case 'snippetCreated':
+        this.props.close()
+        break
+    }
+  },
+  handleClick: function (e) {
+    e.stopPropagation()
+  },
+  selectSnippetTab: function () {
+    this.setState({currentTab: 'snippet'})
+  },
+  selectBlueprintTab: function () {
+    this.setState({currentTab: 'blueprint'})
+  },
+  submit: function () {
+    // this.props.submit('yolo')
+    if (this.state.currentTab === 'snippet') {
+      console.log(this.state.snippet)
+    } else {
+      console.log(this.state.blueprint)
+    }
+  },
+  render: function () {
+    var modalBody
+    if (this.state.currentTab === 'snippet') {
+      modalBody = (
+        <SnippetForm close={this.props.close}/>
+      )
+    } else {
+      modalBody = (
+        <BlueprintForm close={this.props.close}/>
+      )
+    }
+
+    return (
+      <div onClick={this.handleClick} className='modal launch-modal'>
+        <div className='modal-header'>
+          <div className='modal-tab form-group'>
+            <button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button><button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>
+          </div>
+        </div>
+        {modalBody}
+      </div>
+    )
+  }
+})
+
 module.exports = LaunchModal
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -208,15 +208,34 @@ module.exports = React.createClass({
  componentWillUnmount: function () {
    this.unsubscribe()
  },
-  onFetched: function (planet) {
-    this.setState({currentPlanet: planet}, function () {
-      if (planet.Snippets.length > 0) {
-        this.transitionTo('snippets', {
-          userName: this.props.params.userName,
-          planetName: this.props.params.planetName,
-          localId: planet.Snippets[0].localId})
-      }
-    })
+  onFetched: function (res) {
+    switch (res.status) {
+      case 'planetFetched':
+        var planet = res.data
+        this.setState({currentPlanet: planet}, function () {
+          if (planet.Snippets.length > 0) {
+            this.transitionTo('snippets', {
+              userName: this.props.params.userName,
+              planetName: this.props.params.planetName,
+              localId: planet.Snippets[0].localId})
+          }
+        })
+        break
+      case 'snippetCreated':
+        var snippet = res.data
+
+        if (snippet.PlanetId === this.state.currentPlanet.id) {
+          var snippets = this.state.currentPlanet.Snippets
+          snippets.unshift(snippet)
+          this.setState({planet: this.state.currentPlanet}, function () {
+            var params = this.getParams()
+            params.localId = snippet.localId
+            this.transitionTo('snippets', params)
+          })
+        }
+
+    }
+
  },
  render: function () {
    var user = AuthStore.getUser()
--- a/browser/main/Containers/UserSettingContainer.jsx
+++ b/browser/main/Containers/UserSettingContainer.jsx
@@ -1,6 +1,5 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
-var Link = ReactRouter.Link

 var AuthActions = require('../Actions/AuthActions')

--- a/browser/main/Stores/PlanetStore.js
+++ b/browser/main/Stores/PlanetStore.js
@@ -1,3 +1,4 @@
+/* global localStorage */
 var Reflux = require('reflux')
 var request = require('superagent')

@@ -6,6 +7,7 @@ var PlanetActions = require('../Actions/PlanetActions')
 var PlanetStore = Reflux.createStore({
  init: function () {
    this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet)
+    this.listenTo(PlanetActions.createSnippet, this.createSnippet)
  },
  fetchPlanet: function (planetName) {
    request
@@ -19,12 +21,32 @@ var PlanetStore = Reflux.createStore({
        }

        var planet = res.body
+        planet.Snippets = planet.Snippets.sort(function (a, b) {
+          a = new Date(a.updatedAt)
+          b = new Date(b.updatedAt)
+          return a < b ? 1 : a > b ? -1 : 0
+        })

-        this.trigger(planet)
+        this.trigger({
+          status: 'planetFetched',
+          data: planet
+        })
      }.bind(this))
  },
-  updateSnippet: function (input) {
-
+  createSnippet: function (planetName, input) {
+    request
+      .post('http://localhost:8000/' + planetName + '/snippets')
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
+      .send(input)
+      .end(function (req, res) {
+        console.log('snippet created', res.body)
+        this.trigger({
+          status: 'snippetCreated',
+          data: res.body
+        })
+      }.bind(this))
  }
 })

--- a/browser/main/index.html
+++ b/browser/main/index.html
@@ -5,6 +5,40 @@

  <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico">
+  <script>
+  if (!Object.assign) {
+  Object.defineProperty(Object, 'assign', {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function(target) {
+      'use strict';
+      if (target === undefined || target === null) {
+        throw new TypeError('Cannot convert first argument to object');
+      }
+
+      var to = Object(target);
+      for (var i = 1; i < arguments.length; i++) {
+        var nextSource = arguments[i];
+        if (nextSource === undefined || nextSource === null) {
+          continue;
+        }
+        nextSource = Object(nextSource);
+
+        var keysArray = Object.keys(Object(nextSource));
+        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+          var nextKey = keysArray[nextIndex];
+          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+          if (desc !== undefined && desc.enumerable) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+      return to;
+    }
+  });
+}
+  </script>

  <script src="../vendor/react/react-with-addons.js"></script>
  <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
--- a/browser/styles/shared/modal.styl
+++ b/browser/styles/shared/modal.styl
@@ -14,9 +14,6 @@
    border-radius 10px
    padding 15px
    box-shadow popupShadow
-    .modal-body
-      .modal-tab
-        text-align center
    .modal-footer
      clearfix()
      border-top solid 1px borderColor
@@ -26,6 +23,7 @@

  .launch-modal
    .modal-tab
+      text-align center
      .btn-primary, .btn-default
        margin 0
        border-radius 0
@@ -38,7 +36,16 @@
          border-left none
          border-top-right-radius 10px
          border-bottom-right-radius 10px
-
+    textarea.snippetDescription
+      height 75px
+    .Select
+      .Select-control
+        border-color borderColor
+      &.is-focused
+        .Select-control
+          border-color brandBorderColor
+      .Select-menu-outer
+        border-color borderColor
    .ace_editor
      height 250px
      border-radius 5px