Skip to content

Commit 89cfd35

Browse files
Rokt33rRokt33r
committed
extract components from PlanetContainer
1 parent 9ea16a3 commit 89cfd35

8 files changed

Lines changed: 329 additions & 303 deletions

File tree

‎browser/main/Components/BlueprintForm.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ var BlueprintForm = React.createClass({
9797
<CodeEditor onChange={this.handleContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
9898
</div>
9999
) : (
100-
<div className='form-group'>
100+
<div className='form-group relative'>
101101
<div className='previewMode'>Preview mode</div>
102102
<div className='marked' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(this.state.blueprint.content)}}></div>
103103
</div>

‎browser/main/Components/PlanetArticleDetail.jsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
var React = require('react/addons')
2+
var moment = require('moment')
3+
4+
var CodeViewer = require('../Components/CodeViewer')
5+
var ModalBase = require('../Components/ModalBase')
6+
var SnippetEditModal = require('../Components/SnippetEditModal')
7+
var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
8+
var BlueprintEditModal = require('../Components/BlueprintEditModal')
9+
var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
10+
11+
var ForceUpdate = require('../Mixins/ForceUpdate')
12+
var Markdown = require('../Mixins/Markdown')
13+
14+
var PlanetArticleDetail = React.createClass({
15+
mixins: [ForceUpdate(60000), Markdown],
16+
propTypes: {
17+
article: React.PropTypes.object
18+
},
19+
getInitialState: function () {
20+
return {
21+
isEditModalOpen: false
22+
}
23+
},
24+
openEditModal: function () {
25+
this.setState({isEditModalOpen: true})
26+
},
27+
closeEditModal: function () {
28+
this.setState({isEditModalOpen: false})
29+
},
30+
submitEditModal: function () {
31+
this.setState({isEditModalOpen: false})
32+
},
33+
openDeleteModal: function () {
34+
this.setState({isDeleteModalOpen: true})
35+
},
36+
closeDeleteModal: function () {
37+
this.setState({isDeleteModalOpen: false})
38+
},
39+
submitDeleteModal: function () {
40+
this.setState({isDeleteModalOpen: false})
41+
},
42+
render: function () {
43+
var article = this.props.article
44+
45+
var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
46+
return (
47+
<a key={tag.id} href>#{tag.name}</a>
48+
)
49+
}) : (
50+
<a className='noTag'>Not tagged yet</a>
51+
)
52+
if (article.type === 'snippet') {
53+
return (
54+
<div className='PlanetArticleDetail snippetDetail'>
55+
<div className='viewer-header'>
56+
<i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
57+
<span className='control-group'>
58+
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
59+
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
60+
</span>
61+
62+
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
63+
<SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
64+
</ModalBase>
65+
66+
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
67+
<SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
68+
</ModalBase>
69+
</div>
70+
<div className='viewer-body'>
71+
<div className='viewer-detail'>
72+
<div className='description'>{article.description}</div>
73+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
74+
</div>
75+
<div className='content'>
76+
<CodeViewer code={article.content} mode={article.mode}/>
77+
</div>
78+
</div>
79+
</div>
80+
)
81+
}
82+
return (
83+
<div className='PlanetArticleDetail blueprintDetail'>
84+
<div className='viewer-header'>
85+
<i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
86+
<span className='control-group'>
87+
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
88+
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
89+
</span>
90+
91+
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
92+
<BlueprintEditModal blueprint={article} submit={this.submitEditModal} close={this.closeEditModal}/>
93+
</ModalBase>
94+
95+
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
96+
<BlueprintDeleteModal blueprint={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
97+
</ModalBase>
98+
</div>
99+
<div className='viewer-body'>
100+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
101+
<div className='content' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(article.content)}}></div>
102+
</div>
103+
</div>
104+
)
105+
}
106+
})
107+
108+
module.exports = PlanetArticleDetail

‎browser/main/Components/PlanetArticleList.jsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
var React = require('react/addons')
2+
var ReactRouter = require('react-router')
3+
var moment = require('moment')
4+
5+
var ForceUpdate = require('../Mixins/ForceUpdate')
6+
var Markdown = require('../Mixins/Markdown')
7+
8+
var PlanetArticleList = React.createClass({
9+
mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
10+
propTypes: {
11+
planet: React.PropTypes.shape({
12+
Snippets: React.PropTypes.array,
13+
Blueprints: React.PropTypes.array,
14+
Articles: React.PropTypes.array
15+
}),
16+
onPressDown: React.PropTypes.func,
17+
onPressUp: React.PropTypes.func
18+
},
19+
handleKeyDown: function (e) {
20+
switch (e.keyCode) {
21+
case 38:
22+
e.preventDefault()
23+
this.props.onPressUp()
24+
break
25+
case 40:
26+
e.preventDefault()
27+
this.props.onPressDown()
28+
}
29+
},
30+
render: function () {
31+
var articles = this.props.planet.Articles.map(function (article) {
32+
var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
33+
return (
34+
<a key={tag.id} href>#{tag.name}</a>
35+
)
36+
}) : (
37+
<a className='noTag'>Not tagged yet</a>
38+
)
39+
var params = this.getParams()
40+
var isActive = article.type === 'snippet' ? this.isActive('snippets') && parseInt(params.localId, 10) === article.localId : this.isActive('blueprints') && parseInt(params.localId, 10) === article.localId
41+
42+
var handleClick
43+
44+
if (article.type === 'snippet') {
45+
46+
handleClick = function () {
47+
this.transitionTo('snippets', {
48+
userName: params.userName,
49+
planetName: params.planetName,
50+
localId: article.localId
51+
})
52+
}.bind(this)
53+
54+
return (
55+
<li onClick={handleClick} key={'snippet-' + article.id}>
56+
<div className={'articleItem snippetItem' + (isActive ? ' active' : '')}>
57+
<div className='itemHeader'>
58+
<div className='callSign'><i className='fa fa-code fa-fw'></i> {article.callSign}</div>
59+
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
60+
</div>
61+
<div className='description'>{article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}</div>
62+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
63+
</div>
64+
<div className='divider'></div>
65+
</li>
66+
)
67+
}
68+
69+
handleClick = function () {
70+
this.transitionTo('blueprints', {
71+
userName: params.userName,
72+
planetName: params.planetName,
73+
localId: article.localId
74+
})
75+
}.bind(this)
76+
77+
return (
78+
<li onClick={handleClick} key={'blueprint-' + article.id}>
79+
<div className={'articleItem blueprintItem' + (isActive ? ' active' : '')}>
80+
<div className='itemHeader'>
81+
<div className='callSign'><i className='fa fa-file-text-o fa-fw'></i> {article.title}</div>
82+
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
83+
</div>
84+
<div className='content'>{this.markdown(article.content.substring(0, 150)).replace(/(<([^>]+)>)/ig, '').substring(0, 75)}</div>
85+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
86+
</div>
87+
<div className='divider'></div>
88+
</li>
89+
)
90+
91+
}.bind(this))
92+
93+
return (
94+
<div className='PlanetArticleList'>
95+
<ul onKeyDown={this.handleKeyDown} tabIndex='1'>
96+
{articles}
97+
</ul>
98+
</div>
99+
)
100+
}
101+
})
102+
103+
module.exports = PlanetArticleList

‎browser/main/Components/PlanetHeader.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
var React = require('react/addons')
2+
3+
var PlanetHeader = React.createClass({
4+
propTypes: {
5+
currentPlanet: React.PropTypes.object,
6+
currentUser: React.PropTypes.object
7+
},
8+
getInitialState: function () {
9+
return {
10+
isMenuDropDownOpen: false
11+
}
12+
},
13+
toggleMenuDropDown: function () {
14+
this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () {
15+
if (this.state.isMenuDropDownOpen) {
16+
document.body.onclick = function () {
17+
this.setState({isMenuDropDownOpen: false}, function () {
18+
document.body.onclick = null
19+
})
20+
}.bind(this)
21+
}
22+
})
23+
},
24+
interceptClick: function (e) {
25+
e.stopPropagation()
26+
},
27+
render: function () {
28+
var currentPlanetName = this.props.currentPlanet.name
29+
30+
return (
31+
<div onClick={this.interceptClick} className='PlanetHeader'>
32+
<span className='planetName'>{currentPlanetName}</span>
33+
<button onClick={this.toggleMenuDropDown} className={this.state.isMenuDropDownOpen ? 'menuBtn active' : 'menuBtn'}>
34+
<i className='fa fa-chevron-down'></i>
35+
</button>
36+
<div className={this.state.isMenuDropDownOpen ? 'dropDown' : 'dropDown hide'} ref='menuDropDown'>
37+
<a href='#'><i className='fa fa-wrench fa-fw'/> Planet Setting</a>
38+
<a href='#'><i className='fa fa-group fa-fw'/> Manage member</a>
39+
<a href='#'><i className='fa fa-trash fa-fw'/> Delete Planet</a>
40+
</div>
41+
<span className='searchInput'>
42+
<i className='fa fa-search'/>
43+
<input type='text' className='inline-input circleInput' placeholder='Search...'/>
44+
</span>
45+
<a className='downloadBtn btn-primary'>Download Mac app</a>
46+
</div>
47+
)
48+
}
49+
})
50+
51+
module.exports = PlanetHeader

‎browser/main/Components/PlanetNavigator.jsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
var React = require('react/addons')
2+
3+
var ModalBase = require('../Components/ModalBase')
4+
var LaunchModal = require('../Components/LaunchModal')
5+
6+
var PlanetNavigator = React.createClass({
7+
propTypes: {
8+
currentPlanet: React.PropTypes.shape({
9+
name: React.PropTypes.string
10+
}),
11+
currentUser: React.PropTypes.shape({
12+
name: React.PropTypes.string
13+
})
14+
},
15+
getInitialState: function () {
16+
return {
17+
isLaunchModalOpen: false
18+
}
19+
},
20+
openLaunchModal: function () {
21+
console.log('and...OPEN!!')
22+
this.setState({isLaunchModalOpen: true})
23+
},
24+
closeLaunchModal: function () {
25+
this.setState({isLaunchModalOpen: false})
26+
},
27+
submitLaunchModal: function (ret) {
28+
console.log(ret)
29+
this.setState({isLaunchModalOpen: false})
30+
},
31+
render: function () {
32+
return (
33+
<div className='PlanetNavigator'>
34+
<button onClick={this.openLaunchModal} className='btn-primary btn-block'>
35+
<i className='fa fa-rocket fa-fw'/> Launch
36+
</button>
37+
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
38+
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
39+
</ModalBase>
40+
<nav>
41+
<a>
42+
<i className='fa fa-home fa-fw'/> Home
43+
</a>
44+
<a>
45+
<i className='fa fa-code fa-fw'/> Snippets
46+
</a>
47+
<a>
48+
<i className='fa fa-file-text-o fa-fw'/> Blueprints
49+
</a>
50+
</nav>
51+
</div>
52+
)
53+
}
54+
})
55+
56+
module.exports = PlanetNavigator

0 commit comments

Comments
 (0)