Extract PlaylistBox

public/components/playlist-box.js

@@ -0,0 +1,39 @@
+'use strict';
+var React = require('react');
+var ReactBootstrap = require('react-bootstrap');
+
+var PlaylistBox = React.createClass({
+    getInitialState: function () {
+        return {
+            currentId: null
+        };
+    },
+    clickOnItem: function (id, uid, event) {
+        event.preventDefault();
+        this.setState({currentId: id});
+        this.props.handleClick(id, uid);
+    },
+    render: function () {
+        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;
+                return (
+                    <ListGroupItem href="#" onClick={this.clickOnItem.bind(this, id, pl.owner.id)} active={currentId == id} key={id}>{pl.name}</ListGroupItem>
+                );
+            }, this);
+        }
+
+        return (
+            <ListGroup>
+                {playlists}
+            </ListGroup>
+        );
+    }
+});
+
+module.exports = PlaylistBox;

public/script.jsx

@@ -20,42 +20,9 @@ function getHashParams() {
     return hashParams;
 }
 
-var DuplicatesBox = require('./components/dups/duplicates-box');
+var DuplicatesBox = require('./components/duplicates-box');
 
-
+var PlaylistBox = require('./components/playlist-box');
-var PlaylistBox = React.createClass({
-    getInitialState: function () {
-        return {
-            currentId: null
-        };
-    },
-    clickOnItem: function (id, uid, event) {
-        event.preventDefault();
-        this.setState({currentId: id});
-        this.props.handleClick(id, uid);
-    },
-    render: function () {
-        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;
-                return (
-                    <ListGroupItem href="#" onClick={this.clickOnItem.bind(this, id, pl.owner.id)} active={currentId == id} key={id}>{pl.name}</ListGroupItem>
-                );
-            }, this);
-        }
-
-        return (
-            <ListGroup>
-                {playlists}
-            </ListGroup>
-        );
-    }
-});
 
 var DuplicateFinderBox = React.createClass({
     getInitialState: function () {