Advertisement
Guest User

Spotify Get Request error

a guest
May 4th, 2022
256
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //Basic imports
  2. import React, { Component, useState, useEffect } from 'react';
  3. //Custom IMPORTS:
  4. import '../PageCss/HeaderSection.css'
  5.  
  6. const Spotify = () => {
  7.  
  8.   const [baseUrl, setBaseUrl] = useState("https://accounts.spotify.com/api/token");
  9.   const [spotifyArtists, setSpotifyArtists] = useState("https://api.spotify.com/v1/artist/7bSpQNOg9UsW530DuXM3X5");
  10.   const [token, setToken] = useState([]);
  11.   const [spotifyResonse, setspotifyResonse] = useState([]);
  12.   const [currentStatus, setStatus] = useState(false);
  13.   const [currentStatus2, setStatus2] = useState(false);
  14.  
  15.   const client_id = '';
  16.   const client_secret = '48bdac084... f8ddb412';
  17.  
  18.  
  19.   useEffect(() => {
  20.       fetch(baseUrl,
  21.       {
  22.         method: 'POST',
  23.         body: 'grant_type=client_credentials&client_id=' + client_id + '&client_secret=' + client_secret,
  24.         headers: {
  25.           'Content-Type': 'application/x-www-form-urlencoded'
  26.         }
  27.       })
  28.       .then((response) => {
  29.  
  30.         if (!response.ok) {
  31.           return Promise.reject(new Error("Spotify Token Request Error"));
  32.         }
  33.         else {
  34.           return response.json();
  35.         }
  36.       })
  37.       .catch((err) => {
  38.         console.log("First Fetch " + err);
  39.       })
  40.       .then((json) => {
  41.         try {
  42.           console.log("Current token after first fetch: " + json.access_token);
  43.           console.log(": " + json.token_type);
  44.           console.log(": " + json.expires_in);
  45.           setToken(json.access_token);
  46.           setStatus(true);
  47.           console.log("Fetch 2 Requesting data with token: " + token);
  48.           return fetch(spotifyArtists,{
  49.             method: 'GET',
  50.             headers: {
  51.               'Authorization': `Bearer ${token}` ,
  52.               'Content-Type': 'application/json'
  53.             }})
  54.         }
  55.         catch
  56.         {
  57.           return Promise.reject(new Error(`State Error!: Data: ${token} , Connection:${currentStatus}`));
  58.         }
  59.       })
  60.       .then((response) => {
  61.  
  62.         if (!response.ok) {
  63.           return Promise.reject(new Error("Spotify Data Request with token Error" + response.status));
  64.         }
  65.         else {
  66.           return response.json();
  67.         }
  68.       })
  69.       .catch((err) => {
  70.         console.log("Second Fetch" + err);
  71.       })
  72.       .then((json) => {
  73.         try {
  74.           console.log("After data request: " + json)
  75.           console.log("Token after request" + token);
  76.           setspotifyResonse(json);
  77.           setStatus2(true);
  78.         }
  79.         catch
  80.         {
  81.           return Promise.reject(new Error(`State Error2 !: Data: ${spotifyResonse} , Connection2:${currentStatus2}`));
  82.         }
  83.       })
  84.       .catch((err) => {
  85.         console.log("After 2nd Fetch Error" + err);
  86.       })
  87.  
  88.   }, [baseUrl, spotifyArtists]);
  89.  
  90.   return (
  91.     <div >
  92.     </div>
  93.   )
  94. };
  95. export default Spotify;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement