Extract App
This commit is contained in:
parent
5db0d9b683
commit
33b17d1145
2 changed files with 100 additions and 98 deletions
99
public/components/app.js
Normal file
99
public/components/app.js
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
'use strict';
|
||||
var React = require('react');
|
||||
var $ = require('jquery');
|
||||
|
||||
var DuplicateFinderBox = require('./duplicate-finder-box');
|
||||
var Authenticate = require('./authenticate');
|
||||
|
||||
/**
|
||||
* 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 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,
|
||||
playlistsLoading: true
|
||||
};
|
||||
},
|
||||
getPlaylists: function () {
|
||||
this.setState({
|
||||
playlistsLoading: true
|
||||
});
|
||||
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,
|
||||
playlistsLoading: false
|
||||
});
|
||||
},
|
||||
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) {
|
||||
this.setState({
|
||||
access_token: access,
|
||||
refresh_token: refresh
|
||||
});
|
||||
|
||||
if (!(access == null && refresh == null)) {
|
||||
this.getPlaylists();
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
if (this.isLoggedIn()) {
|
||||
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()) {
|
||||
var playlistsLoading = this.state.playlistsLoading;
|
||||
content = (
|
||||
<DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Authenticate auth={auth} refreshAuth={this.refreshAuth}/>
|
||||
<div className="container-fluid">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = App;
|
||||
|
|
@ -1,105 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
var $ = window.$ = window.jQuery = require('jquery');
|
||||
require('bootstrap');
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var ReactBootstrap = require('react-bootstrap');
|
||||
|
||||
/**
|
||||
* 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 DuplicateFinderBox = require('./components/duplicate-finder-box');
|
||||
|
||||
var Authenticate = require('./components/authenticate');
|
||||
|
||||
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,
|
||||
playlistsLoading: true
|
||||
};
|
||||
},
|
||||
getPlaylists: function () {
|
||||
this.setState({
|
||||
playlistsLoading: true
|
||||
});
|
||||
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,
|
||||
playlistsLoading: false
|
||||
});
|
||||
},
|
||||
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) {
|
||||
this.setState({
|
||||
access_token: access,
|
||||
refresh_token: refresh
|
||||
});
|
||||
|
||||
if (!(access == null && refresh == null)) {
|
||||
this.getPlaylists();
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
if (this.isLoggedIn()) {
|
||||
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()) {
|
||||
var playlistsLoading = this.state.playlistsLoading;
|
||||
content = (
|
||||
<DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Authenticate auth={auth} refreshAuth={this.refreshAuth}/>
|
||||
<div className="container-fluid">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
var App = require('./components/app');
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
|
|
|
|||
Loading…
Reference in a new issue