Okay.
There is one more thing that I would like to show you before we'll actually conclude this chapter is
our services.
So if we go to our our API services, you see we still repeat a lot of these things over and over again.
We have the same thing here almost in every single method.
And there are many ways how we can actually reuse it, because we could have like possibly one function
that will require a body token and then a method and a URL, and it will do all of all of that for us,
because all of the the methods are similar in a way.
So if we provide this, then we could construct any API call like this.
So we don't need to have multiple calls.
But what I want to do is I want to use the opportunity to show you how to write our own hooks.
We use a hooks a lot in this tutorial.
So we use use state, use effect, use cookies and use context and so on.
So basically I would like to show you how to create your own hook, and that will kind of let you understand
it, how that works in the background.
So let's create our own hook in this video.
What I will do is maybe in the services I will have create new file and I will do name it use fetch.
So basically what we will do is we will have a hook.
That is use fetch.
And convention needs to to have the name use as you have it here.
So use cookies, use state use effect and so on.
Use context.
So that's the convention for naming.
And what we need to do is we need to create a normal function.
So it will be very similar to what we've done for our component.
So I will say use fetch.
And that's going to be on our function here.
And there is nothing really unique about this.
What I can do is I can export use fetch.
I can do default.
Export default usefetch.
So basically what we have a function that we exported here.
What what that will give me is we can actually use whatever is coming in the react.
So I can have you state here and we'll need it and use affect.
It will make a little bit more sense in a in a second.
So we can use whatever it's coming in react.
And what we want to do is we want to return something from that from that function.
But first let's create some data inside our function.
So I will do constant.
Let's say we'll have a data and use.
Set data.
That's that's going to be a way to set it up.
And you will use date.
And we've done it before.
And at start it will be null.
What I want to do is I want to have two more.
So one I will have a for a loading and set loading.
And that's going to be true.
So by default we will have like loading true.
And then we will have error and set error.
And it's going to be null.
So basically this is what we will have in our function.
We will have data and we will have a loading state.
And then we'll have error.
So what we need to do is at the end of this we will return.
And I can return data loading and error.
So this is basically how hooks works I have something here and I will return it like this.
And I have a misspelled this loading.
So that's what I have I don't do anything much here.
But what I can do is I can go to any of my components and let's say I would like to have we have the
way here to fetch the list of the movies, fetch list of the movies, and let's replace this functionality
with or what I have here with something our own, with our own hooks.
So if I want to use the hook, I can import.
Import.
And I will do use fetch from services.
Use fetch.
You see this is similar to what we have here.
I export the default so I don't have to have that curly braces.
But I have that use fetch.
So what I can do here is I can do constant and curly braces the same as I have done it here.
You see I could do here data loading and error.
And that's going to be my use fetch.
So this is at the moment we have some collision here.
But I will just comment it out and that's what I have.
So if I will use fetch this is my own hook basically that's what's coming back from here like that and
that will be available.
You can also do the array here if you like.
If you prefer array kind of style, it's fine.
It doesn't really matter.
So we have that three values data loading and error that we use our hook.
And we can actually use it here in our fetch.
So let's do that.
So if I will go into fetch we need to do something with that.
So we'll use use effect.
We've done it before in this tutorial.
So use effect.
And what I will do is I will have an arrow function as a first argument.
And the second argument will be a at the moment.
So we can have it as an empty array.
So what should I actually do there.
We can do similar thing as we've done it here.
So let's say we'll have that.
I will copy that and I can put it here.
So we will have a function here.
We can do fetch.
Let's say fetch data.
It will be more generic name, it will be a sunk function.
We'll call it from here.
And what we'll have here we can call API.
But let's say we want to use the this one.
So if I will go fetch movies I'll just copy that and I will put it here in the fetch.
We'll need to have that say API URL.
So I'll copy that and I will put it here.
We can either put it here or outside.
It doesn't really matter.
So we will have that.
So we'll have fetch data.
We will fetch whatever URL.
And then this bit and this bit actually if we want to have that fetch reusable what we can do is we
can actually provide it here.
So if I will do URL and that will be sent to this hook, then I can use that URL bit.
Instead of that, I will take this bit here and I will cut it.
And in our component when we actually use our fetch here, I will put it like this.
So this is what we will send first to our use fetch.
And that will be as a URL.
And that URL will put it here dollar sign curly braces and inside URL.
So basically this will be a static part of it.
And this will be whatever we will send here in our fetch.
And then we have a get.
Then we will have a token token here.
What we could do is we can basically use this.
So we can as this is the normal function, we can use cookies here.
So we can say this is cookie.
And we will need to also import use cookies.
And I can say this is a cookie.
Mr. token so basically the cookie will be loaded directly from here, so we don't need to pass it.
Then we could to make it reusable.
We could have like a body and we could have a method here.
But I will keep it very simple.
So this is what we will have.
But if I don't return anything here or I don't want to return anything here, what I can do is we can
actually set, set an error here.
So I can do set an error.
Error getting data.
And here what I can do is set data.
Whatever is coming from there.
But I need to actually.
So we want to await for the result.
So what I can do is I can do constant result is equal to await response JSON.
So and that will be returned here.
And then what we can also do is set loading here.
At the very end to false.
And I can do at the very beginning here.
For a beginning here.
Set loading to false.
And we can also do set error to null.
So whatever we sow to null.
So whatever we start.
Use effect at the moment is not trigger or anything here.
So whatever we start this we will trigger that function Fetchdata.
This is the function we will set loading to false because that's the set loading to true actually.
And excuse me.
So we will set it to true.
Then we will set error to null.
And then we'll try to fetch it based on the URL that we passed to this hook.
And then we will have the cookie here.
And if we have a response not if we don't have a response, then we set an error so it will be an error
there.
And then if we have that, we will set the data as is whatever is coming as a data.
And then we will set the loading as a false.
And that's it.
And here what we will do is we will actually return it.
What we can do is we can base that useeffect on that URL.
So whenever we change the URL it will be retrigger.
So this is what we have here.
And basically our usefetch hook is done.
So what we have now here is in that component, what we have is we have data, we have loading and we
have error.
So we don't need to do that anymore.
So we fetch the movies like this.
I will comment it out for the future reference so you can keep it this way if you like.
But so we already have it here.
So in the next video what we will do is we will adjust this component to work fully with Usefetch hook.