Build a Fullstack Music App with Next.js Create Playlist Menu

Transcript from the "Create Playlist Menu" Lesson

[00:00:00]
>> Definitely we wanna pick up where we left off, which was with these, sidebar component. We initially got our first set of menus at the top there, with our icons looking nice, matching our designs, our designers and our product managers would be proud of us for this first pass.

[00:00:14] Next what we wanna do if we follow that design is we wanna get this second group of icons here, followed by this divider, and then followed by this scrolling list of playlist. So, let's continue on and make that happen. So let's go over to our code, And where did we leave off?

[00:00:33] So we left off right here with this menu, this list inside of this box that had a margin bottom. This was the first group of menus, it was iterating over this menu array. We're gonna do the same thing. With the next group of menus, we're gonna make another array, and we're just gonna iterate over that and just put it right underneath, and it'll be pretty similar, just a space in between.

[00:00:55] So let's do that. So we'll make another one here, I gonna call this one the, I don't know, music menu, since it's just two things talking about music, create playlist and like songs. So we'll do that, so music menu equals an array. And it's pretty much the same thing, right?

[00:01:13] So we're gonna take one of these, copy that, bring that here. And this one is called Create Playlists. And the one we want for this, the icon is gonna be MdPlaylistAdd. There we go, oops PlaylistAdd. Right now we're gonna say, let's just make this go home, cuz really this is gonna do something, it's not gonna route anywhere, it's actually gonna do something.

[00:01:45] So we can figure that part out later when we get to that. And then for this next one, this one's gonna be, I think it was favorites. So favorites, and this one's gonna be MdFavorite and /favorites. There we go. Scroll down to where we left off. I write off this box that I have here with a 20 pixel margin bottom.

[00:02:09] So I'm just gonna collapse that, get it out of the way. And I'm going to make a new box, that's gonna go right after it, and it's pretty much gonna be the same thing. So I'm gonna say box right here. I'm gonna make a list just like we did before with some spacing, same thing with two, spacing and then we are gonna iterate over the music menu.

[00:02:32] And we will just say item, like that, and then gonna do a list item, just like we did before, like so. And then for that list item, we're gonna do some padding of 20 pixels, oops 20 pixels. And then we're gonna do a font size of, let's see, let's do something 16 pixels I think as we had before, and then the key is also gonna be the name, that's unique.

[00:03:04] And then once we're inside that list item, we need to add the icon and the navigation links. So we can actually just pretty much copy this. I'm gonna take this link box, all the way down to this box, just gonna copy that. Gonna go down here, gonna paste it.

[00:03:26] Actually I'm just gonna change this from item to menu so it's just the same. So let me make that menu, and then this will be menu.name. There we go. Everything just kind of works. So we're kind of there. It looks like there's just too much space in between these menu items.

[00:03:44] So we gotta come back and fix that, obviously there shouldn't be that much space. So we'll fix that and I believe that is because I have 20 pixels of padding on a list item, should be padding x, so I want padding left and right, and not top and bottom.

[00:04:02] So that should fix that and there we go, that fixes that. So we are good there. And then other thing is, I think we needed a divider in between these two. So I'm actually gonna add a divider in between these two boxes here, And hopefully that'll give us some nice space there.

[00:04:21] So let's see if that actually did it. So, yeah, there we go, we got a divider there. Looks pretty cool. But now looks like we need some space above this menu that's equidistant to the space below this menu which I believe is, so this 20 pixels margin bottom, so that means this one needs 20 pixels margin top.

[00:04:47] Or I could just put margin y on the divider, which would probably be easier, but we're already here. So, There we go. Now we're equidistant there. And I think the divider is a little too bright. We could probably not make it that color. I'm gonna guess and see that if we change the background color that might be it.

[00:05:16] And it's really cool, so we're gonna actually use the colors that we have in our theme, so I can see like gray., and then a value. You can see I'm getting this autocomplete. So those colors that we filled in with 100 always a 900 I can do that, so I can say gray.900 I don't think the background is that, maybe it's color, let's see.

[00:05:35] Yeah, it was color. Okay, so gray at 900 is too dark, let's try 700. Still too light, let's do 800. That's probably right. So there we go, we got our two lists, we got our icons, we got our divider. Looks somewhat appropriate. And most of it was really just bringing the copy and paste over.

[00:05:57] And because I did that twice, ideally what I would do is I would probably take everything inside this list item, so everything here. And I would make another component called menu item or something like that. And it would just take in a menu item, and it would render that cuz I already wrote twice, that was already too much for me.

[00:06:15] Definitely would probably make another component all that in another file and bring that in. But like I said before, I'm not gonna turn everything into a component for the sake of the course, but I will describe to you when I would do it, and this is definitely one of the cases where I would do it.

[00:06:30] Typically I would set up an ES lint rule where you couldn't even have a component that have more than 50 lines of code, because that's how crazy I am about components as being too big, just break them down as much as you can. And then now people can just develop a lot faster, but at the same time, I think it's just over developing if you have for every single thing on your app, there's a component.

[00:06:53] It's, okay, well, when do you stop doing that? So there's a fine line. I think you just got to do it a long time to figure out what works for you and your team. But typically, I usually shoot for more components versus big components. Cuz what I find out is when you have bigger components, people are touching the same files, you have a higher chance of merge conflicts.

[00:07:16] Cuz it's like you got less files, they're bigger, more people are touching them, there's a higher chance for merge conflicts. And we all don't want to deal with merge conflicts. So yeah, more files, less merge conflicts. But not too many files where it's just like, yeah, what is this?

[00:07:32] This is too many files. So, yeah, it's a balancing act. Actually not I'm thinking about it, I think the divider goes after this. I think I put it in between the two menus. I think it goes after this menu. So I'm gonna move it down. I'll take this really cool divider that we made, and I will put it after this box, cuz that's where it goes.

[00:07:52] It goes in between the menus and the playlist and not in between the two menus. So, I don't wanna get our designers to be mad about that small facts. So gotta move it down now. There we go. And then what's next is we need to make the list for the playlist which again is also very similar, except it doesn't have icons.

[00:08:16] So what we're gonna do there is we're gonna give this a box. But because this container has to scroll because you might have, I don't know, infinite amount of playlist. And we don't want the whole page to scroll, we don't want the whole sidebar to scroll, we only want this section.

[00:08:32] When I say this section I'm talking about from this divider down to the bottom. We only want this part to scroll. The only way to do that in CSS is to give it a height. You have to have a known height in order to scroll, cuz otherwise how does it know when it's overflowing?

[00:08:45] So you have to give it a height. But how do we know how tall this is? This goes back to why I made this absolutely physician and gave it a fixed height, because now I can just do math to try to figure out how tall this is. So what I'm gonna do is, there's a lot of ways you can do it, but I think because the way that these items are positioned, we can actually kind of just give this whatever height we want and it'll just fill out the rest based off a percentage.

[00:09:13] So I'm just gonna say heights, and I don't know, let's try 66%, we'll see what that looks like. And you'll see why I'm saying we can kind of do whatever we want here. So and then overflow y, we're gonna put auto, that's gonna make it scroll. If you put scroll, scroll bar will always be there.

[00:09:31] If you put auto it'll disappear when you're not scrolling and show up when you are scrolling. You can also change the design of the scroll bar to make it look exactly like that design, but we're not gonna get into changing scroll bar designs right now. PaddingY, so that's top and bottom, we're gonna put 20 pixels.

[00:09:51] And then I'm just gonna say hello. So we can see what that looks like. And actually what I'm gonna do is, I'm just gonna do a quick iteration here just to see how this thing scrolls. So I'm gonna make a new, Array. And you don't have to do this part.

[00:10:13] This is just me trying to add some things to it right quick, just to see if the scroll works. 50 things, we just fill with a number that map over those things, and I'm just going to render a component an h1 that says higher. So I got 50 things in here, I'm just gonna map over them and see what that looks like.

[00:10:35] Here we go. As you can see, it's not doing what we intended to do. It's literally going off of the page and it's scrolling the whole page, right? So that's not how we want this to work. So we need to actually fix this. Basically, the issue was this content box, it was not filling up its parent.

[00:10:58] It was like going past it. So I need to give this a height of 100% as well. And I think that might resolve the whole relative issue. So we could try that, and yeah, there we go. So now it's scrolling, and again that was because I didn't set the inner box, the content box to be of height of the container which is 100%.

[00:11:22] So it needs to be 100% of its container which is being loaded inside the player layout to be 100vh Or, yeah 100vh, yeah. Minus the 100 pixels from the top bar right here. Okay, so now that we got our scrolling, I can get rid of this mock content and we can actually put in our list stuff.

[00:11:56] So I'm just gonna make up a playlist right quick with some data, we'll fill this out later when we get some real data in, so I'm gonna say playlists. And for now, this will be a string. Let's just have a string. And I'll just say new array, and I'll do like 30 playlists .fill with literally anything .map and I'm just gonna return the word, We'll just return a string that says Playlist and then the number i+1.

[00:12:37] So we got our playlist here, which is just an array of 30 strings that say playlist followed by a number. This is just a quick way to make an array, new array, how many things you wanted it, you got to put fill because if you don't, the array will just have 30 undefined things in them.

[00:12:54] And then you can't really do anything with that. So I'll just fill it with anything, loop over that with a map and return some strings. So now that we have that, we can go back to our box at the bottom, we can fix this. So the next thing we wanna do is just like before, we're gonna make a list, do some spacing of two, keep it consistent.

[00:13:15] Once we get that, got a map of our playlist, And then for each one of these, we're going to make a list item just like we did with all the things. And then for the list item let's add some paddingX, so left and right of 20 pixels just like we did with all of them.

[00:13:36] And then we'll make a key which will just be the playlist itself, cuz this is a string for now. And then we'll do the whole thing for the link box and the linking. So we'll say link box just like that, And then we'll add a link just like that, which actually I think is called NextLink.

[00:14:03] That's how I imported it. And I'll save it, right click so I can clean up. There we go. And then the next string is gonna have an href. For now we're just gonna go home cuz you don't have that page set up, and then inside of here we'll do the actual link overlay.

[00:14:26] Like so, And then inside the link overlay, we can just put the playlists like that. And I'll just say passHref. Everything's looking good here. All the links are working fine. You can see everyone is linking back to the homepage. The scrolling is working just fine. Nothing else is moving.

[00:14:50] Looks like it's pretty good to go, if this was an isolated component I would say it's pretty good, pretty close to what we need, everything lines up to the left, this part is important. Every time, I don't know, I guess I'm kind of a stickler of things lining up to the left, but I always like to make sure all the things line up to the left.

[00:15:09] And that's how you know if you got your padding or whatever wrong. This is why it's important to wrap your content in a div because I can just give that div a paddingX in this case like we did versus each individual one. So yeah, it's important to do that, but remember if you do do that, if you have own hover highlight because you're padding on individual thing, it won't show the padding for the whole row.

[00:15:35] So, there's pros and cons about how you need to do that.