From 0dde2eb20f02a5e86628310b7a5e686b605a086a Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Fri, 17 Jul 2015 09:03:49 +0900 Subject: [PATCH] add SnippetDeleteModal & fix some bugs --- browser/main/Actions/PlanetActions.js | 4 +- browser/main/Components/CodeEditor.jsx | 1 + .../main/Components/SnippetDeleteModal.jsx | 49 +++++++++++++++++++ browser/main/Components/SnippetForm.jsx | 8 ++- browser/main/Containers/PlanetContainer.jsx | 48 ++++++++++++++++-- browser/main/Stores/PlanetStore.js | 22 +++++++++ .../main/containers/PlanetContainer.styl | 6 +-- browser/styles/shared/modal.styl | 3 ++ 8 files changed, 132 insertions(+), 9 deletions(-) create mode 100644 browser/main/Components/SnippetDeleteModal.jsx diff --git a/browser/main/Actions/PlanetActions.js b/browser/main/Actions/PlanetActions.js index f9a311c2..a1afef21 100644 --- a/browser/main/Actions/PlanetActions.js +++ b/browser/main/Actions/PlanetActions.js @@ -5,9 +5,9 @@ module.exports = Reflux.createActions([ 'createSnippet', 'updateSnippet', - 'destroySnippet', + 'deleteSnippet', 'createBlueprint', 'updateBlueprint', - 'destroyBlueprint' + 'deleteBlueprint' ]) diff --git a/browser/main/Components/CodeEditor.jsx b/browser/main/Components/CodeEditor.jsx index ee222fbd..16054576 100644 --- a/browser/main/Components/CodeEditor.jsx +++ b/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) diff --git a/browser/main/Components/SnippetDeleteModal.jsx b/browser/main/Components/SnippetDeleteModal.jsx new file mode 100644 index 00000000..0f2d4708 --- /dev/null +++ b/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 ( +
+
+

Delete Snippet

+
+
+

Are you sure to delete it?

+
+
+
+ + +
+
+
+ ) + } +}) + +module.exports = SnippetDeleteModal diff --git a/browser/main/Components/SnippetForm.jsx b/browser/main/Components/SnippetForm.jsx index 1b4598dc..c15081b2 100644 --- a/browser/main/Components/SnippetForm.jsx +++ b/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({
- +
diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx index df1e22c9..60e4265a 100644 --- a/browser/main/Containers/PlanetContainer.jsx +++ b/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({ {snippet.callSign} {snippet.updatedAt} - + + + + +
@@ -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)) + } } }, diff --git a/browser/main/Stores/PlanetStore.js b/browser/main/Stores/PlanetStore.js index 14465a32..1916899b 100644 --- a/browser/main/Stores/PlanetStore.js +++ b/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)) } }) diff --git a/browser/styles/main/containers/PlanetContainer.styl b/browser/styles/main/containers/PlanetContainer.styl index 0f080cf2..dd7f9bb1 100644 --- a/browser/styles/main/containers/PlanetContainer.styl +++ b/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 diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl index 89bd4310..ac3ad7a9 100644 --- a/browser/styles/shared/modal.styl +++ b/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