Using auth token
This commit is contained in:
@ -9,6 +9,8 @@ export default class ConfirmationButton extends React.Component{
|
||||
this.state = {
|
||||
confirming: false
|
||||
}
|
||||
this.confirming = false;
|
||||
this.unconfirmTimer = false;
|
||||
}
|
||||
|
||||
handleClick(e){
|
||||
@ -20,6 +22,19 @@ export default class ConfirmationButton extends React.Component{
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseEnter(e){
|
||||
clearTimeout( this.unconfirmTimer );
|
||||
}
|
||||
|
||||
handleMouseLeave(e){
|
||||
this.unconfirmTimer = setTimeout(
|
||||
function(){
|
||||
this.setState({ confirming: false });
|
||||
}.bind(this),
|
||||
1500
|
||||
);
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
var className = 'button';
|
||||
@ -31,9 +46,13 @@ export default class ConfirmationButton extends React.Component{
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={className} onClick={ (e) => this.handleClick(e) }>
|
||||
{ content }
|
||||
</span>
|
||||
<button
|
||||
className={className}
|
||||
onClick={ (e) => this.handleClick(e) }
|
||||
onMouseLeave={ (e) => this.handleMouseLeave(e) }
|
||||
onMouseEnter={ (e) => this.handleMouseEnter(e) }>
|
||||
{ content }
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -56,7 +56,7 @@ class SpotifyAuthenticationFrame extends React.Component{
|
||||
return (
|
||||
<div>
|
||||
{ this.renderAuthorizeButton() }
|
||||
<iframe src={src}></iframe>
|
||||
<iframe src={src} style={{ display: 'none' }}></iframe>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -48,3 +48,9 @@ export function loadArtist( uri ){
|
||||
}
|
||||
}
|
||||
|
||||
export function loadLibraryArtists(){
|
||||
return {
|
||||
type: 'SPOTIFY_LOAD_LIBRARY_ARTISTS'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,13 +11,22 @@ const SpotifyMiddleware = (function(){
|
||||
* @param data mixed = request payload
|
||||
* @return ajax promise
|
||||
**/
|
||||
const sendRequest = (endpoint, method = 'GET', data = false) => {
|
||||
return $.ajax({
|
||||
const sendRequest = (token, endpoint, method = 'GET', data = false) => {
|
||||
|
||||
var options = {
|
||||
method: method,
|
||||
cache: true,
|
||||
url: 'https://api.spotify.com/v1/'+endpoint,
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
if( token ){
|
||||
options.headers = {
|
||||
Authorization: 'Bearer '+ token
|
||||
}
|
||||
}
|
||||
|
||||
return $.ajax( options );
|
||||
}
|
||||
|
||||
/**
|
||||
@ -32,7 +41,7 @@ const SpotifyMiddleware = (function(){
|
||||
store.dispatch({ type: 'SPOTIFY_ALBUM_LOADED', data: false })
|
||||
var id = action.uri.replace('spotify:album:','');
|
||||
|
||||
sendRequest('albums/'+id)
|
||||
sendRequest( false, 'albums/'+id )
|
||||
.then( (response) => {
|
||||
store.dispatch({ type: 'SPOTIFY_ALBUM_LOADED', data: response })
|
||||
});
|
||||
@ -44,13 +53,25 @@ const SpotifyMiddleware = (function(){
|
||||
store.dispatch({ type: 'SPOTIFY_ARTIST_LOADED', data: false })
|
||||
var id = action.uri.replace('spotify:artist:','');
|
||||
|
||||
sendRequest('artists/'+id)
|
||||
sendRequest( false, 'artists/'+id )
|
||||
.then( (response) => {
|
||||
store.dispatch({ type: 'SPOTIFY_ARTIST_LOADED', data: response })
|
||||
});
|
||||
break;
|
||||
|
||||
|
||||
case 'SPOTIFY_LOAD_LIBRARY_ARTISTS':
|
||||
|
||||
store.dispatch({ type: 'SPOTIFY_LIBRARY_ARTISTS_LOADED', data: false })
|
||||
var token = store.getState().spotify.token;
|
||||
|
||||
sendRequest( token, 'me/following?type=artist' )
|
||||
.then( (response) => {
|
||||
store.dispatch({ type: 'SPOTIFY_LIBRARY_ARTISTS_LOADED', data: response })
|
||||
});
|
||||
break;
|
||||
|
||||
|
||||
case 'SPOTIFY_CONNECT':
|
||||
console.log('Spotify wants to connect')
|
||||
break;
|
||||
|
||||
@ -9,7 +9,7 @@ export default function reducer(spotify = {}, action){
|
||||
return Object.assign({}, spotify, { authorizing: true });
|
||||
|
||||
case 'SPOTIFY_COMPLETE_AUTHORIZATION':
|
||||
return Object.assign({}, spotify, { authorizing: false, authorization: action.data });
|
||||
return Object.assign({}, spotify, { authorizing: false, authorization: action.data, token: action.data.access_token });
|
||||
|
||||
case 'SPOTIFY_REMOVE_AUTHORIZATION':
|
||||
return Object.assign({}, spotify, { authorizing: false, authorization: false });
|
||||
@ -27,7 +27,7 @@ export default function reducer(spotify = {}, action){
|
||||
return Object.assign({}, spotify, { artist: action.data });
|
||||
|
||||
case 'SPOTIFY_LIBRARY_ARTISTS_LOADED':
|
||||
return Object.assign({}, spotify, { library_artists: action.data });
|
||||
return Object.assign({}, spotify, { libraryArtists: action.data });
|
||||
|
||||
default:
|
||||
return spotify
|
||||
|
||||
@ -24,22 +24,7 @@ class Album extends React.Component{
|
||||
}
|
||||
}
|
||||
|
||||
loadAlbum( uri ){
|
||||
let self = this;
|
||||
|
||||
var id = uri.replace('spotify:album:','');
|
||||
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
cache: true,
|
||||
url: 'https://api.spotify.com/v1/albums/'+id,
|
||||
success: function(album){
|
||||
self.setState({ album: album });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderAlbum(){
|
||||
render(){
|
||||
if( this.props.spotify.album ){
|
||||
return (
|
||||
<div>
|
||||
@ -50,15 +35,6 @@ class Album extends React.Component{
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div>
|
||||
<h3>Single album</h3>
|
||||
{ this.renderAlbum() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -2,12 +2,11 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import * as mopidyActions from '../services/mopidy/actions'
|
||||
import * as spotifyActions from '../services/spotify/actions'
|
||||
|
||||
import TrackList from '../components/TrackList'
|
||||
|
||||
class LibraryArtists extends React.Component{
|
||||
|
||||
constructor(props) {
|
||||
@ -20,6 +19,21 @@ class LibraryArtists extends React.Component{
|
||||
}
|
||||
|
||||
render(){
|
||||
if( this.props.spotify.libraryArtists ){
|
||||
return (
|
||||
<div>
|
||||
<h3>My artists</h3>
|
||||
<ul>
|
||||
{
|
||||
this.props.spotify.libraryArtists.artists.items.map( (artist, index) => {
|
||||
var link = '/artist/' + artist.uri;
|
||||
return <li key={index}><Link to={link}>{ artist.name }</Link></li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,8 +17,8 @@ class Settings extends React.Component{
|
||||
}
|
||||
|
||||
resetAllSettings(){
|
||||
localStorage.removeItem('state');
|
||||
window.location.reload();
|
||||
localStorage.clear();
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
Reference in New Issue
Block a user