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

Prevent users from querying playlists while fetching data

Browse source
This commit is contained in:
Gabriel Augendre 2016-04-25 21:05:21 +02:00
parent 5deb596169
commit ab74cc77c3
No known key found for this signature in database
GPG key ID: D2B6A5B41FC438B1
3 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/public/components/duplicate-finder-box.js
View file

@ -13,7 +13,8 @@ var DuplicateFinderBox = React.createClass({
currentUId: null, currentUId: null,
dups: null, dups: null,
dupsLoading: false, dupsLoading: false,
clicked: false clicked: false,
title: null
}; };
}, },
componentWillReceiveProps: function () { componentWillReceiveProps: function () {
@ -21,12 +22,13 @@ var DuplicateFinderBox = React.createClass({
clicked: false clicked: false
}); });
}, },
handlePlaylistClick: function (id, uid) { handlePlaylistClick: function (id, uid, title) {
this.setState({ this.setState({
currentId: id, currentId: id,
currentUId: uid, currentUId: uid,
dupsLoading: true, dupsLoading: true,
clicked: true clicked: true,
title: title
}); });
var self = this; var self = this;
@ -59,7 +61,7 @@ var DuplicateFinderBox = React.createClass({
} }
duplicates = ( duplicates = (
<Col md={9} sm={8}> <Col md={9} sm={8}>
<h2>Duplicates</h2> <h2>Duplicates in {this.state.title}</h2>
{duplicates} {duplicates}
</Col> </Col>
) )
@ -67,7 +69,7 @@ var DuplicateFinderBox = React.createClass({
var playlistBox = <p>Loading...</p>; var playlistBox = <p>Loading...</p>;
if (!this.props.playlistsLoading) { if (!this.props.playlistsLoading) {
playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>; playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} dupsLoading={this.state.dupsLoading} playlists={this.props.playlists}/>;
} }
return ( return (

16
src/public/components/playlist-box.js
View file

@ -10,8 +10,10 @@ var PlaylistBox = React.createClass({
}, },
clickOnItem: function (id, uid, event) { clickOnItem: function (id, uid, event) {
event.preventDefault(); event.preventDefault();
this.setState({currentId: id}); if (!this.props.dupsLoading) {
this.props.handleClick(id, uid); this.setState({currentId: id});
this.props.handleClick(id, uid);
}
}, },
render: function () { render: function () {
var ListGroup = ReactBootstrap.ListGroup, var ListGroup = ReactBootstrap.ListGroup,
@ -22,8 +24,16 @@ var PlaylistBox = React.createClass({
if (this.props.playlists) { if (this.props.playlists) {
playlists = this.props.playlists.map(function (pl) { playlists = this.props.playlists.map(function (pl) {
var id = pl.id; var id = pl.id;
var active = currentId == id;
var classes = this.props.dupsLoading ? "disabled" : "";
return ( return (
<ListGroupItem href="#" onClick={this.clickOnItem.bind(this, id, pl.owner.id)} active={currentId == id} key={id}>{pl.name}</ListGroupItem> <ListGroupItem href="#"
onClick={this.clickOnItem.bind(this, id, pl.owner.id)}
className={classes}
active={active}
key={id}>
{pl.name}
</ListGroupItem>
); );
}, this); }, this);
} }

2
src/public/index.html
View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>DAVIDS &bull; DuplicAtes VIewer and Detector for Spotify</title> <title>DAVIDS &bull; DuplicAtes VIewer and Detector for Spotify</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head> </head>