Skip to content

Commit 72a08e8

Browse files
Rokt33rRokt33r
committed
add planet create modal & switching func
1 parent 864001b commit 72a08e8

9 files changed

Lines changed: 215 additions & 136 deletions

File tree

‎browser/main/Actions/PlanetActions.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
var Reflux = require('reflux')
22

33
module.exports = Reflux.createActions([
4+
'createPlanet',
45
'fetchPlanet',
56

67
'createSnippet',

‎browser/main/Components/PlanetCreateModal.jsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
var React = require('react/addons')
22
var Catalyst = require('../Mixins/Catalyst')
33

4+
var PlanetActions = require('../Actions/PlanetActions')
5+
46
var PlanetStore = require('../Stores/PlanetStore')
57

68
module.exports = React.createClass({
@@ -13,16 +15,39 @@ module.exports = React.createClass({
1315
planetName: ''
1416
}
1517
},
18+
componentDidMount: function () {
19+
React.findDOMNode(this.refs.name).focus()
20+
this.unsubscribe = PlanetStore.listen(this.onListen)
21+
},
22+
componentWillUnmount: function () {
23+
this.unsubscribe()
24+
},
25+
onListen: function (res) {
26+
if (res.status === 'planetCreated') {
27+
this.props.close()
28+
}
29+
},
1630
handleSubmit: function () {
17-
console.log(this.state.planetName)
31+
PlanetActions.createPlanet({
32+
name: this.state.planetName
33+
})
34+
},
35+
handleKeyDown: function (e) {
36+
if (e.keyCode === 13 && e.metaKey) {
37+
this.handleSubmit()
38+
return
39+
}
40+
if (e.keyCode === 27) {
41+
this.props.close()
42+
}
1843
},
1944
stopPropagation: function (e) {
2045
e.stopPropagation()
2146
},
2247
render: function () {
2348
return (
24-
<div onClick={this.stopPropagation} className='PlanetCreateModal modal'>
25-
<input valueLink={this.linkState('planetName')} className='stripInput'/>
49+
<div tabIndex='3' onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='PlanetCreateModal modal'>
50+
<input ref='name' valueLink={this.linkState('planetName')} className='nameInput stripInput' placeholder='Crate new Planet'/>
2651
<button onClick={this.handleSubmit} className='submitButton'>
2752
<i className='fa fa-check'/>
2853
</button>

‎browser/main/Components/PlanetHeader.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,6 @@ var PlanetHeader = React.createClass({
1818
interceptClick: function (e) {
1919
e.stopPropagation()
2020
},
21-
handleKeyDown: function (e) {
22-
if (e.keyCode === 27) {
23-
React.findDOMNode(this.refs.search).blur()
24-
}
25-
},
2621
render: function () {
2722
var currentPlanetName = this.props.currentPlanet.name
2823
var currentUserName = this.props.currentUser.name
@@ -39,7 +34,7 @@ var PlanetHeader = React.createClass({
3934
<div className='headerControl'>
4035
<span className='searchInput'>
4136
<i className='fa fa-search'/>
42-
<input onKeyDown={this.handleKeyDown} onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
37+
<input onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
4338
</span>
4439
<a className='downloadButtton btn-primary'>Download Mac app</a>
4540
</div>

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,14 @@ module.exports = React.createClass({
6363
this.unsubscribe = PlanetStore.listen(this.onFetched)
6464

6565
PlanetActions.fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
66-
document.addEventListener('keydown', this.handleKeyDown)
6766
},
6867
componentWillUnmount: function () {
6968
this.unsubscribe()
70-
document.removeEventListener('keydown', this.handleKeyDown)
69+
},
70+
componentDidUpdate: function () {
71+
if (this.state.currentPlanet.planetName !== this.props.params.planetName) {
72+
PlanetActions.fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
73+
}
7174
},
7275
getFilteredIndexOfCurrentArticle: function () {
7376
var params = this.props.params
@@ -164,7 +167,19 @@ module.exports = React.createClass({
164167
if (this.refs.detail.props.article == null) {
165168
var params = this.props.params
166169
delete params.localId
167-
this.transitionTo('planetHome', params)
170+
171+
var articles = this.refs.list.props.articles
172+
if (articles.length > 0) {
173+
console.log('need to redirect', this.refs.list.props.articles)
174+
var article = articles[0]
175+
params.localId = article.localId
176+
177+
if (article.type === 'snippet') {
178+
this.transitionTo('snippets', params)
179+
} else {
180+
this.transitionTo('blueprints', params)
181+
}
182+
}
168183
}
169184
})
170185
return
@@ -234,18 +249,31 @@ module.exports = React.createClass({
234249
submitDeleteModal: function () {
235250
this.setState({isDeleteModalOpen: false})
236251
},
252+
focus: function () {
253+
React.findDOMNode(this).focus()
254+
console.log('focus this')
255+
},
237256
handleKeyDown: function (e) {
238257
// Bypath for modal open state
239258
if (this.state.isLaunchModalOpen) {
240-
if (e.keyCode === 27) this.closeLaunchModal()
259+
if (e.keyCode === 27) {
260+
this.closeLaunchModal()
261+
this.focus()
262+
}
241263
return
242264
}
243265
if (this.state.isEditModalOpen) {
244-
if (e.keyCode === 27) this.closeEditModal()
266+
if (e.keyCode === 27) {
267+
this.closeEditModal()
268+
this.focus()
269+
}
245270
return
246271
}
247272
if (this.state.isDeleteModalOpen) {
248-
if (e.keyCode === 27) this.closeDeleteModal()
273+
if (e.keyCode === 27) {
274+
this.closeDeleteModal()
275+
this.focus()
276+
}
249277
return
250278
}
251279

@@ -259,17 +287,18 @@ module.exports = React.createClass({
259287
var searchInput = React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input')
260288

261289
if (document.activeElement === searchInput) {
290+
console.log('fff', e.keyCode)
262291
switch (e.keyCode) {
263292
case 38:
264-
searchInput.blur()
293+
this.focus()
265294
break
266295
case 40:
267296
e.preventDefault()
268-
searchInput.blur()
297+
this.focus()
269298
break
270299
case 27:
271300
e.preventDefault()
272-
searchInput.blur()
301+
this.focus()
273302
break
274303
}
275304
return
@@ -349,7 +378,7 @@ module.exports = React.createClass({
349378
)) : null
350379

351380
return (
352-
<div className='PlanetContainer'>
381+
<div tabIndex='1' onKeyDown={this.handleKeyDown} className='PlanetContainer'>
353382
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
354383
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
355384
</ModalBase>

‎browser/main/Containers/UserContainer.jsx‎

Lines changed: 23 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,43 @@
1+
/* global localStorage */
12
var React = require('react/addons')
23
var ReactRouter = require('react-router')
3-
var Link = ReactRouter.Link
44
var RouteHandler = ReactRouter.RouteHandler
55

6+
var UserNavigator = require('../Components/UserNavigator')
7+
68
var AuthStore = require('../Stores/AuthStore')
9+
var PlanetStore = require('../Stores/PlanetStore')
710

8-
var UserNavigator = React.createClass({
9-
mixins: [ReactRouter.Navigation],
11+
module.exports = React.createClass({
12+
mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
1013
propTypes: {
11-
currentPlanet: React.PropTypes.object,
12-
currentUser: React.PropTypes.object
14+
params: React.PropTypes.shape({
15+
planetName: React.PropTypes.string
16+
})
17+
},
18+
getInitialState: function () {
19+
return {
20+
currentUser: AuthStore.getUser()
21+
}
1322
},
1423
componentDidMount: function () {
15-
this.unsubscribe = AuthStore.listen(this.onLogout)
24+
this.unsubscribe = PlanetStore.listen(this.onListen)
1625
},
1726
componentWillUnmount: function () {
1827
this.unsubscribe()
1928
},
20-
onLogout: function () {
21-
this.transitionTo('login')
22-
},
23-
render: function () {
24-
var planets = this.props.currentUser.Planets.map(function (planet, index) {
25-
return (
26-
<li key={planet.id} className={this.props.currentPlanet != null && this.props.currentPlanet.name === planet.name ? 'active' : ''}>
27-
<Link to='planet' params={{userName: this.props.currentUser.name, planetName: planet.name}} href>{planet.name[0]}</Link>
28-
<div className='shortCut'>⌘{index + 1}</div>
29-
</li>
30-
)
31-
}.bind(this))
32-
if (this.props.currentUser == null) {
33-
return (
34-
<div className='UserNavigator'>
35-
</div>
36-
)
37-
}
38-
39-
return (
40-
<div className='UserNavigator'>
41-
<Link to='userHome' params={{userName: this.props.currentUser.name}} className='userConfig'>
42-
<img width='50' height='50' src='../vendor/dummy.jpg'/>
43-
</Link>
44-
<ul>
45-
{planets}
46-
</ul>
47-
<button className='newPlanet'><i className='fa fa-plus'/></button>
48-
</div>
49-
)
50-
}
51-
})
29+
onListen: function (res) {
30+
if (res.status === 'planetCreated') {
31+
var currentUser = this.state.currentUser
32+
currentUser.Planets.push(res.data)
5233

53-
module.exports = React.createClass({
54-
mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
55-
propTypes: {
56-
params: React.PropTypes.shape({
57-
planetName: React.PropTypes.string
58-
})
34+
localStorage.setItem('user', JSON.stringify(currentUser))
35+
this.setState({currentUser: currentUser})
36+
}
5937
},
6038
render: function () {
6139
var currentPlanetName = this.props.params.planetName
62-
var currentUser = AuthStore.getUser()
40+
var currentUser = this.state.currentUser
6341

6442
// user must be logged in
6543
if (currentUser == null) return (<div></div>)

‎browser/main/Stores/PlanetStore.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var apiUrl = 'http://localhost:8000/'
88

99
var PlanetStore = Reflux.createStore({
1010
init: function () {
11+
this.listenTo(PlanetActions.createPlanet, this.createPlanet)
1112
this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet)
1213
this.listenTo(PlanetActions.createSnippet, this.createSnippet)
1314
this.listenTo(PlanetActions.updateSnippet, this.updateSnippet)
@@ -16,6 +17,31 @@ var PlanetStore = Reflux.createStore({
1617
this.listenTo(PlanetActions.updateBlueprint, this.updateBlueprint)
1718
this.listenTo(PlanetActions.deleteBlueprint, this.deleteBlueprint)
1819
},
20+
createPlanet: function (input) {
21+
request
22+
.post(apiUrl + 'planets/create')
23+
.set({
24+
Authorization: 'Bearer ' + localStorage.getItem('token')
25+
})
26+
.send(input)
27+
.end(function (err, res) {
28+
if (err) {
29+
console.error(err)
30+
this.trigger(null)
31+
return
32+
}
33+
34+
var planet = res.body
35+
planet.Snippets = []
36+
planet.Blueprints = []
37+
planet.Articles = []
38+
39+
this.trigger({
40+
status: 'planetCreated',
41+
data: planet
42+
})
43+
}.bind(this))
44+
},
1945
fetchPlanet: function (planetName) {
2046
request
2147
.get(apiUrl + planetName)

0 commit comments

Comments
 (0)