gaugendre/DAVIDS
1
0
Fork 0
Code Issues Pull requests Releases Activity

Show when loading playlists

Browse source
This commit is contained in:
Gabriel Augendre 2016-04-21 02:02:16 +02:00
parent 2093e1c86b
commit 1990f0e58a
1 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
public/script.js
View file

@ -88,14 +88,14 @@ var DuplicateFinderBox = React.createClass({
currentId: null, currentId: null,
currentUId: null, currentUId: null,
dups: null, dups: null,
loading: false dupsLoading: false
}; };
}, },
handlePlaylistClick: function (id, uid) { handlePlaylistClick: function (id, uid) {
this.setState({ this.setState({
currentId: id, currentId: id,
currentUId: uid, currentUId: uid,
loading: true dupsLoading: true
}); });
var self = this; var self = this;
@ -108,7 +108,7 @@ var DuplicateFinderBox = React.createClass({
var dups = data.data; var dups = data.data;
self.setState({ self.setState({
dups: dups, dups: dups,
loading: false dupsLoading: false
}); });
}, },
error: function (xhr, response, err) { error: function (xhr, response, err) {
@ -118,21 +118,25 @@ var DuplicateFinderBox = React.createClass({
}, },
render: function () { render: function () {
var duplicates = <p>Loading...</p>; var duplicates = <p>Loading...</p>;
if (!this.state.loading) { if (!this.state.dupsLoading) {
duplicates = <DuplicatesBox dups={this.state.dups}/>; duplicates = <DuplicatesBox dups={this.state.dups}/>;
} }
var playlistBox = <p>Loading...</p>;
if (!this.props.playlistsLoading) {
playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>;
}
return ( return (
<div className="duplicateFinderBox"> <div className="duplicateFinderBox">
<div className="col-md-3"> <div className="col-md-3">
<h2>Playlists</h2> <h2>Playlists</h2>
<PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/> {playlistBox}
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<h2>Duplicates</h2> <h2>Duplicates</h2>
{duplicates} {duplicates}
</div> </div>
</div> </div>
) );
} }
}); });
@ -215,10 +219,14 @@ var App = React.createClass({
return { return {
access_token: access_token, access_token: access_token,
refresh_token: refresh_token, refresh_token: refresh_token,
playlists: null playlists: null,
playlistsLoading: true
}; };
}, },
getPlaylists: function () { getPlaylists: function () {
this.setState({
playlistsLoading: true
});
var self = this; var self = this;
$.ajax({ $.ajax({
url: '/get_playlists', url: '/get_playlists',
@ -228,7 +236,8 @@ var App = React.createClass({
success: function (data) { success: function (data) {
var pl = data.data; var pl = data.data;
self.setState({ self.setState({
playlists: pl playlists: pl,
playlistsLoading: false
}); });
}, },
error: function (xhr, response, err) { error: function (xhr, response, err) {
@ -261,8 +270,9 @@ var App = React.createClass({
}; };
var content = <p>Please log in with Spotify :)</p>; var content = <p>Please log in with Spotify :)</p>;
if (this.isLoggedIn()) { if (this.isLoggedIn()) {
var playlistsLoading = this.state.playlistsLoading;
content = ( content = (
<DuplicateFinderBox auth={auth} playlists={this.state.playlists}/> <DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
); );
} }