diff --git a/public/components/app.js b/public/components/app.js
new file mode 100644
index 0000000..7b86cdc
--- /dev/null
+++ b/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 =
Please log in with Spotify :)
;
+ if (this.isLoggedIn()) {
+ var playlistsLoading = this.state.playlistsLoading;
+ content = (
+
+ );
+ }
+
+ return (
+
+ );
+ }
+});
+
+module.exports = App;
diff --git a/public/script.jsx b/public/script.jsx
index e8282c4..fc0e105 100644
--- a/public/script.jsx
+++ b/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');
-/**
- * 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 = Please log in with Spotify :)
;
- if (this.isLoggedIn()) {
- var playlistsLoading = this.state.playlistsLoading;
- content = (
-
- );
- }
-
- return (
-
- );
- }
-});
+var App = require('./components/app');
ReactDOM.render(
,