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