This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Creating Categories Navigation" Lesson
[00:00:00]
>> So the next task is gonna be to add in those buttons. And we're gonna need to begin that by defining what our categories are. Inside welcome.svelte, I'm gonna add a script tag. And I'm just gonna create an array of categories like this. Now each of these categories needs to have two things.
[00:00:30] It needs to have the label that is gonna be displayed in the button. And it needs to have the slug for the category that is gonna be used to filter the celebrities. When you make a selection, it's gonna take all of the celebrity data from our API and filter down based on that.
[00:00:49] And it goes a little bit like this, slug actors, and then label Actors with a capital A. Just gonna copy that six times and replace each of these. Comedians, Models, Musicians, I missed some. I missed creators, won't somebody think of the creators? And finally, reality TV which, if I'm honest, is the bulk of Cameo.
[00:01:50] Okay, so we have our categories set up. Now we need to put them onto the page, and we do that with an each block. Okay, so let's add our intro text, pick a category to play a game. Then inside this categories div, we're gonna have our each block, each categories as category.
[00:02:36] And each one is gonna have a button. And we're not gonna worry about event listeners or any of that just yet. We're just gonna get the UI mocked up. So we're just gonna stick that category label in there. Save, and we have some buttons. Doesn't look exactly right, but we're not gonna worry about that just yet.
[00:03:02] First, we're gonna wire up the buttons, so that when someone clicks on one, we move away from the welcome screen and into the game screen. Now, You remember earlier when we were dispatching events from inside a component so that another component could respond to them, and it looked a little bit like this.
[00:03:33] import createEventDispatcher from svelte, and then create the dispatch function like this. There is actually an alternative to this approach, which is that instead of the component dispatching an event that the parent component listens to. The alternative is to do in the way the frameworks like React do it, which is, the parent component passes a handler down to the child component.
[00:04:03] And in some ways that's a little bit neater because we don't need the ceremony of creating the event dispatcher. Personally, I prefer the event form because it's a little bit closer to the intent of what is actually happening. But you can do either, you can create the handler and pass it in as a prop, or you can create the event and listen to it.
[00:04:22] One advantage of the event system is that it doesn't actually matter if the handler exists or not. So if you're creating a component that is designed to be consumed in a place where you don't know what props are gonna get passed into it, then that's a nice way to make it decoupled from its environment.
[00:04:46] Okay, we're gonna add a select function, And for right now, I'm just gonna put console.log selected, category. And then we're gonna add that as an on:click handler to the button. On:click equals, select category. Neaten that up slightly. Okay, so if that's been wired up correctly, then when we click on one of these buttons, we're gonna get a log in the console, and there we go.
[00:05:37] Okay, so we know that that is now working as we expect. So at this point, we wanna dispatch the select event, which the app component is gonna listen for. And we're gonna pass the category as the event detail. Get rid of that logging because we don't need it anymore.
[00:06:02] Now there is one little wrinkle here, which is that when the game starts, it's gonna need to fetch some more data from over the network. And because of that, the welcome screen isn't gonna disappear immediately, it's gonna take a moment. And so we could get into a situation where someone could select a category, and then they could select another category before the game actually starts.
[00:06:27] And we don't want to deal with those kind of race condition bugs. So instead, we're gonna disable the buttons. It's an easy way to prevent that from happening. And that's easy enough to do, we're just gonna have a new value called let selected, which starts out as false.
[00:06:45] When a selection is made, selected becomes true. And then we're gonna go down to our button here and add disabled = selected. Right, if I actually just add that logging back console.log selected category, and then click on one of these. It's selected actors, but it won't select any of the others however many times I click on those other buttons.
[00:07:22] And that's exactly the behavior that we want, so all that remains is to add the handler for that event inside app.svelte. And we'll log the event, I do this a lot, it's just a really easy way to check that things are wired up correctly before you start implementing them.
[00:07:49] And then we're gonna add the on:select to the welcome component. Okay, so it's now logging the custom event, which has as its detail property the category that was chosen inside the welcome screen. All right, we're almost at checkpoint one, but there's one big task that we still need to do, and that is to load the celebrity data that the quiz is gonna be composed of.
[00:08:29] And we're gonna do that inside an unmanned handler.