Now Playing & Upcoming Movies

[00:00:00]
>> Okay, so our carousel is beginning to take shape, but now we wanna add the other two. We wanna add one for now playing and we wanna add one for upcoming. So back in our data loading function, our page.ts, we're gonna duplicate this line, Then we're gonna add now_playing.

[00:00:29]
And the endpoint for this data is movie/now_playing. It's gonna give us the same type of data back, a MovieList. And then we'll do an upcoming as well using the movie/upcoming endpoint. And we can pass those into our component in the same way. So in our page.svelte component we can duplicate these carousels.

[00:01:02]
We can add one for now_playing. And we can add one for upcoming. Some of the movies are duplicated between these lists, that's totally fine. These are the three separate views that we wanted to see. Now if you're paying really close attention, you'll notice that there is actually a problem in our data loading function.

[00:01:29]
And that is that all of these calls are waterfall. And what I mean by that is we're going away and we're getting the trending data and then we're getting the now_playing data and then we're getting the upcoming data. And then finally, we're getting the information about the featured movie.

[00:01:43]
And that's no good, we can make that much more efficient by issuing these top three requests in parallel. So we're gonna rewrite this code a little bit. We're gonna do const trending now_playing. And upcoming all together equals await promise.all and then we're just gonna grab all of these API codes, and put them inside that array Gonna get rid of the assignments and we'll turn the semicolons into commas.

[00:02:24]
Now we're gonna issue those API calls simultaneously, which is gonna result in a faster page load. This one is inevitably waterfall, because we don't know which movie to get all of the details for until we know what's trending today Obviously, at the moment we just have a grid of images, here we don't know which list is which.

[00:02:57]
So we're gonna define a new module that describes the different views that we can use in this application. In scr/lib will add a new module, views.ts. And inside here I'm gonna declare a new interface, view, we'll export that. Title is gonna be a string, and the endpoint is also gonna be a string.

[00:03:30]
And we'll use that endpoint later on when we have dedicated pages for each of these views. And we're gonna create an object of views like this. We've got a trending view, which has a title of Trending and an endpoint as we saw is trending/movie/day. We'll create on our now_playing view, the title of Now playing, and an endpoint of movie/now_playing.

[00:04:15]
And finally, we've got our upcoming view. Now inside our page.svelte, we can reference these views and pass the view information into the carousel. And then we can render a header and we can also use that information to create links to the trending and now_playing and upcoming movie pages.

[00:04:51]
So in our carousel component, we're gonna export a new value which is view And is gonna import that from $lib/views. And in the carousel, we're now going to add a header, Which is gonna have that column class so that it's constrained to the width. And the title of the h2, or the text of the h2 is gonna be the View title.

[00:05:32]
And we're also gonna invite users of this component to pass in an href so that you can see the entire list. And the reason that we're doing that, if you look at the original, is so that when you have a trending carousel, you can click to see all link.

[00:06:03]
And it will take you to a page of all of the trending movies. Right, we've broken the page because we're not passing in view and the href. So let's fix that in our page, see, we're now getting a red squiggly on these carousel components because we're not passing in the props that it expects.

[00:06:31]
View=, and then we need to import the views data from the file that we just created. Do the same thing for now_playing and upcoming. And we can now see those headers along with those links on our home page. Of course, if we click those links, nothing is gonna happen yet, because we haven't created that route.

[00:07:42]
So let's do that now,