DAVIDS/public/script.jsx

'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 = <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 />,
    document.getElementById('content')
);