How to Build a Spotify Playlists Page in React

[00:00 - 00:12] Alright, so let's build out our playlist page. So here, just like top artists and top tracks, we will update this to render a playlist page component.

[00:13 - 00:24] And then up here, I'll add playlist from pages. And then in our pages directory, I'll actually create that playlist's file.

[00:25 - 01:05] And then I'll stub it out, I'll say pull a list, equals a function, that function returns an h1 playlist page, export that, then in pages index.js, add that to our list of exports, and then we have our playlist page. And as you'd expect, here we can just go to our profile page and grab the fetch logic and the section where we're rendering our playlist grid.

[01:06 - 01:24] So here we'll replace this with our section wrapper, our playlist grid, we'll get rid of the slice on playlist items here. And then up here, and it use effect, we'll just copy all of this.

[01:25 - 01:50] We'll get rid of these extra lines of code. Then we'll import everything we need.

[01:51 - 02:15] And it says, "Can't read property items of null because our playlist variable is initialized and also we'll just wrap a conditional around this." Awesome and then just to add some padding, we'll add a main tag here.

[02:16 - 02:30] Cool. And let's take a look at what the JSON data that's coming back from the playlist endpoint is giving us.

[02:31 - 02:51] So if we take a look at that JSON data, we'll see there is an items array of 20 objects. And if we take a look at the profile, oh, it looks like I need to update this section wrapper to say breadcrumb true, so I can have the profile link here.

[02:52 - 03:03] If we take a look at this header where we have this metadata, it says I have 64 playlists. So why are there only 20 items in this array?

[03:04 - 03:18] So if we take a look at the documentation for the /me/playlists endpoint again, we'll see that there is a limit query parameter on this endpoint. And it says the maximum number of playlists to return.

[03:19 - 03:24] And that query parameter defaults to 20. It has a minimum of one and a maximum of 50.

[03:25 - 03:39] So if we hit the /me/playlists endpoint, they're always going to return 20 items in the items array. If a user has five playlists, for example, they'll just return five since that 's less than 20.

[03:40 - 04:00] But if they have 25, they will return the first 20 and then we'll have to use this offset query parameter to retrieve the rest of them with another API request. So with me, since I have 64 playlists, I will technically have to hit this /me/ playlist endpoint four times.

[04:01 - 04:12] If I don't specify a limit query parameter, that is not 20. So if I keep that default of 20, it'll be the first three times we'll get 60 playlists.

[04:13 - 04:28] And then the fourth time I hit the endpoint, it'll get the next four. So if you take a look at the documentation here, it says that the playlist objects are wrapped in a paging object in JSON format.

[04:29 - 04:42] And that paging object is basically what we've been seeing in our console logs here. There is an href items limit next offset previous and total.

[04:43 - 05:05] So the reason why we have these is because if a user, for example, has a thousand playlists, it wouldn't be very efficient for us to return a thousand items in a JSON response. We want to make sure that JSON responses are manageable and 20 playlists is a reasonable number of playlists to return.

[05:06 - 05:27] So if we take a look at the JSON response again, we'll see that there is a limit property and a next property and an offset property. So basically the first time we hit the slash me slash playlist endpoint, the offset is technically zero and the limit is 20, since we haven't specified a different limit query parameter.

[05:28 - 05:37] There's also this next property, which is the URL to the next page of items. So the offset is 20 and the limit is 20.

[05:38 - 05:49] So if I had 40 playlists, I would get the first 20 with this URL. And then with this next URL, I would get from 21 to 40.

[05:50 - 06:10] So the way we're going to handle this in our react component is with another use effect hook. So basically we're going to want to keep track of this entire playlist data object, but we're also going to keep track of a playlist array, which we're going to pass to the playlist grid.

[06:11 - 06:25] So here I'm going to update this use state hook to say playlist data and set playlist data. And then down here, I'll just update it to set playlist data and I can keep it like this.

[06:26 - 06:47] And then down here, I can get rid of this console log and I'll add this second use effect hook, which I'll explain in detail in just a second. And then up here, I will add a second use state hook and call this playlist, which will be the array of playlists, not the playlist data object and say set playlist.

[06:48 - 07:03] And then I will import axios. Okay, so if we take a look at our playlist page, nothing is rendering and that is because we need to remove this items.

[07:04 - 07:12] Remember our playlist state variable is going to be the array of items now. Give that a save.

[07:13 - 07:20] And it looks like this is all of my playlist. There's should be 64 of them.

[07:21 - 07:32] And I can check by just in the console, I can say document dot query selector, all of the grid item. Awesome looks like there's 64.

[07:33 - 07:57] So what exactly is this second use effect hook doing to make sure our playlists are all here? So since we're keeping track of two different things here, the playlist data, which is the data object returned from the Spotify API endpoint JSON response and the actual array of playlists we're using to render our playlist grid.

[07:58 - 08:09] We can use playlist data as a dependency for this use effect hook. So whenever this playlist data variable updates, we're going to run the logic in here.

[08:10 - 08:25] And here we just call a function called fetch more data, which is an asynchronous function just like we have in our first use effect here. But here it checks if playlist data has a next property on it from our paging object.

[08:26 - 08:39] The next property will be the next set of playlists to retrieve from the API. So it uses Axios to send a get request to that next URL.

[08:40 - 08:47] And when that data comes back, we set the data to playlist data. So basically I'm creating a loop here.

[08:48 - 09:03] And when playlist data comes back, we're just going to run this logic again. So before all of this logic is run again, we make sure to call set playlist to update our playlist array to render our playlist grid.

[09:04 - 09:18] And the set playlist function, all I'm doing is merging the previous playlist state variable array with the items array on the current playlist data object. And we're doing that just by spreading them into an array.

[09:19 - 09:28] So to get a better idea of what exactly is going on here, I'll just add a little bit of a console log of the next URL. And we can take a look at the console here.

[09:29 - 09:35] We give it a refresh. We'll see that this use effect hook is being run four times.

[09:36 - 09:55] So the first time the next URL has an offset of 20, the second time it has an offset of 40, and then the third time it has an offset of 60. And since I have 64 playlist, once we're at the last paging object, basically after play with 60 and on, the next URL is null.

[09:56 - 10:07] So once that's null, we don't need to call fetch more data anymore because we have all of our playlists. And just a note here, it since create react app uses hot module reloading.

[10:08 - 10:29] If we make changes in our file and save them, the page doesn't do a full page refresh. So if we scroll down here, I'm pretty sure all of our playlists repeat again, since I just saved my playlist.js file, we can confirm that by taking a look at our query selector all here again.

[10:30 - 10:41] And now instead of 64, there's 132 grid items here. But if I give it a refresh and then check that again, there's only 64.

[10:42 - 10:57] So if you encounter that, don't worry, it's just a hot module reloading thing. Okay, so now that we have our playlist page built out, the last page we need to build out in our app is our individual playlist page.

[10:58 - 11:09] So this page is going to just render each track of every playlist and we'll be able to build out a way to sort those tracks by different audio features, like dance ability, tempo, and