Now that we've got our configured version of Axis ready to go we can open up our search screen file
once again at the top.
I'm going to import yelp from up one directory API slash Yelp like so now we can make use of this Yelp
instance right here to actually do our network request.
And the first thing we need to think about is how are we going to somehow make this request and then
eventually have the results of it update some content on our screen.
Remember it takes some amount of time to actually execute an API request and it might fail altogether
so anytime that I use the words we need to do something and an update content on the screen.
Hopefully you start to think about state anytime that you want any content on the screen to update whatsoever.
We're always going to make use of state.
So in order to handle the results so we get back from the Yelp API we're going to create a new piece
of state inside of our search screen so inside of here I'm going to define a new piece of state that
I'm going to call results and I'll get the setter as well.
And I'll initialize this to be an empty array.
I'M INITIALIZING it as an empty array because I expect results to eventually have a big array of objects
that contains all the different results we got back from the Yelp API as a quick reminder if we go back
over to the Yelp documentation specifically the search page documentation you'll recall that in the
response we get way down here we get not only the total number of businesses but we also get the businesses
property and that's the array of objects we care about.
So eventually we're going to essentially have this exact array inside of our component.
That's what we're using that state variable for one other quick thing I want to mention here.
I call this piece of state results.
It would have made a lot more sense to call this thing businesses because that's what Yelp calls it.
Alternatively because we are essentially searching restaurants that's the theme of our application.
We could have instead called it restaurants like so however both businesses and results are really easy
words to misspell.
And if you're taking this course you very might well have learned English as a second language.
So I just want to make sure that we have one last word to actually make a typo around inside of our
application.
So for me I'm going to instead simply call this results which is a lot easier to just write out and
avoid making easy typos on if you want to call that businesses or result restaurants feel free to do
so.
OK so now that we've got our piece of state let's try to print out the number of results we fetch at
any given point in time.
So rather than then displaying our current search term inside of this piece of text right here I'm going
to delete that term and instead I'll say we have found and then results dot link results like so.
So once we see like 20 or something like that up here inside of here we will know that we have successfully
found some list of results.
I'll save that and I'm just going to expected to first say zero.
Yep looks good.
OK so now we need to actually do our API request.
Remember we want to run our API request anytime on turn.
Submit right here gets invoked.
We could write in some logic to make the request right here.
But instead I'm going to make a little helper function inside of my component that I'm going to call
anytime I call this function will actually initiate the request.
So I'm going to define a new function right here I'll call it simply search API anytime I call this
thing.
I want to make my API request so I will call inside of here Yelp dot get slash search that's how we're
going to access our Yelp API.
So we're specifically making a get type CTP request and we want to access the slash search route.
Remember that route right there will be concatenated onto our base your URL back inside of our yellow
dot J.S. file.
So in the end we'll end up doing a get request to blah blah blah slash search.
Like so
no one ever we make a API request or any kind of network requests.
Remember it is an asynchronous operation so we need to add in either a promise or something like that
to handle three search results we eventually get back.
So we could chain on a dot then statement like so.
Or alternatively to simplify our code a little bit we can turn search API into an async function by
adding in that async keyword right there we can then use the await syntax inside this function so in
other words we can say Conte's response is a wait Yelp get search so we're going to essentially wait
for some requests or.
Excuse me some response to come back once this thing resolves with some actual data we will assign the
result to the response variable the response variable that we get back from an access request is going
to have a dot data property on it.
So response dot data like so that dot data property will be the actual Jason data that we got back from
that API.
So in other words response dot data is going to be this whole big object that we see inside the Yelp
documentation and for you and I.
The only property that we care about inside of here is businesses.
So this big array of objects which is what you and I care about is available inside of here as response
dot data dot businesses that's the array of objects that we want to store.
Remember anytime we want to update some piece of state which is where we're going to store these search
results we'll use that center.
So I've got this set results set right there.
I'm going to call set results with that big array of objects like so now before we test this.
Just one last thing we have to do when we call Yelp does get we have to pass in a couple of different
parameters that are going to customize the search we make.
So as a second argument I'm going to pass in a object to this thing I'll put in the key of parameters
if we pass in a Paramus property to the second argument of a axioms call any key value pairs we put
inside of your will be automatically appended onto our request you are.
So in other words if we put on something here like limit of 50 that will be automatically added into
our final request you are L as question mark limit equals 50.
Like so this query string is exactly how we are supposed to customize the request that we make to the
Yelp API.
And if you want to see that you can once again look back at the Yelp documentation years parameters
right here it says specifically these parameters should be in the query string.
So that's why we're using that parameter thing.
So inside that parameter object we're going to add in our search term and we'll also add in for right
now a hardcoded location.
We're also going to add in a limit property remember by default we get 20 results.
We're just gonna dial that up all the way to the maximum of 50 results OK.
So inside of prams we've got the limit of 50.
We're going to put in our term.
Remember our term is our piece of state that we care about.
Now we just kind of conveniently end up using a really good name for our piece of state.
We called our piece of state term and it just ever so happens that the parameter that we're supposed
to provide to the API is called term as well.
I really didn't plan that out ahead of time.
It's just how things ended up.
So we can't say inside of this object term is term.
Alternatively we can use a little bit of yes 2015 syntax because that key and value are identical.
We can shorten it down to just be term like so.
And then finally the last thing we care about is setting up some kind of location.
So for right now like I said we're just going to hard code the location for me I'm going to use San
Jose which is essentially a city in California.
Essentially it's Silicon Valley okay.
So it looks pretty good.
Now the last thing you do is make sure that we eventually call our search API function.
Anytime we submit our search term.
So inside of on term submit right here rather than calling that council log I can remove that and I'll
instead call our helper function of search API lowercase API like so now we're once again in a scenario.
In both cases here with both these props where we're essentially just taking in some arguments or in
this case no arguments and then passing that directly through to that function.
So once again just as we saw inside of our search bar we could technically Shorten both of these props
right here both these callbacks to just pass in a reference to the function we want to call.
So in other words I could pass and simply search API like so without any parameter or speak parentheses
after it.
So we just want to pass a reference to the function that should be invoked and we can do the same thing
with set term as well.
It just condenses our code a little bit and makes it a lot easier to read.
All right.
So now it's the moment of truth.
It's going to save this remember we're going to know if everything worked because we should see we have
found something results.
We should see that number change.
Remember eventually once we make our network request and get our response we're going to update our
list of results.
That's going to update our piece of state.
The results piece of state which will cause our entire component to automatically render when it renders
that results array should then have some number of objects inside of it and we should see that number
right there appear.
All right.
I'm got to put inside of here is something like a pasta I'll hit enter to submit and then I see that
number change very good.
And I should build do the same thing on Android as well so I'll do pasta it okay.
And then after a little pause I'll see 50 appear perfect at this point if you see an error appear if
you see a big red box or a warning or something like that well it means that something is not quite
right the first thing I would recommend you do is double check your API Yelp dot J.S. file make sure
you don't have any typos inside here if you accidentally put down authorization with a capital A Yes
that's gonna make a difference and you're going to end up with an error when you make that request if
you still can't find the error even after you check this file right here then feel free to help on over
to the Q A DISCUSSION AND I'LL DO MY BEST TO HELP YOU OUT AND FIND THE ERROR.
Okay so this looks great.
We can now find some number of search results so let's take a quick pause right here.
When we come back the next video we can start to think about how we're going to eventually render those
lists of results out on our screen so quick pause and I'll see you in just a minute.