From 53a4743902c0ca54066f258d4ef0a1813e27521f Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 17 Oct 2016 14:27:48 +1300 Subject: [PATCH] Using auth token --- src/js/components/ConfirmationButton.js | 25 +++++++++++++-- .../components/SpotifyAuthenticationFrame.js | 2 +- src/js/services/spotify/actions.js | 6 ++++ src/js/services/spotify/middleware.js | 31 ++++++++++++++++--- src/js/services/spotify/reducer.js | 4 +-- src/js/views/Album.js | 26 +--------------- src/js/views/LibraryArtists.js | 18 +++++++++-- src/js/views/Settings.js | 4 +-- 8 files changed, 76 insertions(+), 40 deletions(-) diff --git a/src/js/components/ConfirmationButton.js b/src/js/components/ConfirmationButton.js index cb63e02d..109a2c38 100755 --- a/src/js/components/ConfirmationButton.js +++ b/src/js/components/ConfirmationButton.js @@ -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 ( - this.handleClick(e) }> - { content } - + ); } } \ No newline at end of file diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js index 20d0567c..cee24220 100755 --- a/src/js/components/SpotifyAuthenticationFrame.js +++ b/src/js/components/SpotifyAuthenticationFrame.js @@ -56,7 +56,7 @@ class SpotifyAuthenticationFrame extends React.Component{ return (
{ this.renderAuthorizeButton() } - +
); } diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 87332b3e..c03182e6 100755 --- a/src/js/services/spotify/actions.js +++ b/src/js/services/spotify/actions.js @@ -48,3 +48,9 @@ export function loadArtist( uri ){ } } +export function loadLibraryArtists(){ + return { + type: 'SPOTIFY_LOAD_LIBRARY_ARTISTS' + } +} + diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index a565a075..a3a25fa2 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -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; diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js index 2a0e371b..c36f5436 100755 --- a/src/js/services/spotify/reducer.js +++ b/src/js/services/spotify/reducer.js @@ -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 diff --git a/src/js/views/Album.js b/src/js/views/Album.js index 8f94d3a8..3e6a4b72 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -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 (
@@ -50,15 +35,6 @@ class Album extends React.Component{ } return null; } - - render(){ - return ( -
-

Single album

- { this.renderAlbum() } -
- ); - } } diff --git a/src/js/views/LibraryArtists.js b/src/js/views/LibraryArtists.js index 8e5c8d8a..2203e3c1 100755 --- a/src/js/views/LibraryArtists.js +++ b/src/js/views/LibraryArtists.js @@ -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 ( +
+

My artists

+
    + { + this.props.spotify.libraryArtists.artists.items.map( (artist, index) => { + var link = '/artist/' + artist.uri; + return
  • { artist.name }
    • + }) + } +
+
+ ); + } return null; } } diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index ba80014b..fb0a34e5 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -17,8 +17,8 @@ class Settings extends React.Component{ } resetAllSettings(){ - localStorage.removeItem('state'); - window.location.reload(); + localStorage.clear(); + window.location.reload(true); } render(){