Spotify APIを使ってログインしてSpotify Japan 急上昇チャートを取得

Spotify API を使って開発をしてみた！Reactでaccess tokenの取得編 - Qiita

Spotify API + Next.jsで作る選曲支援Webアプリ - Qiita

Spotify Developer Platform: Spotify APIアクセスしてデータ取得してみてみた - Qiita

curl -H "Authorization: Bearer YOUR_BEARER_TOKEN" https://api.spotify.com/v1/playlists/37i9dQZF1DX9vYRBO9gjDe/tracks | less

Spotify Japan 急上昇チャート | Spotify Playlist

axiosでBearerトークンを簡単に設定したい。 - Qiita

$ vi SpotifyApp.js

import React,{ useState, useEffect } from 'react';
import axios from "axios";
import LoginSpotify from './LoginSpotify';
import LoggedIn from './LoggedIn';
import { getTokenFromUrl } from './Spotify';

function SpotifyApp() {

  const [token, setToken] = useState(null);
  const [postsList, setPostsList] = useState([])
  const [page, setPage] = useState(1)

  useEffect(() => {
    const hash = getTokenFromUrl();
    window.location.hash = "";
    const token = hash.access_token;
    
    if (token) {
      setToken(token)
    } 
  }, [])

  const handleClick = (target: string) => {
    const url = `https://api.spotify.com/v1/playlists/37i9dQZF1DX9vYRBO9gjDe/tracks`;
    axios 
      .get(url, {
        headers: {
          Authorization: `Bearer ${token}`,
        }
      })
      .then((res) => {
        setPostsList(postsList.concat(res.data));
        console.log(res.data);
      })
      .catch(console.error);
  }

  return (
    <div className="App">
      { token ? <LoggedIn/> : <LoginSpotify/> }
      <button onClick={handleClick}>Search</button>
    </div>
  );
}

export default SpotifyApp;