Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //Basic imports
- import React, { Component, useState, useEffect } from 'react';
- //Custom IMPORTS:
- import '../PageCss/HeaderSection.css'
- const Spotify = () => {
- const [baseUrl, setBaseUrl] = useState("https://accounts.spotify.com/api/token");
- const [spotifyArtists, setSpotifyArtists] = useState("https://api.spotify.com/v1/artist/7bSpQNOg9UsW530DuXM3X5");
- const [token, setToken] = useState([]);
- const [spotifyResonse, setspotifyResonse] = useState([]);
- const [currentStatus, setStatus] = useState(false);
- const [currentStatus2, setStatus2] = useState(false);
- const client_id = '';
- const client_secret = '48bdac084... f8ddb412';
- useEffect(() => {
- fetch(baseUrl,
- {
- method: 'POST',
- body: 'grant_type=client_credentials&client_id=' + client_id + '&client_secret=' + client_secret,
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded'
- }
- })
- .then((response) => {
- if (!response.ok) {
- return Promise.reject(new Error("Spotify Token Request Error"));
- }
- else {
- return response.json();
- }
- })
- .catch((err) => {
- console.log("First Fetch " + err);
- })
- .then((json) => {
- try {
- console.log("Current token after first fetch: " + json.access_token);
- console.log(": " + json.token_type);
- console.log(": " + json.expires_in);
- setToken(json.access_token);
- setStatus(true);
- console.log("Fetch 2 Requesting data with token: " + token);
- return fetch(spotifyArtists,{
- method: 'GET',
- headers: {
- 'Authorization': `Bearer ${token}` ,
- 'Content-Type': 'application/json'
- }})
- }
- catch
- {
- return Promise.reject(new Error(`State Error!: Data: ${token} , Connection:${currentStatus}`));
- }
- })
- .then((response) => {
- if (!response.ok) {
- return Promise.reject(new Error("Spotify Data Request with token Error" + response.status));
- }
- else {
- return response.json();
- }
- })
- .catch((err) => {
- console.log("Second Fetch" + err);
- })
- .then((json) => {
- try {
- console.log("After data request: " + json)
- console.log("Token after request" + token);
- setspotifyResonse(json);
- setStatus2(true);
- }
- catch
- {
- return Promise.reject(new Error(`State Error2 !: Data: ${spotifyResonse} , Connection2:${currentStatus2}`));
- }
- })
- .catch((err) => {
- console.log("After 2nd Fetch Error" + err);
- })
- }, [baseUrl, spotifyArtists]);
- return (
- <div >
- </div>
- )
- };
- export default Spotify;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement