Okay, so on the home page of the app we've got a big featured movie at the top.
And then we have three carousels of trending movies,
movies that are now playing and movies that are upcoming.
So let's grab some data for that first of all from the API.
To do that, we're gonna need to add a page.js file with a load function,
And we're using page js instead of page server js because the place that
we're gonna be able to get this data from doesn't require any secrets.
There's no API key or authentication.
So we're gonna make requests directly from the browser when we navigate
client's side.
So, for that reason, we're not gonna have a server load function cuz we don't need
to make a round trip to our own server to get the data.
As well as making things faster,
that's gonna mean that our application is cheaper to host.
So, create our load function,
And we're gonna grab the fetch helper that we learned about earlier,
In fact, let's make this page TS file instead so
that we can use TypeScript make our life a little bit easier,
And then the place that we need to get this data from is a version of
the movie database API that is hosted by the tastejs.com organization.
So the base URL for our API calls is gonna
be https://api.movies.tastejs.com,
And to get the,
To get the trending movies data we're gonna make a fetch call,
To that base followed by trending/movie/day.
That's gonna get the day's trending movies,
Then we'll use response.json to get hold of that data,
This needs to be an async function so that we can use await.
So let's add that there, And
now that we've done this inside our page.svelte,
we can create a script lang equals ts.
So that we use TypeScript and add export let data.
And if we hover over that data and we'll see that we have a trending property.
Although at the moment it has an any value, which is not much help.
If we're gonna be able to build this app under the time constraints that we're
working under, then it would be really helpful if TypeScript could tell us what
we're dealing with.
So at this point, what I want you to do is open
frontend-masters-svelteflix.vercel.app and
append the word gist to the end of that, right?
That's gonna give us a TypeScript declaration file which contains type
information about all of the responses from the API that we're gonna be
dealing with.
So just hit that row button, grab that whole thing,
copy it and then inside your app,
inside the lib directory we're gonna create a file, types.d.ts.
And it's gonna paste that whole thing,
We forgot the await before our fetch so add that to get rid of that red squiggly.
And when we're dealing with fetch, TypeScript doesn't know what the data is,
so we have to tell TypeScript what kind of thing we're dealing with.
So we're gonna add an as at the end of this and
inside our types.dts we have a bunch of different things, but one of the things
that we're gonna be dealing with a lot is this movie list interface.
This data that we're getting from this endpoint is a promise of a movie list,
Actually no, we need to put that down, down here.
And because we're awaiting it, it's not a promise, it's just a movie list.
We need to import that from our type declarations.
And now when we open our Page.svelte,
hopefully it's gonna tell us that trending is a movie list.
So that makes our life a little bit easier.
Okay, so we can add, Top trending movies over here.
And then the first thing we'll do is just have a look and
see what information we have on that data object.
Open DevTools,
open the console, you can see that we have a bunch of trending results.
And we're gonna wanna grab the first one of these and render the information
there and it doesn't actually have everything that we want for
the big hero image at the top because we wanna grab a logo as well and
the logo is not in the list results.
So we're gonna need to make another fetch call
to get the full information about the movie at the top of the trending list.
So back in our page.ts, We'll
grab the first movie and call it featured,
And now we're gonna make another request to the API,
And this time the data that we're gonna
get is /movie/featured.id,
And that's going to be a movie details object,
Okay, so if we now look in our dev tools and see what's in the feature data,
it still doesn't have quite everything that we need because we need to tell
the API that we wanna get some additional information.
But before we get into that, all of this fetch code is already getting me down.
There's so much duplication because like, first you have to get the response and
then you have to get the JSON from the response.
And it's, it's just no fun.
So at this point, I'm gonna create an API helper in my lib directory.
And we're gonna use that every time we interact with the API instead.
So let's open source/lib, add an api.ts
file, And we're going to start moving over some of that code.
We'll get that base value, drop that in here, we'll export it.
And we'll export a get function, That
takes the fetch object from our event, Need to give it a type.
The type of fetch is type of global list fetch.
And then it's gonna take an endpoint which is a string.
And then we'll optionally add some parameters,
Which is gonna be a record of strings, And
then inside here we can make the actual fetch calls.
So we'll grab that, We'll replace this with the endpoint that was passed in,
Need to make this an async function, And we can return,
The JSON that we got from that response, Okay, so now we can
replace the existing calls to fetch in our load function with our new API helper.
First, we import it.
Import start as API from lib-API,
And we'll replace this whole thing with const trending equals,
Await api.get pass in fetch, and
then we'll just grab that endpoint there,
And we can delete all of that, And we can delete this too,
Now a moment ago I mentioned that we don't yet have all the information.
The movie database API allows you to make multiple requests in one go by adding
the append to results parameter, And
that looks like this append to results.
We can specify which pieces of additional data we want to
get when we fetch a featured movie.
And particularly right now we want to get the images property.
All right, so we're making a fetch to this endpoint and we're passing in a parameter.
We need to do something with that parameter.
So we'll go back into our API module.
And we're gonna add a query string parameter
based on what was passed in by creating a new,
url search params object, url search params will
take any objects that has a set of key value pass and
it will that into a queryable search params
object that you can easily turn into a string.
So we just add question mark and then q, that is now gonna be a URL
that reflects those parameters in a fully URL encoded fashion,
So if we've set this up correctly, we're now making the full API
call is gonna add all of the images to our featured movie.
Append to response.
Okay, so I got this wrong it's actually not append to result it's append to
response, And
now at long last we have this images object inside
the featured movie where we can grab a backdrop and
we can grab a logo to put in our big hero slot at the top there,