'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 ListGroupItem = ReactBootstrap.ListGroupItem; var authors = ""; this.props.track.artists.forEach(function (item, index) { if (index != 0) { authors += ', '; } authors += item.name; }); return ( {this.props.track.name} - {authors} ); } }); 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 ( ); }); return ( {duplicates} ); } else { return (

No duplicate found

); } } }); 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 =

No playlist found.

; if (this.props.playlists) { playlists = this.props.playlists.map(function (pl) { var id = pl.id; return ( {pl.name} ); }, this); } return ( {playlists} ); } }); 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 =

Loading...

; if (!this.state.dupsLoading) { duplicates = ; } duplicates = (

Duplicates

{duplicates} ) } var playlistBox =

Loading...

; if (!this.props.playlistsLoading) { playlistBox = ; } return (

Playlists

{playlistBox} {duplicates}
); } }); 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 = ( ); } else { auth = ( ); } return ( Duplicate Finder {auth} ); } }); 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 (
{content}
); } }); ReactDOM.render( , document.getElementById('content') );