Playlists code refactor

This commit is contained in:
Gabriel Augendre 2016-04-22 17:52:59 +02:00
parent e7ec62815f
commit 337c7cecae
2 changed files with 11 additions and 7 deletions

View file

@ -20,7 +20,7 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script type="text/babel" src="./script.js"></script>
<script type="text/babel" src="script.jsx"></script>
</body>
</html>

View file

@ -60,25 +60,29 @@ var PlaylistBox = React.createClass({
currentId: null
};
},
clickOnItem: function (id, uid) {
clickOnItem: function (id, uid, event) {
event.preventDefault();
this.setState({currentId: id});
this.props.handleClick(id, uid);
},
render: function () {
var ListGroup = ReactBootstrap.ListGroup;
var ListGroup = ReactBootstrap.ListGroup,
ListGroupItem = ReactBootstrap.ListGroupItem;
var currentId = this.state.currentId;
var playlists = <p>No playlist found.</p>;
if (this.props.playlists) {
playlists = this.props.playlists.map(function (pl) {
var id = pl.id;
var classes = "list-group-item" + (currentId == id ? " active" : "");
var classes = currentId == id ? "active" : "";
return (
<a onClick={this.clickOnItem.bind(this, id, pl.owner.id)} className={classes} key={id}>{pl.name}</a>
<ListGroupItem href="#" onClick={this.clickOnItem.bind(this, id, pl.owner.id)} className={classes} key={id}>{pl.name}</ListGroupItem>
);
}, this);
}
return (
<ListGroup className="playListBox">
<ListGroup>
{playlists}
</ListGroup>
);
@ -150,7 +154,7 @@ var DuplicateFinderBox = React.createClass({
}
return (
<Row className="duplicateFinderBox">
<Row>
<Col md={3} sm={4}>
<h2>Playlists</h2>
{playlistBox}