JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>
Babel + JSX
class App extends Component{
constructor(props){
super(props);
this.state = {
token: '',
curUser: '',
loggedIn: false
};
}
login = () => {
const hash = window.location.hash
.substring(1)
.split('&')
.reduce((initial, item) => {
if (item) {
var parts = item.split('=');
initial[parts[0]] = decodeURIComponent(parts[1]);
}
return initial;
}, {});
window.location.hash = '';
// Set token
let _token = hash.access_token;
localStorage.setItem('token', _token);
const authEndpoint = 'https://accounts.spotify.com/authorize';
//github redirect
let gh = 'https://info340c-au18.github.io/stage-0-topic-proposal-creiland/';
//localhost redirect
let lh = 'http://localhost:3000/';
// Replace with your app's client ID, redirect URI and desired scopes
const clientId = '92862003d4af472994d471f9cb5695fd';
const redirectUri = lh;
const scopes = [
'user-read-private',
'user-read-email',
'playlist-modify-public',
'playlist-modify-private',
'user-top-read'
];
// If there is no token, redirect to Spotify authorization
if (!_token) {
window.location = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join('%20')}&response_type=token`;
} else {
//spotifyApi.setAccessToken(_token);
localStorage.setItem('token', _token);
this.setState({loggedIn: true});
return _token;
}
}
loginUser = () => {
let tk = this.login();
//this.setState({token:this.login()});
//localStorage.setItem('token', localStorage.getItem('token'));
localStorage.setItem('token', tk);
...