Skip to content

Commit c2fcc72

Browse files
Rokt33rRokt33r
committed
add SnippetEditModal
1 parent ec686c9 commit c2fcc72

9 files changed

Lines changed: 148 additions & 37 deletions

File tree

‎browser/main/Actions/PlanetActions.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ var Reflux = require('reflux')
22

33
module.exports = Reflux.createActions([
44
'fetchPlanet',
5+
56
'createSnippet',
6-
'createBlueprint',
77
'updateSnippet',
8-
'updateBlueprint',
98
'destroySnippet',
9+
10+
'createBlueprint',
11+
'updateBlueprint',
1012
'destroyBlueprint'
1113
])

‎browser/main/Components/LaunchModal.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ var LaunchModal = React.createClass({
3030
break
3131
}
3232
},
33-
handleClick: function (e) {
33+
stopPropagation: function (e) {
3434
e.stopPropagation()
3535
},
3636
selectSnippetTab: function () {
@@ -60,9 +60,9 @@ var LaunchModal = React.createClass({
6060
}
6161

6262
return (
63-
<div onClick={this.handleClick} className='modal launch-modal'>
63+
<div onClick={this.stopPropagation} className='modal launch-modal'>
6464
<div className='modal-header'>
65-
<div className='modal-tab form-group'>
65+
<div className='modal-tab'>
6666
<button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button><button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>
6767
</div>
6868
</div>

‎browser/main/Components/SnippetEditModal.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var React = require('react')
2+
var SnippetForm = require('./SnippetForm')
3+
var PlanetStore = require('../Stores/PlanetStore')
4+
5+
var SnippetEditModal = React.createClass({
6+
propTypes: {
7+
close: React.PropTypes.func,
8+
snippet: React.PropTypes.object
9+
},
10+
componentDidMount: function () {
11+
this.unsubscribe = PlanetStore.listen(this.onListen)
12+
},
13+
componentWillUnmount: function () {
14+
this.unsubscribe()
15+
},
16+
onListen: function (res) {
17+
switch (res.status) {
18+
case 'snippetUpdated':
19+
this.props.close()
20+
break
21+
}
22+
},
23+
stopPropagation: function (e) {
24+
e.stopPropagation()
25+
},
26+
render: function () {
27+
return (
28+
<div onClick={this.stopPropagation} className='SnippetEditModal modal'>
29+
<div className='modal-header'>
30+
<h1>Edit Snippet</h1>
31+
</div>
32+
<SnippetForm snippet={this.props.snippet} close={this.props.close}/>
33+
</div>
34+
)
35+
}
36+
})
37+
38+
module.exports = SnippetEditModal

‎browser/main/Components/SnippetForm.jsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,19 @@ var getOptions = function (input, callback) {
3131
var SnippetForm = React.createClass({
3232
mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
3333
propTypes: {
34-
close: React.PropTypes.func
34+
close: React.PropTypes.func,
35+
snippet: React.PropTypes.object
3536
},
3637
getInitialState: function () {
38+
var snippet = Object.assign({
39+
description: '',
40+
mode: 'javascript',
41+
content: '',
42+
callSign: '',
43+
Tags: []
44+
}, this.props.snippet)
3745
return {
38-
snippet: {
39-
description: '',
40-
mode: 'javascript',
41-
content: '',
42-
callSign: '',
43-
Tags: []
44-
}
46+
snippet: snippet
4547
}
4648
},
4749
componentDidMount: function () {
@@ -58,14 +60,22 @@ var SnippetForm = React.createClass({
5860
this.setState({snippet: snippet})
5961
},
6062
submit: function () {
61-
var params = this.getParams()
62-
var userName = params.userName
63-
var planetName = params.planetName
6463
var snippet = Object.assign({}, this.state.snippet)
6564
snippet.Tags = snippet.Tags.map(function (tag) {
6665
return tag.value
6766
})
68-
PlanetActions.createSnippet(userName + '/' + planetName, snippet)
67+
if (this.props.snippet == null) {
68+
var params = this.getParams()
69+
var userName = params.userName
70+
var planetName = params.planetName
71+
72+
PlanetActions.createSnippet(userName + '/' + planetName, snippet)
73+
} else {
74+
var snippetId = snippet.id
75+
delete snippet.id
76+
77+
PlanetActions.updateSnippet(snippetId, snippet)
78+
}
6979
},
7080
render: function () {
7181
return (

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ var ReactRouter = require('react-router')
33
var ModalBase = require('../Components/ModalBase')
44
var LaunchModal = require('../Components/LaunchModal')
55
var CodeViewer = require('../Components/CodeViewer')
6+
var SnippetEditModal = require('../Components/SnippetEditModal')
67

78
var AuthStore = require('../Stores/AuthStore')
89
var PlanetStore = require('../Stores/PlanetStore')
@@ -160,6 +161,20 @@ var PlanetArticleDetail = React.createClass({
160161
propTypes: {
161162
snippet: React.PropTypes.object
162163
},
164+
getInitialState: function () {
165+
return {
166+
isEditModalOpen: false
167+
}
168+
},
169+
openEditModal: function () {
170+
this.setState({isEditModalOpen: true})
171+
},
172+
closeEditModal: function () {
173+
this.setState({isEditModalOpen: false})
174+
},
175+
submitEditModal: function () {
176+
this.setState({isEditModalOpen: false})
177+
},
163178
render: function () {
164179
var snippet = this.props.snippet
165180

@@ -174,9 +189,13 @@ var PlanetArticleDetail = React.createClass({
174189
<div className='viewer-header'>
175190
<i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small>
176191
<span className='control-group'>
177-
<button className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
192+
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
178193
<button className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
179194
</span>
195+
196+
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
197+
<SnippetEditModal snippet={snippet} submit={this.submitEditModal} close={this.closeEditModal}/>
198+
</ModalBase>
180199
</div>
181200
<div className='viewer-body'>
182201
<div className='viewer-detail'>
@@ -212,6 +231,9 @@ module.exports = React.createClass({
212231
this.unsubscribe()
213232
},
214233
onFetched: function (res) {
234+
var snippets = this.state.currentPlanet == null ? null : this.state.currentPlanet.Snippets
235+
var snippet = res.data
236+
215237
switch (res.status) {
216238
case 'planetFetched':
217239
var planet = res.data
@@ -225,18 +247,26 @@ module.exports = React.createClass({
225247
})
226248
break
227249
case 'snippetCreated':
228-
var snippet = res.data
229-
230250
if (snippet.PlanetId === this.state.currentPlanet.id) {
231-
var snippets = this.state.currentPlanet.Snippets
232251
snippets.unshift(snippet)
233252
this.setState({planet: this.state.currentPlanet}, function () {
234253
var params = this.getParams()
235254
params.localId = snippet.localId
236255
this.transitionTo('snippets', params)
237256
})
238257
}
239-
258+
break
259+
case 'snippetUpdated':
260+
if (snippet.PlanetId === this.state.currentPlanet.id) {
261+
snippets.some(function (_snippet, index) {
262+
if (_snippet.id === snippet.id) {
263+
snippets[index] = snippet
264+
this.setState({snippets: snippets})
265+
return true
266+
}
267+
return false
268+
}.bind(this))
269+
}
240270
}
241271

242272
},

‎browser/main/Stores/PlanetStore.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var PlanetStore = Reflux.createStore({
88
init: function () {
99
this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet)
1010
this.listenTo(PlanetActions.createSnippet, this.createSnippet)
11+
this.listenTo(PlanetActions.updateSnippet, this.updateSnippet)
1112
},
1213
fetchPlanet: function (planetName) {
1314
request
@@ -47,6 +48,27 @@ var PlanetStore = Reflux.createStore({
4748
data: res.body
4849
})
4950
}.bind(this))
51+
},
52+
updateSnippet: function (id, input) {
53+
request
54+
.put('http://localhost:8000/snippets/id/' + id)
55+
.set({
56+
Authorization: 'Bearer ' + localStorage.getItem('token')
57+
})
58+
.send(input)
59+
.end(function (err, res) {
60+
if (err) {
61+
console.error(err)
62+
this.trigger(null)
63+
return
64+
}
65+
66+
var snippet = res.body
67+
this.trigger({
68+
status: 'snippetUpdated',
69+
data: snippet
70+
})
71+
}.bind(this))
5072
}
5173
})
5274

‎browser/styles/main/containers/PlanetContainer.styl‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@
129129
overflow-y auto
130130
li
131131
.snippetItem
132+
user-select none
132133
border solid 2px transparent
133134
padding 10px
134135
cursor pointer
@@ -155,7 +156,7 @@
155156
absolute right bottom
156157
top 65px
157158
left 450px
158-
.viewer-header
159+
&>.viewer-header
159160
height 44px
160161
line-height 44px
161162
padding 0 15px

‎browser/styles/main/index.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ button
3838
text-align center
3939

4040
.form-group
41-
margin-bottom 20px
41+
margin-bottom 15px
4242
&>label
4343
display block
4444
margin-bottom 5px

‎browser/styles/shared/modal.styl‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
overflow-y auto
55
overflow-x auto
66
background-color modalBaseColor
7+
line-height 100%
78
&.hide
89
display none
910
.modal
@@ -14,6 +15,12 @@
1415
border-radius 10px
1516
padding 15px
1617
box-shadow popupShadow
18+
.modal-header
19+
border-bottom solid 1px borderColor
20+
margin-bottom 15px
21+
h1
22+
padding: 10px 0 15px;
23+
font-size: 1.5em;
1724
.modal-footer
1825
clearfix()
1926
border-top solid 1px borderColor
@@ -24,6 +31,7 @@
2431
.launch-modal
2532
.modal-tab
2633
text-align center
34+
margin-bottom 15px
2735
.btn-primary, .btn-default
2836
margin 0
2937
border-radius 0
@@ -37,17 +45,17 @@
3745
border-left none
3846
border-top-right-radius 10px
3947
border-bottom-right-radius 10px
40-
textarea.snippetDescription
41-
height 75px
42-
.Select
48+
textarea.snippetDescription
49+
height 75px
50+
.Select
51+
.Select-control
52+
border-color borderColor
53+
&.is-focused
4354
.Select-control
44-
border-color borderColor
45-
&.is-focused
46-
.Select-control
47-
border-color brandBorderColor
48-
.Select-menu-outer
49-
border-color borderColor
50-
.ace_editor
51-
height 250px
52-
border-radius 5px
53-
border solid 1px borderColor
55+
border-color brandBorderColor
56+
.Select-menu-outer
57+
border-color borderColor
58+
.ace_editor
59+
height 250px
60+
border-radius 5px
61+
border solid 1px borderColor

0 commit comments

Comments
 (0)