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

Work with React !

Browse source
This commit is contained in:
Gabriel Augendre 2016-04-21 01:10:27 +02:00
parent 994cc87177
commit b50d2236c3
3 changed files with 243 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app.js
View file

@ -91,9 +91,16 @@ app.get('/callback', function (req, res) {
refresh_token = body.refresh_token; refresh_token = body.refresh_token;
// we can also pass the token to the browser to make requests from there // 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 { } else {
res.send('<script>window.token = { access_token: "", refresh_token: "" };</script>') res.redirect('/#' +
querystring.stringify({
error: 'invalid_token'
}));
} }
}); });
} }

24
public/index.html
View file

@ -9,30 +9,8 @@
</head> </head>
<body> <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 id="content"></div>
<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>
<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.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>

249
public/script.js
View file

@ -1,9 +1,36 @@
'use strict'; '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 = [ var data = [
{id: 1, name: "Mine"}, {
{id: 2, name: "Other"}, href: "https://api.spotify.com/v1/users/wizzler/playlists/53Y8wT46QIMz5H4WQ8O22c",
{id: 3, name: "A third"} 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 = [ var dups = [
@ -69,6 +96,7 @@ var Duplicate = React.createClass({
var DuplicatesBox = React.createClass({ var DuplicatesBox = React.createClass({
render: function () { render: function () {
if (this.props.data && this.props.data.length > 0) {
var duplicates = this.props.data.map(function (duplicate) { var duplicates = this.props.data.map(function (duplicate) {
return ( return (
<Duplicate data={duplicate.track} key={duplicate.track.id}/> <Duplicate data={duplicate.track} key={duplicate.track.id}/>
@ -80,24 +108,37 @@ var DuplicatesBox = React.createClass({
</div> </div>
); );
} }
}); else {
var Playlist = React.createClass({
render: function () {
return ( return (
<a className="list-group-item">{this.props.name}</a> <p>No duplicate found</p>
); );
} }
}
}); });
var PlaylistBox = React.createClass({ var PlaylistBox = React.createClass({
getInitialState: function () {
return {
currentId: null
};
},
clickOnItem: function (id, uid) {
this.setState({currentId: id});
this.props.handleClick(id, uid);
},
render: function () { render: function () {
var playlists = this.props.data.map(function (playlist) { 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 ( return (
<Playlist name={playlist.name} key={playlist.id}/> <a onClick={this.clickOnItem.bind(this, id, pl.owner.id)} className={classes} key={id}>{pl.name}</a>
); );
}); }, this);
}
return ( return (
<div className="playListBox list-group"> <div className="playListBox list-group">
{playlists} {playlists}
@ -107,55 +148,207 @@ var PlaylistBox = React.createClass({
}); });
var DuplicateFinderBox = 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 () { render: function () {
var duplicates = <p>Loading...</p>;
if (!this.state.loading) {
duplicates = <DuplicatesBox data={this.state.dups}/>;
}
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 data={this.props.playlists}/> <PlaylistBox handleClick={this.handlePlaylistClick} data={this.props.playlists}/>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<h2>Duplicates</h2> <h2>Duplicates</h2>
<DuplicatesBox data={this.props.dups}/> {duplicates}
</div> </div>
</div> </div>
) )
} }
}); });
ReactDOM.render(
<DuplicateFinderBox playlists={data} dups={dups}/>,
document.getElementById('content')
);
var Authenticate = React.createClass({ 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 () { render: function () {
var accessToken = ""; var auth;
if (accessToken == "") { if (this.props.auth.access_token == null) {
return ( auth = (
<ul className="nav navbar-nav navbar-right"> <ul className="nav navbar-nav navbar-right">
<li> <li>
<a href="#"><strong>Login With Spotify</strong></a> <a href="/login"><strong>Login With Spotify</strong></a>
</li> </li>
</ul> </ul>
); );
} }
else { else {
return ( auth = (
<ul className="nav navbar-nav navbar-right"> <ul className="nav navbar-nav navbar-right">
<li> <li>
<a href="#">Refresh my token</a> <a href="#" onClick={this.refreshToken}>Refresh my token</a>
</li> </li>
<li> <li>
<a href="#"><strong>Logout</strong></a> <a href="#" onClick={this.logout}><strong>Logout</strong></a>
</li> </li>
</ul> </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( ReactDOM.render(
<Authenticate />, <App />,
document.getElementById('authentication') document.getElementById('content')
); );