Extract App

public/components/app.js

@@ -0,0 +1,99 @@
+'use strict';
+var React = require('react');
+var $ = require('jquery');
+
+var DuplicateFinderBox = require('./duplicate-finder-box');
+var Authenticate = require('./authenticate');
+
+/**
+ * Obtains parameters from the hash of the URL
+ * @return Object
+ */
+function getHashParams() {
+    var hashParams = {};
+    var e, r = /([^&;=]+)=?([^&;]*)/g,
+        q = window.location.hash.substring(1);
+    while (e = r.exec(q)) {
+        hashParams[e[1]] = decodeURIComponent(e[2]);
+    }
+    return hashParams;
+}
+
+var App = React.createClass({
+    getInitialState: function () {
+        var params = getHashParams();
+        var access_token = params.access_token || null;
+        var refresh_token = params.refresh_token || null;
+
+        return {
+            access_token: access_token,
+            refresh_token: refresh_token,
+            playlists: null,
+            playlistsLoading: true
+        };
+    },
+    getPlaylists: function () {
+        this.setState({
+            playlistsLoading: true
+        });
+        var self = this;
+        $.ajax({
+            url: '/get_playlists',
+            data: {
+                'access_token': this.state.access_token
+            },
+            success: function (data) {
+                var pl = data.data;
+                self.setState({
+                    playlists: pl,
+                    playlistsLoading: false
+                });
+            },
+            error: function (xhr, response, err) {
+                console.error(response, err);
+            }
+        });
+    },
+    isLoggedIn: function () {
+        return !(this.state.access_token == null && this.state.refresh_token == null);
+    },
+    refreshAuth: function (access, refresh) {
+        this.setState({
+            access_token: access,
+            refresh_token: refresh
+        });
+
+        if (!(access == null && refresh == null)) {
+            this.getPlaylists();
+        }
+    },
+    componentDidMount: function () {
+        if (this.isLoggedIn()) {
+            this.getPlaylists();
+        }
+    },
+    render: function () {
+        var auth = {
+            access_token: this.state.access_token,
+            refresh_token: this.state.refresh_token
+        };
+        var content = <p>Please log in with Spotify :)</p>;
+        if (this.isLoggedIn()) {
+            var playlistsLoading = this.state.playlistsLoading;
+            content = (
+                <DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
+            );
+        }
+
+        return (
+            <div>
+                <Authenticate auth={auth} refreshAuth={this.refreshAuth}/>
+                <div className="container-fluid">
+                    {content}
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = App;

public/script.jsx

@@ -1,105 +1,8 @@
 'use strict';
-
-var $ = window.$ = window.jQuery = require('jquery');
-require('bootstrap');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var ReactBootstrap = require('react-bootstrap');
 
-/**
+var App = require('./components/app');
- * Obtains parameters from the hash of the URL
- * @return Object
- */
-function getHashParams() {
-    var hashParams = {};
-    var e, r = /([^&;=]+)=?([^&;]*)/g,
-        q = window.location.hash.substring(1);
-    while (e = r.exec(q)) {
-        hashParams[e[1]] = decodeURIComponent(e[2]);
-    }
-    return hashParams;
-}
-
-var DuplicateFinderBox = require('./components/duplicate-finder-box');
-
-var Authenticate = require('./components/authenticate');
-
-var App = React.createClass({
-    getInitialState: function () {
-        var params = getHashParams();
-        var access_token = params.access_token || null;
-        var refresh_token = params.refresh_token || null;
-
-        return {
-            access_token: access_token,
-            refresh_token: refresh_token,
-            playlists: null,
-            playlistsLoading: true
-        };
-    },
-    getPlaylists: function () {
-        this.setState({
-            playlistsLoading: true
-        });
-        var self = this;
-        $.ajax({
-            url: '/get_playlists',
-            data: {
-                'access_token': this.state.access_token
-            },
-            success: function (data) {
-                var pl = data.data;
-                self.setState({
-                    playlists: pl,
-                    playlistsLoading: false
-                });
-            },
-            error: function (xhr, response, err) {
-                console.error(response, err);
-            }
-        });
-    },
-    isLoggedIn: function () {
-        return !(this.state.access_token == null && this.state.refresh_token == null);
-    },
-    refreshAuth: function (access, refresh) {
-        this.setState({
-            access_token: access,
-            refresh_token: refresh
-        });
-
-        if (!(access == null && refresh == null)) {
-            this.getPlaylists();
-        }
-    },
-    componentDidMount: function () {
-        if (this.isLoggedIn()) {
-            this.getPlaylists();
-        }
-    },
-    render: function () {
-        var auth = {
-            access_token: this.state.access_token,
-            refresh_token: this.state.refresh_token
-        };
-        var content = <p>Please log in with Spotify :)</p>;
-        if (this.isLoggedIn()) {
-            var playlistsLoading = this.state.playlistsLoading;
-            content = (
-                <DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
-            );
-        }
-
-        return (
-            <div>
-                <Authenticate auth={auth} refreshAuth={this.refreshAuth}/>
-                <div className="container-fluid">
-                    {content}
-                </div>
-            </div>
-        );
-    }
-});
 
 ReactDOM.render(
     <App />,