add SnippetDeleteModal & fix some bugs

browser/main/Actions/PlanetActions.js

@@ -5,9 +5,9 @@ module.exports = Reflux.createActions([
 
   'createSnippet',
   'updateSnippet',
-  'destroySnippet',
+  'deleteSnippet',
 
   'createBlueprint',
   'updateBlueprint',
-  'destroyBlueprint'
+  'deleteBlueprint'
 ])

browser/main/Components/CodeEditor.jsx

@@ -14,6 +14,7 @@ var CodeEditor = React.createClass({
     editor.setValue(this.props.code)
     editor.renderer.setShowGutter(true)
     editor.setTheme('ace/theme/xcode')
+    editor.clearSelection()
 
     var session = editor.getSession()
     session.setMode('ace/mode/' + this.props.mode)

browser/main/Components/SnippetDeleteModal.jsx

@@ -0,0 +1,49 @@
+var React = require('react')
+var PlanetStore = require('../Stores/PlanetStore')
+var PlanetActions = require('../Actions/PlanetActions')
+
+var SnippetDeleteModal = React.createClass({
+  propTypes: {
+    close: React.PropTypes.func,
+    snippet: React.PropTypes.object
+  },
+  componentDidMount: function () {
+    this.unsubscribe = PlanetStore.listen(this.onListen)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onListen: function (res) {
+    switch (res.status) {
+      case 'snippetDeleted':
+        this.props.close()
+        break
+    }
+  },
+  stopPropagation: function (e) {
+    e.stopPropagation()
+  },
+  submit: function () {
+    PlanetActions.deleteSnippet(this.props.snippet.id)
+  },
+  render: function () {
+    return (
+      <div onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
+        <div className='modal-header'>
+          <h1>Delete Snippet</h1>
+        </div>
+        <div className='modal-body'>
+          <p>Are you sure to delete it?</p>
+        </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'>Delete</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})
+
+module.exports = SnippetDeleteModal

browser/main/Components/SnippetForm.jsx

@@ -42,6 +42,12 @@ var SnippetForm = React.createClass({
       callSign: '',
       Tags: []
     }, this.props.snippet)
+    snippet.Tags = snippet.Tags.map(function (tag) {
+      return {
+        label: tag.name,
+        value: tag.name
+      }
+    })
     return {
       snippet: snippet
     }
@@ -110,7 +116,7 @@ var SnippetForm = React.createClass({
         <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>
+            <button onClick={this.submit} className='btn-primary'>{this.props.snippet == null ? 'Launch' : 'Relaunch'}</button>
           </div>
         </div>
       </div>

browser/main/Containers/PlanetContainer.jsx

@@ -4,6 +4,7 @@ var ModalBase = require('../Components/ModalBase')
 var LaunchModal = require('../Components/LaunchModal')
 var CodeViewer = require('../Components/CodeViewer')
 var SnippetEditModal = require('../Components/SnippetEditModal')
+var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
 
 var AuthStore = require('../Stores/AuthStore')
 var PlanetStore = require('../Stores/PlanetStore')
@@ -175,6 +176,15 @@ var PlanetArticleDetail = React.createClass({
   submitEditModal: function () {
     this.setState({isEditModalOpen: false})
   },
+  openDeleteModal: function () {
+    this.setState({isDeleteModalOpen: true})
+  },
+  closeDeleteModal: function () {
+    this.setState({isDeleteModalOpen: false})
+  },
+  submitDeleteModal: function () {
+    this.setState({isDeleteModalOpen: false})
+  },
   render: function () {
     var snippet = this.props.snippet
 
@@ -190,12 +200,16 @@ var PlanetArticleDetail = React.createClass({
           <i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small>
           <span className='control-group'>
             <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
-            <button className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+            <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
           </span>
 
           <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
             <SnippetEditModal snippet={snippet} submit={this.submitEditModal} close={this.closeEditModal}/>
           </ModalBase>
+
+          <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
+            <SnippetDeleteModal snippet={snippet} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
+          </ModalBase>
         </div>
         <div className='viewer-body'>
           <div className='viewer-detail'>
@@ -242,7 +256,7 @@ module.exports = React.createClass({
             this.transitionTo('snippets', {
               userName: this.props.params.userName,
               planetName: this.props.params.planetName,
-              localId: planet.Snippets[0].localId})
+              localId: this.props.params.localId == null ? planet.Snippets[0].localId : this.props.params.localId})
           }
         })
         break
@@ -260,13 +274,41 @@ module.exports = React.createClass({
         if (snippet.PlanetId === this.state.currentPlanet.id) {
           snippets.some(function (_snippet, index) {
             if (_snippet.id === snippet.id) {
-              snippets[index] = snippet
+              snippets.splice(index, 1)
+              snippets.unshift(snippet)
               this.setState({snippets: snippets})
               return true
             }
             return false
           }.bind(this))
         }
+        break
+      case 'snippetDeleted':
+        if (snippet.PlanetId === this.state.currentPlanet.id) {
+          snippets.some(function (_snippet, index) {
+            if (_snippet.id === snippet.id) {
+              snippets.splice(index, 1)
+              this.setState({snippets: snippets}, function () {
+                var params = this.getParams()
+                if (parseInt(params.localId, 10) === snippet.localId) {
+                  if (snippets.length === 0) {
+                    delete params.localId
+                    this.transitionTo('planet', params)
+                    return
+                  }
+                  if (index > 0) {
+                    params.localId = snippets[index - 1].localId
+                  } else {
+                    params.localId = snippets[0].localId
+                  }
+                  this.transitionTo('snippets', params)
+                }
+              })
+              return true
+            }
+            return false
+          }.bind(this))
+        }
     }
 
   },

browser/main/Stores/PlanetStore.js

@@ -9,6 +9,7 @@ var PlanetStore = Reflux.createStore({
     this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet)
     this.listenTo(PlanetActions.createSnippet, this.createSnippet)
     this.listenTo(PlanetActions.updateSnippet, this.updateSnippet)
+    this.listenTo(PlanetActions.deleteSnippet, this.deleteSnippet)
   },
   fetchPlanet: function (planetName) {
     request
@@ -69,6 +70,27 @@ var PlanetStore = Reflux.createStore({
           data: snippet
         })
       }.bind(this))
+  },
+  deleteSnippet: function (id) {
+    request
+      .del('http://localhost:8000/snippets/id/' + id)
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
+      .send()
+      .end(function (err, res) {
+        if (err) {
+          console.error(err)
+          this.trigger(null)
+          return
+        }
+
+        var snippet = res.body
+        this.trigger({
+          status: 'snippetDeleted',
+          data: snippet
+        })
+      }.bind(this))
   }
 })
 

browser/styles/main/containers/PlanetContainer.styl

@@ -2,6 +2,9 @@
 .PlanetContainer
   absolute top bottom right
   left 50px
+  .tags
+    a
+      margin 0 2px
 
 .PlanetHeader
   absolute left right top
@@ -118,9 +121,6 @@
   absolute bottom right
   left 200px
   top 65px
-  .tags
-    a
-      margin 0 2px
   width 250px
   border-right solid 1px highlightenBorderColor
 

browser/styles/shared/modal.styl

@@ -21,6 +21,9 @@
       h1
         padding: 10px 0 15px;
         font-size: 1.5em;
+    .modal-body
+      p
+        margin-bottom 15px
     .modal-footer
       clearfix()
       border-top solid 1px borderColor