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 Duplicate = require('./components/Duplicate');

var DuplicatesBox = React.createClass({
    render: function () {
        var ListGroup = ReactBootstrap.ListGroup;
        if (this.props.dups && this.props.dups.length > 0) {
            var duplicates = this.props.dups.map(function (duplicate) {
                return (
                    <Duplicate track={duplicate.track} key={duplicate.track.id}/>
                );
            });
            return (
                <ListGroup>
                    {duplicates}
                </ListGroup>
            );
        }
        else {
            return (
                <p>No duplicate found</p>
            );
        }
    }
});


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 () {
        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 Authenticate = React.createClass({
    logout: function () {
        this.props.refreshAuth(null, null);
    },
    refreshToken: function (event) {
        event.preventDefault();
        var self = this;
        $.ajax({
            url: '/refresh_token',
            data: {
                'refresh_token': self.props.auth.refresh_token
            },
            success: function (data) {
                self.props.refreshAuth(data.access_token, self.props.auth.refresh_token);
            },
            error: function (xhr, status, err) {
                console.error(status, err);
            }
        });
    },
    render: function () {
        var auth;
        var Nav = ReactBootstrap.Nav,
            NavItem = ReactBootstrap.NavItem,
            Navbar = ReactBootstrap.Navbar;

        if (this.props.auth.access_token == null) {
            auth = (
                <Nav pullRight>
                    <NavItem eventKey={1} href="/login"><strong>Login With Spotify</strong></NavItem>
                </Nav>
            );
        }
        else {
            auth = (
                <Nav pullRight>
                    <NavItem eventKey={2} onClick={this.refreshToken} href="#">Refresh my token</NavItem>
                    <NavItem eventKey={3} onClick={this.logout} href="#"><strong>Logout</strong></NavItem>
                </Nav>
            );
        }

        return (
            <Navbar fluid={true}>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="#">Duplicate Finder</a>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <NavItem eventKey={1} href="#" active>Finder</NavItem>
                    </Nav>
                    {auth}
                </Navbar.Collapse>
            </Navbar>
        );
    }
});

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')
);