Playlists code refactor

public/index.html

@@ -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>
 

public/script.jsx

@@ -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}