Okay, so what we've done in the previous video is to we implement our new hook and we use it here,
but we need to change the way it is handled.
So at the moment what we have is we have a data.
We don't need to keep that this name as a data.
So what we can do is we can actually check it if we have that working.
So if I will go console and I will clear everything we need to login first.
And here I don't see a list of movies.
And but if I will go to network here and I can see.
So let's refresh it and I will refresh everything here.
So you can see here movies are actually loaded and use it.
So basically this is coming now from our hook.
So what we have here is we have that in data.
So what I can say is we we still have a few methods to set the movie like we, we do it here and here
and now.
I don't want to refactor everything, but we can actually have a hack.
So this will give us all the all the data here.
But we can use that data to set our movies.
Or you could change the name this to movies, but since we have a lot of methods with the movies, I
can I can do it this way.
So if I will have.
Use effect that will be based on the data.
So whatever the data will change, what I will do is I will set the movies to that data.
So basically one effect will look for this data.
And if we have that data it will put it there to the movie.
So all the rest of the things will work the same as it was.
We don't need to have this one because we already have that based on data.
You could call this movies as well, so it will work a similar way.
But we also have that loading and we have that error.
So you see what we've done here.
We already have.
If arrow returned this one, we can also do similar thing.
So we can say if loading you can say let's say H1 loading.
Or I'll save it.
And then we have some problems here okay.
If I refresh it everything is fine.
But you, you could see maybe for a split of a second there and it was loading.
So what I could do is maybe I can simulate it.
So if I go here we can go to use fetch.
And before we'll actually do this we could maybe create a fake kind of promise.
So I can do await and we'll create a new promise.
And what I will have is resolve.
It's going to be an arrow function.
And then we will use setTimeout of.
We'll Will passing do pass the resolve there?
And the second one is milliseconds.
So let's say we want to have three seconds of this.
So basically that will kind of create a promise.
It will set timeout for 300 milliseconds.
And then it will resolve the promise.
This will be await.
And then it will move to this one.
So if I will go here you can if I will refresh it.
You see you have that loading here and then you have the, the movie.
So what happened here is that we if we go to our movie list, if you see what is happening when we have
a loading then we display that loading.
Nothing is here because this will be returned.
If the loading is false, then we will check if the error is there was no error and then it will go
to this one.
If there is no error.
And the same way we will test that with loading we could say movies something, something.
So this will be obviously wrong URL and if I refresh it, we have a loading and we have 404.
Basically we could handle this in a different way.
So if I'll go use fetch then this was there was not even a response.
So what we could do is we can have this in try.
We've done that before.
So I will do everything in try.
I will do cat.
Here.
And basically we'll catch an error like that.
And then what we can also do finally we can actually split it a little bit different.
So we will do set loading false in.
Finally.
So whatever will finish our block and that will be trigger every single time.
And then we can have that set error that we had it here.
I will copy it, cut this and I will put it here.
So if we catch an error we will set that error.
But in here if we don't have a response or something will be kind of bad here, then what we can do
is we can throw new error.
And we can say maybe error getting data from here.
And then we'll set that as an error from here.
So it will be more like a future proof that we will have try.
Then we will do this.
If we don't have a response here then we will throw that error.
It will be catch here.
We'll set it here.
Finally, at the very end, we will set out everything to false.
So I will save it now and see if we actually refresh it.
So loading.
So basically what I've done is I draw an arrow here, but and I throw this as an, as a string.
But what I have to do this is coming as an object.
So I will do an error message like this.
So if I will go back here, refresh it, it's loading.
And then I have error getting data you see.
So this is how we done it I can easily go here.
And this throws an error I catch it here and set it there.
And basically if I go here this is an arrow.
We had our loading and everything is fine I will see this.
And then if I will correct this to movies it should it should go back.
No problem.
So it's loading.
And I have list of movies.
So this is how we create our own hooks.
What that will give us is we have an opportunity to create use fetch more reusable.
We don't have to repeat the same thing over and over again as we've done it here.
We have an option to actually fetch the cookies directly from here and to do a lot of automation here.
What you could do is you can pass more options here.
So we at the moment we use only URL, but you can pass also a method that you want to use.
You can pass also a body if you need it and so on.
So that could be a very general kind of hook that you will use it for anything that you will need.
And this is how you do the cook.
And that's kind of conclude our this this section.
So we have a fully functional application with a full route, a full user authentication and how to
handle roads, how to handle contacts, how to do the styling.
And at this point you should know how to do any application using your API.