Dynamic View Route

[00:00:00]
>> So we're gonna create a new route inside our src/routes directory which is gonna be called movies slash, and then view as a dynamic parameter. And then inside that we can create a page.svelte component. And we're gonna be loading some data, so we'll add a page.ts as well.

[00:00:33]
Now, we can actually do one better than having a dynamic parameter here. Because we've defined which views are valid, trending, now playing and upcoming, we can use a route matcher so that this view dynamic parameter is not matched for anything that is not one of those three things.

[00:00:51]
So the way that we do that is we create a matcher inside src/params. We'll create a new matcher, call it list.ts. And you'll remember that we need to export a match function, which is gonna return true if the parameter matches and false if it doesn't. And if were return param, In views, which is just import like that.

[00:01:37]
Then this is gonna return true if the parameter is trending, now playing or upcoming, but false if it's anything else. Now that we've got that, we can add that to the parameter here. Just rename that directory view = list. And now if we go to /movies/trending, the page exists.

[00:02:02]
If we change that in any way, like trendingx, then it's a 404, it no longer matches. This gives us some confidence when we're building our data loading logic that we are in fact dealing with a valid view.
>> Sorry if I missed it but is there is there any reason you would wanna do it this way versus just making three routes for trending, playing, etc.?

[00:02:25]
>> Yeah, so the question was what why are we creating a dynamic parameter instead of just repeating the directory? And the answer is that these pages are essentially the same they're using the same component, they're using the same logic. And we could do it by just reusing components in three separate files, but then if we add a new view, like, the most popular movies or like the top rated movies, then we've got to keep duplicating code.

[00:02:49]
And if we do it this way instead then it allows us to express those things just once. It's also for the sake of the workshop, it's a good opportunity to use more SvelteKit features and that's the main reason if I'm honest. Yes.
>> Do you need to remove the three awaits in the promise?

[00:03:11]
>> Yes. All right, so, thank you to whoever noticed that after removing the waterfall in our root load function, we actually did no such thing because we're still awaiting the API calls here. We need to get rid of each of these. Like that, although this is now erroring because we're not returning a MovieList from the fetch call, we're returning a promise of a MovieList.

[00:03:40]
So we need to get each of these and just wrap that in a promise like that. And now because we're awaiting all of these trending has the correct type again of MovieList so. Thank you to whoever noticed that in the chat, that's very helpful.