OK, so if you would like to see how I would refactor this application to a used futch custom hook,
here it goes.
So course, first our need to create a file.
And of course, I'm going to call unless you switch gears, then I'm going to set up my component,
which essentially is not going to be component.
But let's just live with that.
So we're going to have our use for custom hook.
And now, of course, I would want to navigate to context.
Yes.
And I just need to think about the setup that I would want to grab from this context.
And I would pretty much want everything apart from this query, so query is going to be the one that
stays in the context, however, of the remainder of the state values, as well as much more functions.
Of course, I would want to set up in my usufruct and I'm going to have to start by importing, of course.
The U.S. state and the fact so I just think that it is going to be quicker if I do it from the context
one, so not only I would want to react, I also would want to grab the U.S. state as well as use the
fact.
Now, I don't need the context.
So I want of course, I can remember now.
I also will use this one, the end point.
That's why in here I'm going to say that I would like to grab this value now, again, in my case,
I'm just going to copy them.
But normally, course, you would remove them from the context as well, since there's going to be no
need when we copy and paste.
Of course, there it is.
Now we have our end point and there we have currently our Cambourne, which, of course, eventually
is going to be our custom use.
But now, of course, keep in mind that the name here is important because otherwise you won't be able
to invoke your.
So in this case, I'm going to remove that export part.
And I honestly also don't need it here, so that should be our start and then we go with export and
then default and then let's call this use.
And then like I said, there's plenty of things that I would want from here.
So I'll just cut it out right now.
My state values like so so we're going to copy and paste since we name this years.
Now, of course, I can use these vouchers and I know I've said this before, but that is very, very
important.
Then as far as the return, what's not really going to be a dif we'll have to decide on the state values
that we're returning.
So we go back to the context.
And of course, I would want to also grab this one so the French as well as the function here.
So I take all of this content out and we navigate back to use French.
And of course, we're going to copy and paste and eventually we will return a object.
So now I have my usufruct.
I'm watching for movies, I have my end point and I'm also going to be passing in the library.
And this looks somewhat good.
But of course, we need to keep in mind that we'll have to set this up dynamically where at the moment,
yeah, we have tutorials, we have one for search and then one for the idea.
Or I would want to construct this use, which has in a way that I can use it in both places.
That's why I'll say here you are all primes.
So that's something that will pass.
And, um, instead of the query, I'll also change this one around.
You are all problems.
So think of it as parameters that will pass in here in the U.S. But now here I'm still using the YORO,
so I won't change.
So of course I'm passing this here where I have the API endpoint.
And the second thing that I would want to pass in is, of course, the euro and then primes and of course
now have to construct those.
You are operands where we invoke our use, Futch, and then we need to take a look at our state values.
So we have is loading.
We have set this loading hankered.
We have error set error.
OK, awesome.
And the movies and set numbers.
So what values are we looking for?
Well, I would want to return his loading error as well as the movies.
So I'll scroll down here and we'll say that we're returning an object.
Of course, in the object.
We would want to check whether we're alone.
Then we also would want to pass in the era, of course.
And then eventually I also would want to grab my movies now for the movies, though I wouldn't want
to change this around a little bit and call this data, because we need to understand that, yes, in
the beginning we're going to have the movies as an array.
But when we talk about that, one movie, of course, is going to be an object.
So instead, I'm just going to call this data.
So I have a name that is a bit more universal.
We'll go with data and then sit there and notice where I have the set movies.
Now, of course, I'm going to go with data and then I'm going to pass in the search now.
Yes, there's still one Gocha over there, but for the time being, well, just going to go with this
setup where I go with some data and then I pass in data.
So whatever, I'm getting back and the search.
So now, of course, I'm returning all of these things and of course, I need to also return the data
as well, and then we navigate back to the context we would want to import our use for.
So we go here with years, which and that is coming from.
And of course, we're looking for our use fetch function.
And where we have these two hours, we leave the query.
So that stays exactly the same.
But of course, now below that I would want to invoke might use fetch.
So I'm going to go with my years FUTCH and this is where I would want to pass in that you are Uprima
because remember in the U.S.
I'm looking for those.
You are upper arms.
And how do we set this up again?
We're going to go with them.
Let's try and learn.
What was the value.
Well, we needed to set up, of course, our.
And.
Because that was required by the API and then would go with us.
And then, of course, I'm looking for my query like so query here.
And then, of course, what is going to happen is that I'm going to be getting back from the use fetch
the values.
Correct.
So I'll still get these loading, I'll still get the error and I'm going to get data that I'm going
to call some data and then that one is equal to the more.
So we save the moment.
I have the complaint that important body of module reorder to the top and the error, of course, is
there because I placed it below the variable.
But then once I save and I navigate back to the movies, everything should work.
So here, let's go back to the movies and we should display all the movies so that functionality still
should work.
So we're going to navigate to the bigger screen I invoke that shouldn't change.
So I still get is loading, I still get error and I still get data on this case.
I call this movie and I just pass in my query.
So now of course, I would just want to test it out whether when I'm typing, everything works and as
you can see, I can still get the movies.
Now, the key here is to do the same thing in a single movie because again, our main goal was following
where I only want to set up one fetch.
There's really no need for me to repeat the same functionality.
So we're going to navigate to the single movie course here.
We have the idea and I'm going to have movie set movie and then fetch more.
So instead, what I would want to do is go with import and not use fetch and not use fact.
Sorry, use fetch from online.
Of course we have use for each file and I'll still keep the idea so that won't change.
But all of this I can nicely replace.
So I'm going to remove the usufruct as well.
And again I would want to invoke uSwitch.
So in this case I'm going to go online all the structure from my object that I'm getting back used for
and remember in the use fetch we needed to pass in those euro parameters.
So in this case, I'm looking for I am unequals.
And then, of course, I'm looking for the correct.
So whatever is the profit entity, use fetch.
And then again, what I'm getting back from the use is loading.
Then I also want to get the error and I also want to get data that our name is movie Y or because value
is going to be different.
Now there is a gotcha.
And don't get me wrong, they're still gocher because at the moment I'm just checking if the response
is true.
And of course I'm checking for a search.
But when I'm going to be getting the single movie and of course it is not just going to be data search,
it is just going to be an object.
So for the time being, why don't we do this?
Why don't we just comment about this data search answer and let's just cancel log what we have or not.
Now, let's do it this way.
We'll leave the data search.
But let's just log what we have in a data.
So, of course, we'll have to set up one more.
If so, let's go here with data and then we'll pass in data that search into the moreish.
So setting up our memories with the values that we're getting here.
But I also would want to console log that there, because we need to keep in mind that even though our
functionality here is going to work beautifully, well, there's going to be one error once we go to
the second one and then he notices this invalid API key.
Hmm.
OK, so let's not forget to the bigger screen and let's see.
So we have our console.
OK, that is good.
I'm getting back the object and in here initially I get back on all of these are bad memories and all
that.
But then once I navigate here, notice that I have the complaint that this doesn't make sense.
OK, so the error is actually not the one that I was expecting.
It is because I didn't set up the API properly nourished.
I have API key and then I did not the and so right away had I to get the idea and that's why I have
the error.
So I've navigate to the single movie and in here let's add and, and we shouldn't get this error anymore.
However, there's going to be a different error and that's why we're allowing the data as well.
And now I can see that kind of the structure property of poster of movie as it is undefined right here.
So why is that happening?
Well, let's check.
What is the value of.
That we're getting back.
So let me refresh here and notice how I have the search, so that is my right.
But what I should be getting back is, of course, of this movie.
And here I just simply need to change this around where if there is a search, yes, I would want to
pass in the property value, which is going to be my.
However, if I'm looking for a single movie, I know that that search won't be on the object.
Correct.
Because I can clearly see that I'm right away getting back the object.
That is what I'm canceling.
So I'm going to say if their search property exists, awesome.
And if not, just get me the data, which just means that I'm going to be in a single movie page.
So now, of course, our functionality works and we only need to remove those council logs.
So I'm going to go to the movies and remember where I was looking for the poster.
I'm going to remove that.
And successfully we set up all our functionality when it comes to fetch in one place.
Yes, we had to jump through some hoops.
We needed to add.
Here you are, Oppenheim's.
We needed to set a little bit differently as far as when we're invoking the French and what we're returning.
And also we need to check whether we are searching for the movies or we're just getting a single movie.
But now check it out in the context.
We only have query and I'm just using my uSwitch and the same in a single movie.
Now, I don't have this repeating functionality and let me just don't check that everything works.
We have Batman.
I keep on removing that.
I have the error.
If I remove back to the empty input, of course I do have the error.
Then if I go here with Superman, of course I have the movies and then if I click, I get the specific
movie.
That's our project.
Hopefully everyone enjoyed it and I hope to see the next one.