2016-04-17 17:38:58 +02:00
|
|
|
'use strict';
|
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var data = [
|
|
|
|
{id: 1, name: "Mine"},
|
|
|
|
{id: 2, name: "Other"},
|
|
|
|
{id: 3, name: "A third"}
|
|
|
|
];
|
2016-04-17 19:37:16 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var dups = [
|
|
|
|
{
|
|
|
|
track: {
|
|
|
|
album: {
|
|
|
|
id: "53fWaWYPGghRHppKdD7A2S",
|
|
|
|
name: "El Taxi (feat. Pitbull, Sensato)"
|
|
|
|
},
|
|
|
|
artists: [
|
|
|
|
{
|
|
|
|
id: "6W0XSFVBD0xJlJhahPSlKZ",
|
|
|
|
name: "Osmani Garcia"
|
|
|
|
}, {
|
|
|
|
id: "0TnOYISbd1XYRBk9myaseg",
|
|
|
|
name: "Pitbull"
|
|
|
|
}, {
|
|
|
|
id: "7iJrDbKM5fEkGdm5kpjFzS"
|
2016-04-17 20:05:11 +02:00
|
|
|
}
|
2016-04-20 19:29:16 +02:00
|
|
|
],
|
|
|
|
href: "https://api.spotify.com/v1/tracks/1qpbJ8GiPc706AfGqZAIei",
|
|
|
|
id: "1qpbJ8GiPc706AfGqZAIei",
|
|
|
|
name: "El Taxi"
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
track: {
|
|
|
|
album: {
|
|
|
|
id: "53fWaWYPGghRHppKdD7A2S",
|
|
|
|
name: "El Taxi (feat. Pitbull, Sensato)"
|
|
|
|
},
|
|
|
|
artists: [
|
|
|
|
{
|
|
|
|
id: "6W0XSFVBD0xJlJhahPSlKZ",
|
|
|
|
name: "Osmani Garcia"
|
|
|
|
}, {
|
|
|
|
id: "0TnOYISbd1XYRBk9myaseg",
|
|
|
|
name: "Pitbull"
|
|
|
|
}, {
|
|
|
|
id: "7iJrDbKM5fEkGdm5kpjFzS"
|
2016-04-17 20:05:11 +02:00
|
|
|
}
|
2016-04-20 19:29:16 +02:00
|
|
|
],
|
|
|
|
href: "https://api.spotify.com/v1/tracks/1qpbJ8GiPc706AfGqZAIei",
|
|
|
|
id: "zkefjzkefn",
|
|
|
|
name: "El Taxi"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
];
|
2016-04-17 19:37:16 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var Duplicate = React.createClass({
|
|
|
|
render: function () {
|
|
|
|
var authors = "";
|
|
|
|
this.props.data.artists.forEach(function (item, index) {
|
|
|
|
if (index != 0) {
|
|
|
|
authors += ', ';
|
|
|
|
}
|
|
|
|
authors += item.name;
|
2016-04-17 23:20:24 +02:00
|
|
|
});
|
2016-04-20 19:29:16 +02:00
|
|
|
return (
|
|
|
|
<div className="list-group-item">{this.props.data.name} - {authors}</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
2016-04-17 23:20:24 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var DuplicatesBox = React.createClass({
|
|
|
|
render: function () {
|
|
|
|
var duplicates = this.props.data.map(function (duplicate) {
|
|
|
|
return (
|
|
|
|
<Duplicate data={duplicate.track} key={duplicate.track.id}/>
|
|
|
|
);
|
2016-04-17 21:47:17 +02:00
|
|
|
});
|
2016-04-20 19:29:16 +02:00
|
|
|
return (
|
|
|
|
<div className="duplicatesBox list-group">
|
|
|
|
{duplicates}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
2016-04-17 20:37:09 +02:00
|
|
|
|
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var Playlist = React.createClass({
|
|
|
|
render: function () {
|
|
|
|
return (
|
|
|
|
<a className="list-group-item">{this.props.name}</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
2016-04-17 20:37:09 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var PlaylistBox = React.createClass({
|
|
|
|
render: function () {
|
|
|
|
var playlists = this.props.data.map(function (playlist) {
|
|
|
|
return (
|
|
|
|
<Playlist name={playlist.name} key={playlist.id}/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<div className="playListBox list-group">
|
|
|
|
{playlists}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
2016-04-17 20:37:09 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var DuplicateFinderBox = React.createClass({
|
|
|
|
render: function () {
|
|
|
|
return (
|
|
|
|
<div className="duplicateFinderBox">
|
|
|
|
<div className="col-md-3">
|
|
|
|
<h2>Playlists</h2>
|
|
|
|
<PlaylistBox data={this.props.playlists}/>
|
|
|
|
</div>
|
|
|
|
<div className="col-md-6">
|
|
|
|
<h2>Duplicates</h2>
|
|
|
|
<DuplicatesBox data={this.props.dups}/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
});
|
2016-04-17 20:37:09 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
ReactDOM.render(
|
|
|
|
<DuplicateFinderBox playlists={data} dups={dups}/>,
|
|
|
|
document.getElementById('content')
|
|
|
|
);
|
2016-04-17 20:37:09 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
var Authenticate = React.createClass({
|
|
|
|
render: function () {
|
|
|
|
var accessToken = "";
|
|
|
|
if (accessToken == "") {
|
|
|
|
return (
|
|
|
|
<ul className="nav navbar-nav navbar-right">
|
|
|
|
<li>
|
|
|
|
<a href="#"><strong>Login With Spotify</strong></a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
return (
|
|
|
|
<ul className="nav navbar-nav navbar-right">
|
|
|
|
<li>
|
|
|
|
<a href="#">Refresh my token</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<a href="#"><strong>Logout</strong></a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
);
|
2016-04-17 20:37:09 +02:00
|
|
|
}
|
2016-04-20 19:29:16 +02:00
|
|
|
}
|
|
|
|
});
|
2016-04-17 19:37:16 +02:00
|
|
|
|
2016-04-20 19:29:16 +02:00
|
|
|
ReactDOM.render(
|
|
|
|
<Authenticate />,
|
|
|
|
document.getElementById('authentication')
|
|
|
|
);
|