Extract DuplicateFinderBox

public/components/duplicate-finder-box.js

@@ -0,0 +1,84 @@
+'use strict';
+var React = require('react');
+var ReactBootstrap = require('react-bootstrap');
+
+var DuplicatesBox = require('./duplicates-box');
+var PlaylistBox = require('./playlist-box');
+
+var DuplicateFinderBox = React.createClass({
+    getInitialState: function () {
+        return {
+            currentId: null,
+            currentUId: null,
+            dups: null,
+            dupsLoading: false,
+            clicked: false
+        };
+    },
+    componentWillReceiveProps: function () {
+        this.setState({
+            clicked: false
+        });
+    },
+    handlePlaylistClick: function (id, uid) {
+        this.setState({
+            currentId: id,
+            currentUId: uid,
+            dupsLoading: true,
+            clicked: true
+        });
+        var self = this;
+
+        $.ajax({
+            url: "/pl/" + uid + "/" + id,
+            data: {
+                'access_token': self.props.auth.access_token
+            },
+            success: function (data) {
+                var dups = data.data;
+                self.setState({
+                    dups: dups,
+                    dupsLoading: false
+                });
+            },
+            error: function (xhr, response, err) {
+                console.error(response, err);
+            }
+        });
+    },
+    render: function () {
+        var duplicates;
+        var Col = ReactBootstrap.Col,
+            Row = ReactBootstrap.Row;
+
+        if (this.state.clicked) {
+            duplicates = <p>Loading...</p>;
+            if (!this.state.dupsLoading) {
+                duplicates = <DuplicatesBox dups={this.state.dups}/>;
+            }
+            duplicates = (
+                <Col md={9} sm={8}>
+                    <h2>Duplicates</h2>
+                    {duplicates}
+                </Col>
+            )
+        }
+
+        var playlistBox = <p>Loading...</p>;
+        if (!this.props.playlistsLoading) {
+            playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>;
+        }
+
+        return (
+            <Row>
+                <Col md={3} sm={4}>
+                    <h2>Playlists</h2>
+                    {playlistBox}
+                </Col>
+                {duplicates}
+            </Row>
+        );
+    }
+});
+
+module.exports = DuplicateFinderBox;

public/script.jsx

@@ -20,85 +20,7 @@ function getHashParams() {
     return hashParams;
 }
 
-var DuplicatesBox = require('./components/duplicates-box');
-
-var PlaylistBox = require('./components/playlist-box');
-
-var DuplicateFinderBox = React.createClass({
-    getInitialState: function () {
-        return {
-            currentId: null,
-            currentUId: null,
-            dups: null,
-            dupsLoading: false,
-            clicked: false
-        };
-    },
-    componentWillReceiveProps: function () {
-        this.setState({
-            clicked: false
-        });
-    },
-    handlePlaylistClick: function (id, uid) {
-        this.setState({
-            currentId: id,
-            currentUId: uid,
-            dupsLoading: true,
-            clicked: true
-        });
-        var self = this;
-
-        $.ajax({
-            url: "/pl/" + uid + "/" + id,
-            data: {
-                'access_token': self.props.auth.access_token
-            },
-            success: function (data) {
-                var dups = data.data;
-                self.setState({
-                    dups: dups,
-                    dupsLoading: false
-                });
-            },
-            error: function (xhr, response, err) {
-                console.error(response, err);
-            }
-        });
-    },
-    render: function () {
-        var duplicates;
-        var Col = ReactBootstrap.Col,
-            Row = ReactBootstrap.Row;
-
-        if (this.state.clicked) {
-            duplicates = <p>Loading...</p>;
-            if (!this.state.dupsLoading) {
-                duplicates = <DuplicatesBox dups={this.state.dups}/>;
-            }
-            duplicates = (
-                <Col md={9} sm={8}>
-                    <h2>Duplicates</h2>
-                    {duplicates}
-                </Col>
-            )
-        }
-
-        var playlistBox = <p>Loading...</p>;
-        if (!this.props.playlistsLoading) {
-            playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>;
-        }
-
-        return (
-            <Row>
-                <Col md={3} sm={4}>
-                    <h2>Playlists</h2>
-                    {playlistBox}
-                </Col>
-                {duplicates}
-            </Row>
-        );
-    }
-});
+var DuplicateFinderBox = require('./components/duplicate-finder-box');
 
 var Authenticate = React.createClass({
     logout: function () {