Work with React !
This commit is contained in:
parent
994cc87177
commit
b50d2236c3
3 changed files with 243 additions and 65 deletions
11
app.js
11
app.js
|
|
@ -91,9 +91,16 @@ app.get('/callback', function (req, res) {
|
|||
refresh_token = body.refresh_token;
|
||||
|
||||
// we can also pass the token to the browser to make requests from there
|
||||
res.send('<script>window.token = { access_token: "'+access_token+'", refresh_token: "'+refresh_token+'" };</script>')
|
||||
res.redirect('/#' +
|
||||
querystring.stringify({
|
||||
access_token: access_token,
|
||||
refresh_token: refresh_token
|
||||
}));
|
||||
} else {
|
||||
res.send('<script>window.token = { access_token: "", refresh_token: "" };</script>')
|
||||
res.redirect('/#' +
|
||||
querystring.stringify({
|
||||
error: 'invalid_token'
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,30 +9,8 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">DuplicateFinder</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Finder</a></li>
|
||||
</ul>
|
||||
<div id="authentication"></div>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
|
||||
<div class="container" id="content"></div>
|
||||
<div id="content"></div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
|
||||
|
|
|
|||
273
public/script.js
273
public/script.js
|
|
@ -1,9 +1,36 @@
|
|||
'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 data = [
|
||||
{id: 1, name: "Mine"},
|
||||
{id: 2, name: "Other"},
|
||||
{id: 3, name: "A third"}
|
||||
{
|
||||
href: "https://api.spotify.com/v1/users/wizzler/playlists/53Y8wT46QIMz5H4WQ8O22c",
|
||||
id: "53Y8wT46QIMz5H4WQ8O22c",
|
||||
name: "Wizzlers Big Playlist",
|
||||
owner: {
|
||||
id: "wizzler"
|
||||
}
|
||||
}, {
|
||||
href: "https://api.spotify.com/v1/users/wizzlersmate/playlists/1AVZz0mBuGbCEoNRQdYQju",
|
||||
id: "1AVZz0mBuGbCEoNRQdYQju",
|
||||
name: "Another Playlist",
|
||||
owner: {
|
||||
id: "wizzlersmate"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var dups = [
|
||||
|
|
@ -69,35 +96,49 @@ var Duplicate = React.createClass({
|
|||
|
||||
var DuplicatesBox = React.createClass({
|
||||
render: function () {
|
||||
var duplicates = this.props.data.map(function (duplicate) {
|
||||
if (this.props.data && this.props.data.length > 0) {
|
||||
var duplicates = this.props.data.map(function (duplicate) {
|
||||
return (
|
||||
<Duplicate data={duplicate.track} key={duplicate.track.id}/>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Duplicate data={duplicate.track} key={duplicate.track.id}/>
|
||||
<div className="duplicatesBox list-group">
|
||||
{duplicates}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div className="duplicatesBox list-group">
|
||||
{duplicates}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<p>No duplicate found</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var Playlist = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<a className="list-group-item">{this.props.name}</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var PlaylistBox = React.createClass({
|
||||
getInitialState: function () {
|
||||
return {
|
||||
currentId: null
|
||||
};
|
||||
},
|
||||
clickOnItem: function (id, uid) {
|
||||
this.setState({currentId: id});
|
||||
this.props.handleClick(id, uid);
|
||||
},
|
||||
render: function () {
|
||||
var playlists = this.props.data.map(function (playlist) {
|
||||
return (
|
||||
<Playlist name={playlist.name} key={playlist.id}/>
|
||||
);
|
||||
});
|
||||
var currentId = this.state.currentId;
|
||||
var playlists;
|
||||
if (this.props.data) {
|
||||
playlists = this.props.data.map(function (pl) {
|
||||
var id = pl.id;
|
||||
var classes = "list-group-item" + (currentId == id ? " active" : "");
|
||||
return (
|
||||
<a onClick={this.clickOnItem.bind(this, id, pl.owner.id)} className={classes} key={id}>{pl.name}</a>
|
||||
);
|
||||
}, this);
|
||||
}
|
||||
return (
|
||||
<div className="playListBox list-group">
|
||||
{playlists}
|
||||
|
|
@ -107,55 +148,207 @@ var PlaylistBox = React.createClass({
|
|||
});
|
||||
|
||||
var DuplicateFinderBox = React.createClass({
|
||||
getInitialState: function () {
|
||||
return {
|
||||
currentId: null,
|
||||
currentUId: null,
|
||||
dups: null,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
handlePlaylistClick: function (id, uid) {
|
||||
this.setState({
|
||||
currentId: id,
|
||||
currentUId: uid,
|
||||
loading: 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,
|
||||
loading: false
|
||||
});
|
||||
},
|
||||
error: function (xhr, response, err) {
|
||||
console.error(response, err);
|
||||
}
|
||||
});
|
||||
},
|
||||
render: function () {
|
||||
var duplicates = <p>Loading...</p>;
|
||||
if (!this.state.loading) {
|
||||
duplicates = <DuplicatesBox data={this.state.dups}/>;
|
||||
}
|
||||
return (
|
||||
<div className="duplicateFinderBox">
|
||||
<div className="col-md-3">
|
||||
<h2>Playlists</h2>
|
||||
<PlaylistBox data={this.props.playlists}/>
|
||||
<PlaylistBox handleClick={this.handlePlaylistClick} data={this.props.playlists}/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<h2>Duplicates</h2>
|
||||
<DuplicatesBox data={this.props.dups}/>
|
||||
{duplicates}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<DuplicateFinderBox playlists={data} dups={dups}/>,
|
||||
document.getElementById('content')
|
||||
);
|
||||
|
||||
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 accessToken = "";
|
||||
if (accessToken == "") {
|
||||
return (
|
||||
var auth;
|
||||
if (this.props.auth.access_token == null) {
|
||||
auth = (
|
||||
<ul className="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#"><strong>Login With Spotify</strong></a>
|
||||
<a href="/login"><strong>Login With Spotify</strong></a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
auth = (
|
||||
<ul className="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#">Refresh my token</a>
|
||||
<a href="#" onClick={this.refreshToken}>Refresh my token</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><strong>Logout</strong></a>
|
||||
<a href="#" onClick={this.logout}><strong>Logout</strong></a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="navbar navbar-default navbar-static-top" role="navigation">
|
||||
<div className="container-fluid">
|
||||
<button type="button" className="navbar-toggle" data-toggle="collapse"
|
||||
data-target=".navbar-ex1-collapse">
|
||||
<span className="sr-only">Toggle navigation</span>
|
||||
<span className="icon-bar"></span>
|
||||
<span className="icon-bar"></span>
|
||||
<span className="icon-bar"></span>
|
||||
</button>
|
||||
<div className="navbar-header">
|
||||
<a className="navbar-brand" href="#">DuplicateFinder</a>
|
||||
</div>
|
||||
|
||||
<div className="collapse navbar-collapse navbar-ex1-collapse">
|
||||
<ul className="nav navbar-nav">
|
||||
<li className="active"><a href="#">Finder</a></li>
|
||||
</ul>
|
||||
{auth}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
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
|
||||
};
|
||||
},
|
||||
getPlaylists: function () {
|
||||
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
|
||||
});
|
||||
},
|
||||
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) {
|
||||
if (access == null && refresh == null) {
|
||||
this.setState({
|
||||
access_token: access,
|
||||
refresh_token: refresh,
|
||||
playlists: null
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.setState({
|
||||
access_token: access,
|
||||
refresh_token: refresh
|
||||
});
|
||||
this.getPlaylists();
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
if (this.state.access_token) {
|
||||
this.getPlaylists();
|
||||
}
|
||||
},
|
||||
render: function () {
|
||||
var auth = {
|
||||
access_token: this.state.access_token,
|
||||
refresh_token: this.state.refresh_token
|
||||
};
|
||||
var content = <p>Please log in with Spotify :)</p>
|
||||
if (this.isLoggedIn()) {
|
||||
content = (
|
||||
<DuplicateFinderBox auth={auth} playlists={this.state.playlists} dups={dups}/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Authenticate auth={auth} refreshAuth={this.refreshAuth}/>
|
||||
<div className="container">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Authenticate />,
|
||||
document.getElementById('authentication')
|
||||
<App />,
|
||||
document.getElementById('content')
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue