commit
09e9c3ff98
7 changed files with 297 additions and 207 deletions
11
app.js
11
app.js
|
|
@ -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'
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,50 +9,17 @@
|
||||||
</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>
|
|
||||||
<ul class="nav navbar-nav navbar-right" ng-controller="AuthCtrl">
|
|
||||||
<li ng-if="access_token == ''">
|
|
||||||
<a ng-click="login()" href="#"><b>Login With Spotify</b></a>
|
|
||||||
</li>
|
|
||||||
<li ng-if="access_token != ''">
|
|
||||||
<a ng-click="refresh()" href="#">Refresh my token</a>
|
|
||||||
</li>
|
|
||||||
<li ng-if="access_token != ''">
|
|
||||||
<a ng-click="logout()" href="#"><b>Logout</b></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /.navbar-collapse -->
|
|
||||||
</div><!-- /.container-fluid -->
|
|
||||||
</nav>
|
|
||||||
<div class="container">
|
|
||||||
<ui-view></ui-view>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.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/angular-ui-router/0.2.18/angular-ui-router.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/ngStorage/0.3.6/ngStorage.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
|
||||||
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
|
||||||
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
<script src="./script.js"></script>
|
<script type="text/babel" src="./script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<h2>Duplicates in {{playlistName}}</h2>
|
|
||||||
<div ng-if="loaded == false">Loading...</div>
|
|
||||||
<div ng-if="tracks.length == 0 && loaded">No duplicate found</div>
|
|
||||||
<div ng-if="tracks.length > 0 && loaded">
|
|
||||||
<div class="list-group-item" ng-repeat="t in tracks">
|
|
||||||
{{t.track.name}} - <span ng-repeat="artist in t.track.artists">{{artist == t.track.artists[0]?'':', '}}{{artist.name}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<p>Please connect to Spotify to access to the app.</p>
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
<div class="container row">
|
|
||||||
<div class="col-md-3"><ui-view name="playlist"></ui-view></div>
|
|
||||||
<div class="col-md-9"><ui-view name="dups"></ui-view></div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<div class="clearfix">
|
|
||||||
<h2 class="pull-left">Playlist</h2>
|
|
||||||
</div>
|
|
||||||
<div class="list-group ">
|
|
||||||
<a ng-class="current.playlistId == playlist.id?'list-group-item active':'list-group-item'" ng-repeat="playlist in playlists" ng-click="open(playlist)">
|
|
||||||
{{playlist.name}}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
427
public/script.js
427
public/script.js
|
|
@ -1,156 +1,293 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
(function(){
|
/**
|
||||||
|
* 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 = angular.module('app',['ui.router', 'ngStorage']);
|
var Duplicate = React.createClass({
|
||||||
|
render: function () {
|
||||||
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
|
var authors = "";
|
||||||
$stateProvider
|
this.props.track.artists.forEach(function (item, index) {
|
||||||
.state('finder_public',{
|
if (index != 0) {
|
||||||
templateUrl:'partials/home.html',
|
authors += ', ';
|
||||||
url: '/',
|
}
|
||||||
controller: 'HomeCtrl'
|
authors += item.name;
|
||||||
})
|
|
||||||
.state('finder',{
|
|
||||||
abstract: true,
|
|
||||||
templateUrl:'partials/logged.html',
|
|
||||||
url: '/finder',
|
|
||||||
controller: 'MainCtrl'
|
|
||||||
})
|
|
||||||
.state('finder.playlist',{
|
|
||||||
url: '/playlist',
|
|
||||||
views: {
|
|
||||||
playlist:{
|
|
||||||
templateUrl: 'partials/playlist.html',
|
|
||||||
controller: 'PlaylistCtrl'
|
|
||||||
},
|
|
||||||
dups:{
|
|
||||||
template: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.state('finder.playlist.dups',{
|
|
||||||
url: '/:uid/:id/:playlist',
|
|
||||||
views: {
|
|
||||||
'dups@finder': {
|
|
||||||
templateUrl: 'partials/dups.html',
|
|
||||||
controller: 'DupsCtrl'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$urlRouterProvider.otherwise("/");
|
|
||||||
}]);
|
|
||||||
|
|
||||||
app.run(['$rootScope', '$state', '$localStorage',function($rootScope, $state, $localStorage){
|
|
||||||
$rootScope.$storage = $localStorage.$default({
|
|
||||||
access_token: "",
|
|
||||||
refresh_token: ""
|
|
||||||
});
|
});
|
||||||
$rootScope.access_token = $rootScope.$storage.access_token;
|
return (
|
||||||
$rootScope.refresh_token = $rootScope.$storage.refresh_token;
|
<div className="list-group-item">{this.props.track.name} - {authors}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$rootScope.$watch('access_token', function(newVal, oldVal, scope){
|
var DuplicatesBox = React.createClass({
|
||||||
|
render: function () {
|
||||||
|
if (this.props.dups && this.props.dups.length > 0) {
|
||||||
|
var duplicates = this.props.dups.map(function (duplicate) {
|
||||||
|
return (
|
||||||
|
<Duplicate track={duplicate.track} key={duplicate.track.id}/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<div className="duplicatesBox list-group">
|
||||||
|
{duplicates}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return (
|
||||||
|
<p>No duplicate found</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$rootScope.$storage.access_token = $rootScope.access_token;
|
|
||||||
$rootScope.$storage.refresh_token = $rootScope.refresh_token;
|
|
||||||
|
|
||||||
if(oldVal == "" && newVal != ""){
|
var PlaylistBox = React.createClass({
|
||||||
$state.go('finder.playlist');
|
getInitialState: function () {
|
||||||
} else if (oldVal != "" && newVal == ""){
|
return {
|
||||||
$state.go('finder_public');
|
currentId: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
clickOnItem: function (id, uid) {
|
||||||
|
this.setState({currentId: id});
|
||||||
|
this.props.handleClick(id, uid);
|
||||||
|
},
|
||||||
|
render: function () {
|
||||||
|
var currentId = this.state.currentId;
|
||||||
|
var playlists;
|
||||||
|
if (this.props.playlists) {
|
||||||
|
playlists = this.props.playlists.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}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var DuplicateFinderBox = React.createClass({
|
||||||
|
getInitialState: function () {
|
||||||
|
return {
|
||||||
|
currentId: null,
|
||||||
|
currentUId: null,
|
||||||
|
dups: null,
|
||||||
|
dupsLoading: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
handlePlaylistClick: function (id, uid) {
|
||||||
|
this.setState({
|
||||||
|
currentId: id,
|
||||||
|
currentUId: uid,
|
||||||
|
dupsLoading: 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,
|
||||||
|
dupsLoading: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: function (xhr, response, err) {
|
||||||
|
console.error(response, err);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$rootScope.$on('$stateChangeStart',
|
},
|
||||||
function (event, toState) {
|
render: function () {
|
||||||
if ((toState.name != "finder_public") && $rootScope.access_token == "") {
|
var duplicates = <p>Loading...</p>;
|
||||||
event.preventDefault();
|
if (!this.state.dupsLoading) {
|
||||||
$state.go('finder_public');
|
duplicates = <DuplicatesBox dups={this.state.dups}/>;
|
||||||
}
|
|
||||||
});
|
|
||||||
}]);
|
|
||||||
|
|
||||||
app.controller("HomeCtrl",['$scope',function($scope){
|
|
||||||
|
|
||||||
}]);
|
|
||||||
|
|
||||||
app.controller("MainCtrl",['$scope', '$state',function($scope, $state){
|
|
||||||
$scope.current = {playlistId: undefined};
|
|
||||||
}]);
|
|
||||||
|
|
||||||
app.controller("PlaylistCtrl",['$scope', '$http', '$state',function($scope, $http, $state){
|
|
||||||
$scope.playlists = [];
|
|
||||||
$scope.load = function(){
|
|
||||||
$http.get('/get_playlists', {
|
|
||||||
params:{
|
|
||||||
access_token: $scope.access_token
|
|
||||||
}
|
|
||||||
}).then(function(result){
|
|
||||||
var r = result.data;
|
|
||||||
if(r.data){
|
|
||||||
$scope.playlists = r.data;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
|
||||||
$scope.open = function(playlist) {
|
|
||||||
$scope.current.playlistId = playlist.id;
|
|
||||||
$state.go('finder.playlist.dups',{uid: playlist.owner.id, id: playlist.id, playlist: encodeURIComponent(playlist.name)})
|
|
||||||
};
|
|
||||||
$scope.load();
|
|
||||||
}]);
|
|
||||||
|
|
||||||
app.controller("DupsCtrl",['$scope', '$stateParams', '$http',function($scope, $stateParams, $http){
|
|
||||||
$scope.uid = $stateParams['uid'];
|
|
||||||
$scope.id = $stateParams['id'];
|
|
||||||
$scope.playlistName = decodeURIComponent($stateParams.playlist);
|
|
||||||
$scope.current.playlistId = $scope.id;
|
|
||||||
$scope.tracks = [];
|
|
||||||
$scope.loaded = false;
|
|
||||||
$scope.load = function () {
|
|
||||||
$http.get('/pl/' + $scope.uid + '/' + $scope.id, {
|
|
||||||
params: {
|
|
||||||
access_token: $scope.access_token
|
|
||||||
}
|
|
||||||
}).then(function(result) {
|
|
||||||
var r = result.data;
|
|
||||||
$scope.tracks = r.data;
|
|
||||||
$scope.loaded = true;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
$scope.load();
|
|
||||||
}]);
|
|
||||||
|
|
||||||
app.controller('AuthCtrl',['$scope', '$rootScope', '$interval', '$http', function($scope, $rootScope, $interval, $http){
|
|
||||||
$scope.login = function(){
|
|
||||||
var openUrl = '/login';
|
|
||||||
window.$windowScope = $scope;
|
|
||||||
$scope.popup = window.open(openUrl, "Authenticate Account", "width=500, height=500");
|
|
||||||
var checker = $interval(function(){
|
|
||||||
if($scope.popup.closed){
|
|
||||||
$interval.cancel(checker);
|
|
||||||
} else if ($scope.popup.token != undefined && $scope.popup.token != null) {
|
|
||||||
$rootScope.access_token = $scope.popup.token.access_token;
|
|
||||||
$rootScope.refresh_token = $scope.popup.token.refresh_token;
|
|
||||||
$scope.popup.close();
|
|
||||||
$interval.cancel(checker);
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
$scope.logout = function(){
|
|
||||||
$rootScope.refresh_token = "";
|
|
||||||
$rootScope.access_token = "";
|
|
||||||
};
|
|
||||||
$scope.refresh = function(){
|
|
||||||
if($rootScope.refresh_token)
|
|
||||||
$http.get('/refresh_token',{params: {refresh_token: $rootScope.refresh_token}})
|
|
||||||
.then(function(result){
|
|
||||||
$rootScope.access_token = result.data.access_token || "";
|
|
||||||
}, function(failResult){
|
|
||||||
$rootScope.access_token = "";
|
|
||||||
$rootScope.refresh_token = "";
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
}])
|
var playlistBox = <p>Loading...</p>;
|
||||||
|
if (!this.props.playlistsLoading) {
|
||||||
|
playlistBox = <PlaylistBox handleClick={this.handlePlaylistClick} playlists={this.props.playlists}/>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="duplicateFinderBox">
|
||||||
|
<div className="col-md-3">
|
||||||
|
<h2>Playlists</h2>
|
||||||
|
{playlistBox}
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6">
|
||||||
|
<h2>Duplicates</h2>
|
||||||
|
{duplicates}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
})();
|
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 auth;
|
||||||
|
if (this.props.auth.access_token == null) {
|
||||||
|
auth = (
|
||||||
|
<ul className="nav navbar-nav navbar-right">
|
||||||
|
<li>
|
||||||
|
<a href="/login"><strong>Login With Spotify</strong></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
auth = (
|
||||||
|
<ul className="nav navbar-nav navbar-right">
|
||||||
|
<li>
|
||||||
|
<a href="#" onClick={this.refreshToken}>Refresh my token</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<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,
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<App />,
|
||||||
|
document.getElementById('content')
|
||||||
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue