There's one last change we're gonna make to our search screen component before we start to render out
that list of results.
So at this point our search screen has a lot of code inside of it and a lot of the code inside of here
is not really related to our search screen at all.
Instead it's kind of some business logic that's all about making a request to some outside API.
So it would be kind of nice if we could somehow extract this code into some other location side of our
project and essentially have two separate files.
One file would be all about showing our search screen and another file could maybe export a function
that could be used to actually make use of this Yelp API.
So that's exactly what we're going to do in this video.
Extracting business logic from a react component is one of the reasons that we make use of these things.
It's really easy to extract any logic that makes use of a hook into a separate file and then reuse that
logic inside of multiple different components.
In our particular application we don't have any other components that are ever gonna have to make a
request to the Yelp API.
Nonetheless we're going to still extract this logic just to understand how we can extract stuff related
to hooks so to get started going to first create a new file that I'm going to use to extract some amount
of this Yelp API logic to go inside my s RC directory.
I'm gonna make a new folder called hooks when we extract some amount of hook related logic into a second
file.
We're technically creating our own custom hook remember a hook is essentially a function that adds in
some additional functionality to a component that we create whenever we create a hook.
We're always going to use a name.
So going to make a new file inside of here inside the hooks directory we usually create this file with
a name of something like use and then a word that essentially describes what kind of resource or thing
or whatever this hook is going to help us with.
So in our case re centrally adding in some amount of code or some business logic related to dealing
with some search results coming back from the Yelp API so I might call this use results.
J.S. remember a better term for results inside of application would have been like businesses or restaurants.
So a better name for this book right here could have been something like Use businesses or use rest
rants like so.
But again I decided to use results just to decrease the chance we make a typo inside of our code okay.
Now inside of here we're going to add in all the logic that we had related to our search request to
the Yelp API.
So the first thing I'm going to do is that in a couple of import statements at the top.
First I'm going to import use effect and use state from react.
I'm also going to import that Yelp API that we created.
So import yelp from up one directory API Yelp like so then after that I'm going to do an export default
and export an arrow function.
So inside of this function we're going to add in all the code we need to actually make a request to
that Yelp API.
And at the bottom we're going to return a couple of different variables that we're going to make available
to our search screen component.
Now I got to be honest with you the first time you extract some hook related logic into a separate file
it's kind of a tricky thing.
So I'm gonna show you a little trick that we can use to kind of make our lives a little bit easier.
So what we're going to do here is we're going to first extract all the code inside of search screen
that is related to the Yelp API except for our ASX so all the code that's related to our Yelp API is
essentially everything from const results right here all the way down to everything above RJ OS X block
all the stuff that I just highlighted is 100 percent related to our Yelp API and you might think that
the term and set term piece of state right here is related to our Yelp API as well.
Well technically not our Yelp API really just need some kind of search term to work correctly so that
term piece of state is not 100 percent really directly related to our Yelp API so I'm going to take
all stuff I just highlighted I'm going to cut it and then paste it over inside of that arrow function
we just created so now inside this file we are creating the results piece of state.
The error message piece of stage our search API function and our use effect call as well.
So that's part 1 we're going to essentially cut and paste all the logic at some component that's related
to some piece of business logic.
Now in part 2 we're going to take a look at our JSA X block.
We're going to note all the different functions and variables inside of our JSA X block that are coming
from all that code that we just cut and pasted.
So note that inside of our JSA X block we now have a reference to the search API function.
We have a reference to our error message piece of state and our results piece of state.
That's the only three things that we reference inside of our a block because those things are now needed
inside of our search screen component at the bottom of use results.
I'm going to add in a return statement and I'm going to return those three variables that we need inside
of an array.
So remember the three different things we still need inside of our ASX block.
Here are search API results and error message.
So going to return search API results and error message.
Like so.
That's part 2.
So we're returning the things that we need inside of our component inside of an array.
So now part 3 we're going to go back over to our search screen.
We're going to import that hook that we just created.
So at the top I'm going to import use results
from up one directory hooks use results like so then inside of our component we're going to call use
results in very similar to how they use state hook returns an array with some variables that we need
whenever we call user results.
That's going to give us an array as well that has the search API results in error message variables
that we need as well so underneath our you state call I'll do const search API results and error message
and those are all going to come from calling user results and that's pretty much it.
The last thing I'm going to do here just all a bit of cleanup I'm going to delete that import statement
at the very top zip code do we now have inside of our search screen component is essentially identical
to what we had before all we did was extract some amount of business logic into a helper function.
The nice thing about this approach is now we can make use of this helper function inside of other components.
As I mentioned we don't have any components inside of our app that need to do a search of the Yelp API
besides our search screen.
But if we did we could very easily reuse all the code inside of here now lasting and to do is say this
file in a flip back over and make sure that I don't have any error message and make sure that I also
get 50 results back and it looks like I do.
Perfect.
Now as I mentioned understanding how to extract hook related logic is definitely a little challenging
thing.
And you might be sitting there wondering OK why do we not also extract this term piece of state we're
going to take a look at many other extractions of logic throughout this course.
So you're going to get a lot of practice in extracting some amount of logic into a helper file so we
can easily reuse it at some point in the future.
Let's take a pause right here.
Come back the next video.
And finally I think we can start working on showing this list of different results to our user.