From 9ea16a39df7a6f0634c819490573a865672f6235 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Sat, 18 Jul 2015 21:38:22 +0900 Subject: [PATCH] add article indexing(keyinput, store event) --- .../main/Components/BlueprintDeleteModal.jsx | 49 ++++ .../main/Components/BlueprintEditModal.jsx | 38 ++++ browser/main/Components/BlueprintForm.jsx | 17 +- browser/main/Components/LaunchModal.jsx | 5 +- .../main/Components/SnippetDeleteModal.jsx | 2 +- browser/main/Components/SnippetEditModal.jsx | 2 +- browser/main/Containers/PlanetContainer.jsx | 211 +++++++++++------- browser/main/Stores/PlanetStore.js | 24 +- 8 files changed, 248 insertions(+), 100 deletions(-) create mode 100644 browser/main/Components/BlueprintDeleteModal.jsx create mode 100644 browser/main/Components/BlueprintEditModal.jsx diff --git a/browser/main/Components/BlueprintDeleteModal.jsx b/browser/main/Components/BlueprintDeleteModal.jsx new file mode 100644 index 00000000..d5b4a852 --- /dev/null +++ b/browser/main/Components/BlueprintDeleteModal.jsx @@ -0,0 +1,49 @@ +var React = require('react') +var PlanetStore = require('../Stores/PlanetStore') +var PlanetActions = require('../Actions/PlanetActions') + +var BlueprintDeleteModal = React.createClass({ + propTypes: { + close: React.PropTypes.func, + blueprint: React.PropTypes.object + }, + componentDidMount: function () { + this.unsubscribe = PlanetStore.listen(this.onListen) + }, + componentWillUnmount: function () { + this.unsubscribe() + }, + onListen: function (res) { + switch (res.status) { + case 'articleDeleted': + this.props.close() + break + } + }, + stopPropagation: function (e) { + e.stopPropagation() + }, + submit: function () { + PlanetActions.deleteBlueprint(this.props.blueprint.id) + }, + render: function () { + return ( +
+
+

Delete Blueprint

+
+
+

Are you sure to delete it?

+
+
+
+ + +
+
+
+ ) + } +}) + +module.exports = BlueprintDeleteModal diff --git a/browser/main/Components/BlueprintEditModal.jsx b/browser/main/Components/BlueprintEditModal.jsx new file mode 100644 index 00000000..f528c6a7 --- /dev/null +++ b/browser/main/Components/BlueprintEditModal.jsx @@ -0,0 +1,38 @@ +var React = require('react') +var BlueprintForm = require('./BlueprintForm') +var PlanetStore = require('../Stores/PlanetStore') + +var BlueprintEditModal = React.createClass({ + propTypes: { + close: React.PropTypes.func, + blueprint: React.PropTypes.object + }, + componentDidMount: function () { + this.unsubscribe = PlanetStore.listen(this.onListen) + }, + componentWillUnmount: function () { + this.unsubscribe() + }, + onListen: function (res) { + switch (res.status) { + case 'articleUpdated': + this.props.close() + break + } + }, + stopPropagation: function (e) { + e.stopPropagation() + }, + render: function () { + return ( +
+
+

Edit Blueprint

+
+ +
+ ) + } +}) + +module.exports = BlueprintEditModal diff --git a/browser/main/Components/BlueprintForm.jsx b/browser/main/Components/BlueprintForm.jsx index 854754a8..97361b41 100644 --- a/browser/main/Components/BlueprintForm.jsx +++ b/browser/main/Components/BlueprintForm.jsx @@ -40,12 +40,19 @@ var BlueprintForm = React.createClass({ PREVIEW_MODE: 1 }, getInitialState: function () { + var blueprint = Object.assign({ + title: '', + content: '', + Tags: [] + }, this.props.blueprint) + blueprint.Tags = blueprint.Tags.map(function (tag) { + return { + label: tag.name, + value: tag.name + } + }) return { - blueprint: { - title: '', - content: '', - Tags: [] - }, + blueprint: blueprint, mode: BlueprintForm.EDIT_MODE } }, diff --git a/browser/main/Components/LaunchModal.jsx b/browser/main/Components/LaunchModal.jsx index 53c2fd85..a610655a 100644 --- a/browser/main/Components/LaunchModal.jsx +++ b/browser/main/Components/LaunchModal.jsx @@ -25,10 +25,7 @@ var LaunchModal = React.createClass({ }, onListen: function (res) { switch (res.status) { - case 'snippetCreated': - this.props.close() - break - case 'blueprintCreated': + case 'articleCreated': this.props.close() break } diff --git a/browser/main/Components/SnippetDeleteModal.jsx b/browser/main/Components/SnippetDeleteModal.jsx index 0f2d4708..03c95a8f 100644 --- a/browser/main/Components/SnippetDeleteModal.jsx +++ b/browser/main/Components/SnippetDeleteModal.jsx @@ -15,7 +15,7 @@ var SnippetDeleteModal = React.createClass({ }, onListen: function (res) { switch (res.status) { - case 'snippetDeleted': + case 'articleDeleted': this.props.close() break } diff --git a/browser/main/Components/SnippetEditModal.jsx b/browser/main/Components/SnippetEditModal.jsx index f09242a5..55f5edf0 100644 --- a/browser/main/Components/SnippetEditModal.jsx +++ b/browser/main/Components/SnippetEditModal.jsx @@ -15,7 +15,7 @@ var SnippetEditModal = React.createClass({ }, onListen: function (res) { switch (res.status) { - case 'snippetUpdated': + case 'articleUpdated': this.props.close() break } diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx index fa1eaa7e..991a557f 100644 --- a/browser/main/Containers/PlanetContainer.jsx +++ b/browser/main/Containers/PlanetContainer.jsx @@ -7,6 +7,8 @@ var LaunchModal = require('../Components/LaunchModal') var CodeViewer = require('../Components/CodeViewer') var SnippetEditModal = require('../Components/SnippetEditModal') var SnippetDeleteModal = require('../Components/SnippetDeleteModal') +var BlueprintEditModal = require('../Components/BlueprintEditModal') +var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal') var AuthStore = require('../Stores/AuthStore') var PlanetStore = require('../Stores/PlanetStore') @@ -119,7 +121,20 @@ var PlanetArticleList = React.createClass({ Snippets: React.PropTypes.array, Blueprints: React.PropTypes.array, Articles: React.PropTypes.array - }) + }), + onPressDown: React.PropTypes.func, + onPressUp: React.PropTypes.func + }, + handleKeyDown: function (e) { + switch (e.keyCode) { + case 38: + e.preventDefault() + this.props.onPressUp() + break + case 40: + e.preventDefault() + this.props.onPressDown() + } }, render: function () { var articles = this.props.planet.Articles.map(function (article) { @@ -186,7 +201,7 @@ var PlanetArticleList = React.createClass({ return (
-
@@ -272,11 +287,11 @@ var PlanetArticleDetail = React.createClass({ - + - +
@@ -308,82 +323,121 @@ module.exports = React.createClass({ componentWillUnmount: function () { this.unsubscribe() }, - onFetched: function (res) { - var snippets = this.state.currentPlanet == null ? null : this.state.currentPlanet.Snippets - var snippet = res.data + getIndexOfCurrentArticle: function () { + var params = this.props.params + var index = 0 - switch (res.status) { - case 'planetFetched': - var planet = res.data - this.setState({currentPlanet: planet}, function () { - if (planet.Articles.length > 0) { - if (this.isActive('snippets')) { - this.transitionTo('snippets', { - userName: this.props.params.userName, - planetName: this.props.params.planetName, - localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId - }) - } else if (this.isActive('blueprints')) { - this.transitionTo('blueprints', { - userName: this.props.params.userName, - planetName: this.props.params.planetName, - localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId - }) - } - } - }) - break - case 'snippetCreated': - if (snippet.PlanetId === this.state.currentPlanet.id) { - snippets.unshift(snippet) - this.setState({planet: this.state.currentPlanet}, function () { - var params = this.getParams() - params.localId = snippet.localId - this.transitionTo('snippets', params) - }) + if (this.isActive('snippets')) { + this.state.currentPlanet.Articles.some(function (_article, _index) { + if (_article.type === 'snippet' && _article.localId === parseInt(params.localId, 10)) { + index = _index } - break - case 'snippetUpdated': - if (snippet.PlanetId === this.state.currentPlanet.id) { - snippets.some(function (_snippet, index) { - if (_snippet.id === snippet.id) { - 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)) + }) + } else if (this.isActive('blueprints')) { + this.state.currentPlanet.Articles.some(function (_article, _index) { + if (_article.type === 'blueprint' && _article.localId === parseInt(params.localId, 10)) { + index = _index + return true } + return false + }) } + return index + }, + selectArticleByIndex: function (index) { + var article = this.state.currentPlanet.Articles[index] + var params = this.props.params + + if (article == null) { + this.transitionTo('planetHome', params) + } + + if (article.type === 'snippet') { + params.localId = article.localId + this.transitionTo('snippets', params) + return + } + + if (article.type === 'blueprint') { + params.localId = article.localId + this.transitionTo('blueprints', params) + return + } + }, + selectNextArticle: function () { + if (this.state.currentPlanet == null || this.state.currentPlanet.Articles.length === 0) return + + var index = this.getIndexOfCurrentArticle() + + if (index < this.state.currentPlanet.Articles.length) { + this.selectArticleByIndex(index + 1) + } + }, + selectPriorArticle: function () { + if (this.state.currentPlanet == null || this.state.currentPlanet.Articles.length === 0) return + + var index = this.getIndexOfCurrentArticle() + + if (index > 0) { + this.selectArticleByIndex(index - 1) + } + }, + onFetched: function (res) { + var articles = this.state.currentPlanet == null ? null : this.state.currentPlanet.Articles + + if (res.status === 'planetFetched') { + var planet = res.data + this.setState({currentPlanet: planet}, function () { + if (planet.Articles.length > 0) { + if (this.isActive('snippets')) { + this.transitionTo('snippets', { + userName: this.props.params.userName, + planetName: this.props.params.planetName, + localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId + }) + } else if (this.isActive('blueprints')) { + this.transitionTo('blueprints', { + userName: this.props.params.userName, + planetName: this.props.params.planetName, + localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId + }) + } + } + }) + return + } + + var article = res.data + var index = this.getIndexOfCurrentArticle() + + if (article.PlanetId === this.state.currentPlanet.id) { + switch (res.status) { + case 'articleCreated': + articles.unshift(article) + + this.setState({planet: this.state.currentPlanet}, function () { + this.selectArticleByIndex(0) + }) + break + case 'articleUpdated': + articles.splice(index, 1) + articles.unshift(article) + + this.setState({planet: this.state.currentPlanet}) + break + case 'articleDeleted': + articles.splice(index, 1) + + this.setState({planet: this.state.currentPlanet}, function () { + if (index > 0) { + this.selectArticleByIndex(index - 1) + } else { + this.selectArticleByIndex(index) + } + }) + } + } }, render: function () { var user = AuthStore.getUser() @@ -391,9 +445,8 @@ module.exports = React.createClass({ if (this.state.currentPlanet == null) return (
) var content = (
Nothing selected
) + var localId = parseInt(this.props.params.localId, 10) if (this.isActive('snippets')) { - var localId = parseInt(this.props.params.localId, 10) - this.state.currentPlanet.Articles.some(function (article) { if (article.type === 'snippet' && localId === article.localId) { content = ( @@ -404,8 +457,6 @@ module.exports = React.createClass({ return false }) } else if (this.isActive('blueprints')) { - var localId = parseInt(this.props.params.localId, 10) - this.state.currentPlanet.Articles.some(function (article) { if (article.type === 'blueprint' && localId === article.localId) { content = ( @@ -421,7 +472,7 @@ module.exports = React.createClass({
- + {content}
) diff --git a/browser/main/Stores/PlanetStore.js b/browser/main/Stores/PlanetStore.js index a33b52e2..4b42ba87 100644 --- a/browser/main/Stores/PlanetStore.js +++ b/browser/main/Stores/PlanetStore.js @@ -59,9 +59,11 @@ var PlanetStore = Reflux.createStore({ }) .send(input) .end(function (req, res) { + var snippet = res.body + snippet.type = 'snippet' this.trigger({ - status: 'snippetCreated', - data: res.body + status: 'articleCreated', + data: snippet }) }.bind(this)) }, @@ -81,8 +83,9 @@ var PlanetStore = Reflux.createStore({ } var snippet = res.body + snippet.type = 'snippet' this.trigger({ - status: 'snippetUpdated', + status: 'articleUpdated', data: snippet }) }.bind(this)) @@ -103,7 +106,7 @@ var PlanetStore = Reflux.createStore({ var snippet = res.body this.trigger({ - status: 'snippetDeleted', + status: 'articleDeleted', data: snippet }) }.bind(this)) @@ -117,14 +120,16 @@ var PlanetStore = Reflux.createStore({ }) .send(input) .end(function (req, res) { + var blueprint = res.body + blueprint.type = 'blueprint' this.trigger({ - status: 'blueprintCreated', - data: res.body + status: 'articleCreated', + data: blueprint }) }.bind(this)) }, updateBlueprint: function (id, input) { - input.description = input.description.substring(0, 255) + input.title = input.title.substring(0, 255) request .put(apiUrl + 'blueprints/id/' + id) .set({ @@ -139,8 +144,9 @@ var PlanetStore = Reflux.createStore({ } var blueprint = res.body + blueprint.type = 'blueprint' this.trigger({ - status: 'blueprintUpdated', + status: 'articleUpdated', data: blueprint }) }.bind(this)) @@ -161,7 +167,7 @@ var PlanetStore = Reflux.createStore({ var blueprint = res.body this.trigger({ - status: 'blueprintDeleted', + status: 'articleDeleted', data: blueprint }) }.bind(this))