Skip to content

Commit 4fee258

Browse files
Rokt33rRokt33r
committed
blueprint articles are available in planet list
1 parent b30511e commit 4fee258

7 files changed

Lines changed: 244 additions & 50 deletions

File tree

‎browser/main/Components/BlueprintForm.jsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var Catalyst = require('../Mixins/Catalyst')
55
var Markdown = require('../Mixins/Markdown')
66
var Select = require('react-select')
77
var request = require('superagent')
8+
var PlanetActions = require('../Actions/PlanetActions')
89

910
var getOptions = function (input, callback) {
1011
request
@@ -30,13 +31,14 @@ var getOptions = function (input, callback) {
3031

3132
var BlueprintForm = React.createClass({
3233
mixins: [Catalyst.LinkedStateMixin, ReactRouter.State, Markdown],
34+
propTypes: {
35+
close: React.PropTypes.func,
36+
blueprint: React.PropTypes.object
37+
},
3338
statics: {
3439
EDIT_MODE: 0,
3540
PREVIEW_MODE: 1
3641
},
37-
propTypes: {
38-
close: React.PropTypes.func
39-
},
4042
getInitialState: function () {
4143
return {
4244
blueprint: {
@@ -65,6 +67,22 @@ var BlueprintForm = React.createClass({
6567
},
6668
submit: function () {
6769
console.log(this.state.blueprint)
70+
var blueprint = Object.assign({}, this.state.blueprint)
71+
blueprint.Tags = blueprint.Tags.map(function (tag) {
72+
return tag.value
73+
})
74+
if (this.props.blueprint == null) {
75+
var params = this.getParams()
76+
var userName = params.userName
77+
var planetName = params.planetName
78+
79+
PlanetActions.createBlueprint(userName + '/' + planetName, blueprint)
80+
} else {
81+
var blueprintId = blueprint.id
82+
delete blueprint.id
83+
84+
PlanetActions.updateBlueprint(blueprintId, blueprint)
85+
}
6886
},
6987
render: function () {
7088
var content = this.state.mode === BlueprintForm.EDIT_MODE ? (

‎browser/main/Components/LaunchModal.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ var LaunchModal = React.createClass({
2828
case 'snippetCreated':
2929
this.props.close()
3030
break
31+
case 'blueprintCreated':
32+
this.props.close()
33+
break
3134
}
3235
},
3336
stopPropagation: function (e) {

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 113 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ var PlanetStore = require('../Stores/PlanetStore')
1313

1414
var PlanetActions = require('../Actions/PlanetActions')
1515

16+
var Markdown = require('../Mixins/Markdown')
17+
1618
var PlanetHeader = React.createClass({
1719
propTypes: {
1820
currentPlanet: React.PropTypes.object,
@@ -111,47 +113,75 @@ var PlanetNavigator = React.createClass({
111113
})
112114

113115
var PlanetArticleList = React.createClass({
114-
mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000)],
116+
mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
115117
propTypes: {
116118
planet: React.PropTypes.shape({
117119
Snippets: React.PropTypes.array,
118-
Blueprints: React.PropTypes.array
120+
Blueprints: React.PropTypes.array,
121+
Articles: React.PropTypes.array
119122
})
120123
},
121124
render: function () {
122-
var articles = this.props.planet.Snippets.map(function (snippet) {
123-
var tags = snippet.Tags.length > 0 ? snippet.Tags.map(function (tag) {
125+
var articles = this.props.planet.Articles.map(function (article) {
126+
var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
124127
return (
125128
<a key={tag.id} href>#{tag.name}</a>
126129
)
127130
}) : (
128131
<a className='noTag'>Not tagged yet</a>
129132
)
130133
var params = this.getParams()
134+
var isActive = article.type === 'snippet' ? this.isActive('snippets') && parseInt(params.localId, 10) === article.localId : this.isActive('blueprints') && parseInt(params.localId, 10) === article.localId
135+
136+
var handleClick
137+
138+
if (article.type === 'snippet') {
131139

132-
var isActive = parseInt(params.localId, 10) === snippet.localId
140+
handleClick = function () {
141+
this.transitionTo('snippets', {
142+
userName: params.userName,
143+
planetName: params.planetName,
144+
localId: article.localId
145+
})
146+
}.bind(this)
147+
148+
return (
149+
<li onClick={handleClick} key={'snippet-' + article.id}>
150+
<div className={'articleItem snippetItem' + (isActive ? ' active' : '')}>
151+
<div className='itemHeader'>
152+
<div className='callSign'><i className='fa fa-code'></i> {article.callSign}</div>
153+
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
154+
</div>
155+
<div className='description'>{article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}</div>
156+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
157+
</div>
158+
<div className='divider'></div>
159+
</li>
160+
)
161+
}
133162

134-
var handleClick = function () {
135-
this.transitionTo('snippets', {
163+
handleClick = function () {
164+
this.transitionTo('blueprints', {
136165
userName: params.userName,
137166
planetName: params.planetName,
138-
localId: snippet.localId
167+
localId: article.localId
139168
})
140169
}.bind(this)
141170

142171
return (
143-
<li onClick={handleClick} key={snippet.id}>
144-
<div className={isActive ? 'snippetItem active' : 'snippetItem'}>
172+
<li onClick={handleClick} key={'blueprint-' + article.id}>
173+
<div className={'articleItem blueprintItem' + (isActive ? ' active' : '')}>
145174
<div className='itemHeader'>
146-
<div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
147-
<div className='updatedAt'>{moment(snippet.updatedAt).fromNow()}</div>
175+
<div className='callSign'><i className='fa fa-file-text-o'></i> {article.title}</div>
176+
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
148177
</div>
149-
<div className='description'>{snippet.description.length > 50 ? snippet.description.substring(0, 50) + ' …' : snippet.description}</div>
178+
<div className='content'>{this.markdown(article.content.substring(0, 150)).replace(/(<([^>]+)>)/ig, '').substring(0, 75)}</div>
150179
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
151180
</div>
152181
<div className='divider'></div>
153182
</li>
154183
)
184+
155185
}.bind(this))
156186

157187
return (
@@ -165,9 +195,9 @@ var PlanetArticleList = React.createClass({
165195
})
166196

167197
var PlanetArticleDetail = React.createClass({
168-
mixins: [ForceUpdate(60000)],
198+
mixins: [ForceUpdate(60000), Markdown],
169199
propTypes: {
170-
snippet: React.PropTypes.object
200+
article: React.PropTypes.object
171201
},
172202
getInitialState: function () {
173203
return {
@@ -193,44 +223,69 @@ var PlanetArticleDetail = React.createClass({
193223
this.setState({isDeleteModalOpen: false})
194224
},
195225
render: function () {
196-
var snippet = this.props.snippet
226+
var article = this.props.article
197227

198-
var tags = snippet.Tags.length > 0 ? snippet.Tags.map(function (tag) {
228+
var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
199229
return (
200230
<a key={tag.id} href>#{tag.name}</a>
201231
)
202232
}) : (
203233
<a className='noTag'>Not tagged yet</a>
204234
)
235+
if (article.type === 'snippet') {
236+
return (
237+
<div className='PlanetArticleDetail snippetDetail'>
238+
<div className='viewer-header'>
239+
<i className='fa fa-code'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
240+
<span className='control-group'>
241+
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
242+
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
243+
</span>
205244

245+
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
246+
<SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
247+
</ModalBase>
248+
249+
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
250+
<SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
251+
</ModalBase>
252+
</div>
253+
<div className='viewer-body'>
254+
<div className='viewer-detail'>
255+
<div className='description'>{article.description}</div>
256+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
257+
</div>
258+
<div className='content'>
259+
<CodeViewer code={article.content} mode={article.mode}/>
260+
</div>
261+
</div>
262+
</div>
263+
)
264+
}
206265
return (
207-
<div className='PlanetArticleDetail'>
266+
<div className='PlanetArticleDetail blueprintDetail'>
208267
<div className='viewer-header'>
209-
<i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{moment(snippet.updatedAt).fromNow()}</small>
268+
<i className='fa fa-file-text-o'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
210269
<span className='control-group'>
211270
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
212271
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
213272
</span>
214273

215274
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
216-
<SnippetEditModal snippet={snippet} submit={this.submitEditModal} close={this.closeEditModal}/>
275+
<SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
217276
</ModalBase>
218277

219278
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
220-
<SnippetDeleteModal snippet={snippet} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
279+
<SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
221280
</ModalBase>
222281
</div>
223282
<div className='viewer-body'>
224-
<div className='viewer-detail'>
225-
<div className='description'>{snippet.description}</div>
226-
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
227-
</div>
228-
<div className='content'>
229-
<CodeViewer code={snippet.content} mode={snippet.mode}/>
230-
</div>
283+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
284+
<div className='content' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(article.content)}}></div>
231285
</div>
232286
</div>
233287
)
288+
234289
}
235290
})
236291

@@ -261,11 +316,20 @@ module.exports = React.createClass({
261316
case 'planetFetched':
262317
var planet = res.data
263318
this.setState({currentPlanet: planet}, function () {
264-
if (planet.Snippets.length > 0) {
265-
this.transitionTo('snippets', {
266-
userName: this.props.params.userName,
267-
planetName: this.props.params.planetName,
268-
localId: this.props.params.localId == null ? planet.Snippets[0].localId : this.props.params.localId})
319+
if (planet.Articles.length > 0) {
320+
if (this.isActive('snippets')) {
321+
this.transitionTo('snippets', {
322+
userName: this.props.params.userName,
323+
planetName: this.props.params.planetName,
324+
localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId
325+
})
326+
} else if (this.isActive('blueprints')) {
327+
this.transitionTo('blueprints', {
328+
userName: this.props.params.userName,
329+
planetName: this.props.params.planetName,
330+
localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId
331+
})
332+
}
269333
}
270334
})
271335
break
@@ -326,14 +390,26 @@ module.exports = React.createClass({
326390
if (user == null) return (<div/>)
327391
if (this.state.currentPlanet == null) return (<div/>)
328392

329-
var content = (<div>No selected</div>)
393+
var content = (<div>Nothing selected</div>)
330394
if (this.isActive('snippets')) {
331395
var localId = parseInt(this.props.params.localId, 10)
332396

333-
this.state.currentPlanet.Snippets.some(function (_snippet) {
334-
if (localId === _snippet.localId) {
397+
this.state.currentPlanet.Articles.some(function (article) {
398+
if (article.type === 'snippet' && localId === article.localId) {
399+
content = (
400+
<PlanetArticleDetail article={article}/>
401+
)
402+
return true
403+
}
404+
return false
405+
})
406+
} else if (this.isActive('blueprints')) {
407+
var localId = parseInt(this.props.params.localId, 10)
408+
409+
this.state.currentPlanet.Articles.some(function (article) {
410+
if (article.type === 'blueprint' && localId === article.localId) {
335411
content = (
336-
<PlanetArticleDetail snippet={_snippet}/>
412+
<PlanetArticleDetail article={article}/>
337413
)
338414
return true
339415
}

‎browser/main/Mixins/Markdown.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
var markdownit = require('markdown-it')
22
var md = markdownit({
3-
typographer: true
3+
typographer: true,
4+
linkify: true
45
})
56

67
var Markdown = {

0 commit comments

Comments
 (0)