This repository has been archived by the owner on Feb 20, 2020. It is now read-only.
/
playlist_form.jsx
100 lines (81 loc) · 2.5 KB
/
playlist_form.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
var React = require("react");
var Modal = require("react-bootstrap").Modal;
var Row = require("react-bootstrap").Row;
var Col = require("react-bootstrap").Col;
var Input = require("react-bootstrap").Input;
var Button = require("react-bootstrap").Button;
var PlaylistModalsStore = require("../../stores/playlist_modals_store");
var PlaylistActions = require("../../actions/playlist_actions");
var AddedTrack = require("./added_track");
var LinkedStateMixin = require("react-addons-linked-state-mixin");
var History = require("react-router").History;
module.exports = React.createClass({
mixins: [LinkedStateMixin, History],
getInitialState: function () {
return { title: "" };
},
componentDidMount: function () {
this.listenerToken = PlaylistModalsStore.addListener(this._onChange);
},
componentDidUpdate: function () {
var pathname = this.state.pathname;
if (pathname) {
this.setState(this.getInitialState());
this.history.pushState(null, pathname);
}
},
componentWillUnmount: function () {
this.listenerToken.remove();
},
_onChange: function () {
this.setState({
isSaving: PlaylistModalsStore.isSaving(),
pathname: PlaylistModalsStore.getUserPlaylistPathname(),
});
},
_buttonState: function () {
return (this.state.isSaving ? "Saving..." : "Save");
},
_disabled: function () {
return (this.state.isSaving) || (this.state.title === "");
},
_handleSubmit: function (e) {
e.preventDefault();
this.createPlaylist();
},
createPlaylist: function () {
var playlistData = {
title: this.state.title,
track_ids: [this.props.track.id]
}
PlaylistActions.createPlaylist(playlistData);
},
reset: function () {
this.setState(this.getInitialState);
this.props.close();
},
titleLabel: function () {
return <span className="required-label">Title</span>;
},
render: function () {
return (
<form onSubmit={ this._handleSubmit }>
<Modal.Body>
<Input type="text"
label={ this.titleLabel() }
placeholder="Name your new playlist"
valueLink={ this.linkState("title") } />
<AddedTrack track={ this.props.track } />
</Modal.Body>
<Modal.Footer>
<Button onClick={ this.reset }>Cancel</Button>
<Button bsStyle="primary"
disabled={ this._disabled() }
type="submit">
{ this._buttonState() }
</Button>
</Modal.Footer>
</form>
);
}
});