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.
And the endpoint for this data is movie/now_playing.
It's gonna give us the same type of databack and 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.
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.
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 plain data and then we're getting the upcoming data.
And then finally, we're getting the information about the featured Movie.
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.
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.
So we're gonna define a new module that describes the different views that we can
use in this application.
And source /lib will add anew 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.
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.
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 an upcoming movie pages.
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.
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.
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.
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.
Because if we click those links, nothing is gonna happen yet,
because we haven't created that route.
So let's do that now,