Nicely done.
We're in the final stretch now, of course, we just need to set up our single movie page so we have
a bunch of movies.
We click on a movie online and we navigate the single page.
But of course, what I want is to display specific info about the movie that is going to be the poster,
the title, some description as well as there, and also a link to navigate back to all my movies.
And once we have the idea and what we're going to be building, we're going to navigate, of course,
to our single movie dress.
That is our component, and we'll set up our page.
And since it's not our first rodeo, I'll try to make everything in this video.
So my apologies if it gets a bit lengthy and we're going to start by grabbing the idea from the use.
Remember, react router down provides the hook used perhaps hook where we can get the value that we're
passing in.
So once we click on a movie, we pass in the eddy in our YORO.
So now of course I would want to get it back.
And that's why our second line.
Remember, we have key value pair and I named my key body.
If you name the shake and bake, just look for shake and bake and we invoke use prompts.
And then of course, if we want to double check, we just go with it.
And then if everything is correct in a console, we should see the beautiful.
And then of course we want to set up some state values as well.
So I'm going to go over here with CONSED online movie now that by default is going to be an object.
So we're going to go with that movie and that one is equal to use state and then we're going to pass
in the object by default.
We will be empty.
Then we're going to look for a loading and unloading and set loading.
So is loading and then set loading.
So, um, and that one is used state again and by default it is going to be true.
Then also, what I would want is to have an IRA, so I'm going to go to concert and error and then set
Setara, remember, error was an object in our context and in here will do exactly the same.
So we have a show and then forth.
So show coal.
And so the value for show will be false by default.
And then also I'm going to go with my message.
So once we've got this, then of course I would want to set up my function to fetch Amawi.
So we go here with Consed and fetch a movie, but.
And that movie and of course, I'll use my sink again, so I think I'll pass in the URL, so say you
are all online as far as the function body will or wait for seconds and then response is equal to wait
and then fetch here and then will pass in the URL.
So whatever we're passing in and then of course I'm going to go with CONSED and then data amount is
equal to a white man.
We're looking for response, response, response and then Drayson.
So now of course we have the data and this is going to be again the case where if we're successful,
then of course their response will be true.
So I'm going to go with console log and then there and now I would want to set up my user.
So use fact.
And as far as the callback function, well, here's the deal.
I would want to invoke it.
When my I.D. changes and of course, I'm going to go fetch and here's the kicker in the context, I
already have a pinpoint correct.
So if I take a look at my context, I should have my variable.
And in here I just have the root and point with my API.
So instead of constructing a new one, what I did is just imported from the context.
I said, yep, there is a variable by the name of API endpoint.
Please grab that one and then when I'm fetching I'll use that URL.
Now, of course we'll have to construct it a bit different.
The URL in this case we're looking for the idea, but at least the general setup is going to be similar
to what we have in a context where again, we have an API endpoint.
And then in this case we added a query with our URL primer for search.
Now, in this case, I we want to set up a euro parameter for the ID, so we want to get specific info
about the movie.
So I'll set up again the template literal.
Then I'm going to be looking for my API and point.
So and then we add and again and we go with AI and then we set up.
Well what is going to be the idea, of course, as far as the value we pass in this site.
So the one that we have over here and then once we fetch course we should.
By the way, this is not fetch this fetch movie like so.
And of course, we should have some kind of value.
Now, in this case, it complains that usufruct is not defined.
And that is, of course, because I have a bug.
So I'm going to invoke it.
And there is now I'm getting back the info about specific movie.
I have title, of course, and rest of the properties.
So we're going to go back.
And again, we have at the moment the response to be equal to true.
Correct.
But there's going to be cases where there's an error.
That's why the same how we did before.
We're going to go if and Mandera and then response response is equal to false.
So in this case, I'm just going to check for false.
So that's going to be a bit different.
And then if that is the case, then of course I'm going to set my error.
If not, I'm just going to go with loading so else and then set the movie.
That movie, and then we're going to go with data and also I'll set my loading to be false set loading
and then we're going for false.
And if there is an error, so if response is equal to false, then of course, I would want to set my
hair correct.
So we're going to go with set error and we passing the object show should be true now.
And as far as the message, again, it is located in data and that I'm an error like so.
And of course I would want to do the same thing where loading should be false.
So set loading and we go with false wind rocket.
Beautiful.
And now of course, I would want to deal with my return and there's going to be three returns.
There's going to be one for loading, one for error, and then one when we actually have successful
batch.
So when we get the movie back, well, that is going to be our third return.
So again, let's just go with if and we're going to go what is loading.
So if we're loading, what are we doing?
Well, we just return a death and the class should be loading class name and then loading like so.
And after that I'm going to go with another.
And then of course, in this case, I'm going to go with error.
Now, what is the proper you going?
I'm looking for the.
I'm looking for every object and then the property of show, correct?
So we're going to go with our ANNUNZIO.
If that is true, what I would want is to return.
So I'm going to go here with the return and we're going to go with Dave will add a class name of page
and line or so and line.
Instead of this div, we're going to have a one with the Arab name.
So our I'm on that message.
So that's where our error is displayed.
And then also I would want to have a link that just allows us to navigate back to the home page.
We had a class name here.
The class name is between and inside of it will go back to movies like Shall We Say.
We should see, first of all, loading, which, of course, is not going to be visible at the moment
because everything loads fast and eventually we should have heading to what the text of a single movie,
since everything is correct and once we have covered if the loading is true, an error is true as well.
Now, of course, I would want to get the values from my movie screen here, by the way, which show
different.
Come on.
That's not what I wanted.
I would want of the structure, the values from the movie.
However, again, keep in mind that we can only do it because we're doing that after the loading and
the error, because by default.
Well, this is going to be empty object, so if you'll try to the structure properties from the object,
of course, you're going to get a big, fat error.
And as far as the properties, again, I'll give them Alias because I find it a bit easier.
So we're going to go for a title here title and that one is equal to title.
The plot is equal to plot and then each year is equal to a year like so year.
And we're going to set that equal to the movie.
So the name of my parameter.
And then once we've got all of these properties, then of course let's just work on our return.
So we go with Section Class nine will be single and then hyphen movie.
And as far as the values inside of the section, well, we're just going to go with HMG then we're looking
for our poster here.
And when it comes to alternative course, we're going to go with the title.
Now, if you want functionality like we did with movies where you have this no picture available, definitely
to do so.
In my case, I didn't want to repeat myself.
So we're just going to skip that part.
Poster is equal to the poster.
If you want to set up that ternary operator, definitely do so.
And then we're going to have a deal with a class of single.
I found movie movie hyphen and info, and of this there was go with heading to we're going to say title
here and there's a plot as well.
So plot properly plot.
And then also a year.
So heading for and we just set our year.
OK.
Beautiful, and then the last thing that I would want to display is the link back to the home page.
So I'm going to say a link to basically you can just copy and paste if you want.
That's going to be faster.
So I'm going to take the link from my error and just copy and paste, and I should have the link back
to all the more.
So now, of course, we have successfully set up all the movies as well as single movie page.
Now, technically, we're done with application, but there's optional video coming up where I will
refactor the fetch, because as you're looking at it now, we have a bunch of properties that are very
similar.
So we have these state powers here as well as the function.
Pretty similar to context, Charles.
So next video, I will refactor our application so we have one use for each custom.
And then we just use it in multiple places, if you want to set yourself a challenge where you would
want to set up that use for each customer like yourself, please definitely do so.
But as an extra video.
So it's going to be optional.
I'm going to show you how I would refactor my application so I don't have to repeat this functionality.
So there's going to be one use fetch hook.
If you're not interested in that, we're done with the project.
Hopefully everyone enjoyed it and you can just move on to our next project.