The following code should work, according to Chat-GPT:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';
const CLIENT_ID = 'your_client_id';
const CLIENT_SECRET = 'your_client_secret';
const REDIRECT_URI = 'http://localhost:3000/callback';
const SCOPES = 'user-top-read';
var urlCode = null;
const App = () => {
const [accessToken, setAccessToken] = useState(null);
const [timeRange, setTimeRange] = useState('short_term');
const [topSongs, setTopSongs] = useState([]);
const [auraColor, setAuraColor] = useState('#000000');
const handleTimeRangeChange = (event) => {
setTimeRange(event.target.value);
};
const setCode = async () => {
const queryString = window.location.search;
if (queryString.length > 0) {
const urlParams = new URLSearchParams(queryString);
urlCode = urlParams.get('code');
}
};
const getAccessToken = async () => {
const response = await axios.post(
'https://accounts.spotify.com/api/token',
new URLSearchParams({
grant_type: 'authorization_code',
code: urlCode,
redirect_uri: REDIRECT_URI,
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
}).toString(),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
}
);
const token = response.data.access_token;
setAccessToken(token);
};
useEffect(() => {
const handleAuthentication = async () => {
await setCode();
if (urlCode) {
try {
await getAccessToken();
window.history.pushState({}, '', '/');
} catch (error) {
console.error('Error retrieving access token:', error);
}
}
};
handleAuthentication();
}, []);
const fetchTopSongs = async () => {
try {
const response = await axios.get(
`https://api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=25`,
{
headers: { Authorization: `Bearer ${accessToken}` },
}
);
setTopSongs(response.data.items);
} catch (error) {
console.log('Error retrieving top songs:', error);
}
};
const getSongColor = async (trackId) => {
try {
const response = await axios.get(`https://api.spotify.com/v1/tracks/${trackId}`, {
headers: {
Authorization: `Bearer ${accessToken}`,
},
});
// Handle the song color response
} catch (error) {
console.error(`Error retrieving song color for track ${trackId}:`, error);
}
};
const AUTH_URL = `https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=code&redirect_uri=${enco...(
REDIRECT_URI
)}&scope=${encodeURIComponent(SCOPES)}`;
return (
<div className="App">
<h1 className="app-title">Spotify Aesthetic Aura Generator</h1>
<div className="aura-color" style={{ backgroundColor: auraColor }}></div>
{!accessToken && (
<a href={AUTH_URL} className="spotify-login-button">
Log in with Spotify
</a>
)}
{accessToken && (
<div className="time-range-selector">
<label htmlFor="time-range" className="time-range-label">
Select Time Range:
</label>
<select
id="time-range"
value={timeRange}
onChange={handleTimeRangeChange}
className="time-range-select"
>
<option value="short_term">Last Month</option>
<option value="medium_term">Last 6 Months</option>
<option value="long_term">All Time</option>
</select>
</div>
)}
{accessToken && (
<button className="generate-button" onClick={() => fetchTopSongs()}>
Generate Aura
</button>
)}
{topSongs.length > 0 && (
<div className="song-list">
<h2 className="song-list-title">Top 25 Songs:</h2>
<ul className="song-list-items">
{topSongs.map((song) => (
<li key={song.id} className="song-list-item">
<div className="song-color" style={{ backgroundColor: song.color }}></div>
<div className="song-details">
<p className="song-name">{song.name}</p>
<p className="song-artist">{song.artist}</p
>
</div>
</li>
))}
</ul>
</div>
)}
</div>
);
};
export default App;
XimzendSpotify Star
Help others find this answer and click "Accept as Solution".
If you appreciate my answer, maybe give me a Like.
Note: I'm not a Spotify employee.
