DAVIDS/public/script.js

'use strict';

/**
 * 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 = React.createClass({
    render: function () {
        var authors = "";
        this.props.track.artists.forEach(function (item, index) {
            if (index != 0) {
                authors += ', ';
            }
            authors += item.name;
        });
        return (
            <div className="list-group-item">{this.props.track.name} - {authors}</div>
        );
    }
});

var DuplicatesBox = React.createClass({
    render: function () {
        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 (
                <div className="duplicatesBox list-group">
                    {duplicates}
                </div>
            );
        }
        else {
            return (
                <p>No duplicate found</p>
            );
        }
    }
});


var PlaylistBox = React.createClass({
    getInitialState: function () {
        return {
            currentId: null
        };
    },
    clickOnItem: function (id, uid) {
        this.setState({currentId: id});
        this.props.handleClick(id, uid);
    },
    render: function () {
        var currentId = this.state.currentId;
        var playlists;
        if (this.props.playlists) {
            playlists = this.props.playlists.map(function (pl) {
                var id = pl.id;
                var classes = "list-group-item" + (currentId == id ? " active" : "");
                return (
                    <a onClick={this.clickOnItem.bind(this, id, pl.owner.id)} className={classes} key={id}>{pl.name}</a>
                );
            }, this);
        }
        return (
            <div className="playListBox list-group">
                {playlists}
            </div>
        );
    }
});

var DuplicateFinderBox = React.createClass({
    getInitialState: function () {
        return {
            currentId: null,
            currentUId: null,
            dups: null,
            dupsLoading: false,
            clicked: false
        };
    },
    componentWillReceiveProps: function (nextProps) {
        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;
        if (this.state.clicked) {
            duplicates = <p>Loading...</p>;
            if (!this.state.dupsLoading) {
                duplicates = <DuplicatesBox dups={this.state.dups}/>;
            }
            duplicates = (
                <div className="col-md-6">
                    <h2>Duplicates</h2>
                    {duplicates}
                </div>
            )
        }
        var playlistBox = <p>Loading...</p>;
        if (!this.props.playlistsLoading) {
            playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>;
        }
        return (
            <div className="duplicateFinderBox">
                <div className="col-md-3">
                    <h2>Playlists</h2>
                    {playlistBox}
                </div>
                {duplicates}
            </div>
        );
    }
});

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;
        if (this.props.auth.access_token == null) {
            auth = (
                <ul className="nav navbar-nav navbar-right">
                    <li>
                        <a href="/login"><strong>Login With Spotify</strong></a>
                    </li>
                </ul>
            );
        }
        else {
            auth = (
                <ul className="nav navbar-nav navbar-right">
                    <li>
                        <a href="#" onClick={this.refreshToken}>Refresh my token</a>
                    </li>
                    <li>
                        <a href="#" onClick={this.logout}><strong>Logout</strong></a>
                    </li>
                </ul>
            );
        }

        return (
            <nav className="navbar navbar-default navbar-static-top" role="navigation">
                <div className="container-fluid">
                    <button type="button" className="navbar-toggle" data-toggle="collapse"
                            data-target=".navbar-ex1-collapse">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </button>
                    <div className="navbar-header">
                        <a className="navbar-brand" href="#">DuplicateFinder</a>
                    </div>

                    <div className="collapse navbar-collapse navbar-ex1-collapse">
                        <ul className="nav navbar-nav">
                            <li className="active"><a href="#">Finder</a></li>
                        </ul>
                        {auth}
                    </div>
                </div>
            </nav>
        );
    }
});

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