Alright, next up we should talk about component configurability or component flexibility, something like that, fill in the blank. It's really cool that we can reuse components, but there will absolutely be cases where we need to tweak them or modify them in some way. So let's figure out what we can do there. To begin, well, let me show you something. If I boot up our server using npx serve, and we open this in the browser, but notice I don't see any assignments here like we did before. And that's because, well look, we haven't booted up that fake API server. So I'd have to open a new tab and say npx json-server on port 3001.

And that's because, well look, we haven't booted up that fake API server. So I'd have to open a new tab and say npx json-server on port 3001. And now I can switch back and refresh the page. And you know what, that's a little annoying. So usually my rule is when I have to run multiple commands to run my tests or start my server, I will always put those within a npm script. Here's how. Let's go into package.json and we'll add a new script section. Let's create a new script called start. And I want it to run these two commands, npx serve and also npx json-server.

Let's create a new script called start. And I want it to run these two commands, npx serve and also npx json-server. Okay, so I want our serve command and then also our json-server. And real quick, notice that I'm using one & symbol. That means I want these commands to run simultaneously. If I used two &s, that would mean let this command complete and then run this, but that's not quite right. I want them to run at the same time. Okay, so let's try it out. npm run and then the name of the script, start.

Okay, so let's try it out. npm run and then the name of the script, start. Okay, so now notice it boots up the server and then it runs npx serve. So now if I switch back and refresh, everything's working and I can now get up and running with a single command. Very cool. Okay, next up, I'd like these to be columns. So if I go back to my assignment section, why don't we set a class of flex on the wrapper here? Give it a refresh.

All right, we switch back, we give it a refresh and now I think that looks better. So let's figure out a place for this to live because yeah, if I come back and refresh, it's being added to a third column, which I don't want. I still want it to be placed at the bottom here. So we have a couple of choices, right? One option would be, well, let's put it within assignmentList. But let's just see. I could put it right down here at the bottom and I could import it. So importAssignment creates like so, but yet the issue here, if I come back and give it a refresh, is that of course, well, the layout is off.

This is our way of saying, okay, if you want to add anything here from the outside, we'll slot it in right below the ul. Otherwise we won't do anything. Okay, so let's see. I come back and refresh. That's back to how it was. And now in our Assignments component, I can say for this top one here, I'm going to slot in anything we want. Let's do hello. And now you'll see on this component only, we've added hello.

Let's do hello. And now you'll see on this component only, we've added hello. Okay, so now I can swap this out with our AssignmentCreate component. And now we have a way to sort of selectively extend the components when and if we need to. So I come back and give it a refresh. And there we go. It's at the bottom. Okay, so now I can fix the layout here. And that should be pretty easy.

Okay, so now I can fix the layout here. And that should be pretty easy. In our AssignmentCreate component, let's set a class of flex or display a flex. Give it a refresh. And there we go. Looking pretty good. So yeah, slots provide one option for extending your components. And you can create as many named slots as you want. Another option would be to provide toggles of sorts. So for example, maybe some assignment list can be effectively closed or toggled, but

Another option would be to provide toggles of sorts. So for example, maybe some assignment list can be effectively closed or toggled, but not all of them. So let me show you what I mean. Let's go into assignment list and we'll say, let's wrap this within a div. And then I'll add a button here to close it. Let's see what that looks like. And yeah, but really I want it to be aligned up here on the far right. So on the div, let's set a class of flex and justify-between. That'll push this to the far left and this to the far right.

Let's keep it simple. If this component has been marked that it can be hidden, then we should show a hide button. Okay. Let's scroll down and we're going to create a new prop called canHide, and that's going to be a boolean. And why don't we say by default, you cannot hide it. Okay. So if I come back and refresh, I should no longer see the close buttons, but if we now turn that on like this right here, canHide, that reads pretty well.

So if I come back and refresh, I should no longer see the close buttons, but if we now turn that on like this right here, canHide, that reads pretty well. Come back, refresh. Now I conditionally display that button if it's turned on. And yeah, that's a basic use of what we call flags. Now in terms of the name, I think canHide is kind of fun. But if it would be something where you would turn it on and off, then that's probably not right. Let's see if we can switch to something like toggle, toggleable or canToggle. Why don't we do canToggle actually, to be a little more future-proof.

Let's see if we can switch to something like toggle, toggleable or canToggle. Why don't we do canToggle actually, to be a little more future-proof. Assignment list, canToggle, and then we'll do it right up here as well. So now we want to say when you click on this button, so we'll go ahead and set that up. When you click on me, yeah, we have a couple options. We could track it locally. So for example, I could have a show property that's set to true. And then when you click on it, we set show to false. And then we can make this entire block contingent upon that property. So only show this section if show is truthy and we have assignments.

And then we can make this entire block contingent upon that property. So only show this section if show is truthy and we have assignments. So I think that would work. That would be one option. I click on it and now I don't display it at all. That would be fine. Another option, if you don't want to do that for some reason, would be to again, emit an event. So let me undo what we had before, which again, I think is fine, but yeah, we might want to instead emit an event that says hide or toggle, something like that.

So let me undo what we had before, which again, I think is fine, but yeah, we might want to instead emit an event that says hide or toggle, something like that. Now the button doesn't do anything. It just makes an announcement. And in fact, if I open up view dev tools, we go into our events and let's take care of it. I click on it and sure enough, we fire an event called toggle. Okay. So now the parent can decide how it wants to deal with that like this. Let's reformat and then say when you toggle, maybe we track it at this level, like show.

So now the parent can decide how it wants to deal with that like this. Let's reformat and then say when you toggle, maybe we track it at this level, like showCompleted equals true. Then we can handle it at the parent level, something like maybe we have a showCompleted property and we make that equal to the opposite of what it currently is. All right. I'm just showing you different options you can consider. Okay. So now, yeah, we could do something like the show is probably appropriate, but we'll do the if like that.

So now, yeah, we could do something like the show is probably appropriate, but we'll do the if like that. Only show this component if showCompleted is true. Come back, refresh. And now we are handling that at the parent level. And that might be useful if there is more to show. Like maybe if you have a div here and yes, it shows the assignment list, but it also shows other things. So if you handle the toggle at this component level, yeah, again, you might end up in a weird situation where there's other things that also need to be toggled, but aren't.