1 00:00:00,920 --> 00:00:05,600 Now that we've got our configured version of Axis ready to go we can open up our search screen file 2 00:00:05,600 --> 00:00:07,040 once again at the top. 3 00:00:07,040 --> 00:00:17,010 I'm going to import yelp from up one directory API slash Yelp like so now we can make use of this Yelp 4 00:00:17,010 --> 00:00:19,870 instance right here to actually do our network request. 5 00:00:20,150 --> 00:00:24,000 And the first thing we need to think about is how are we going to somehow make this request and then 6 00:00:24,000 --> 00:00:28,030 eventually have the results of it update some content on our screen. 7 00:00:28,080 --> 00:00:33,330 Remember it takes some amount of time to actually execute an API request and it might fail altogether 8 00:00:34,280 --> 00:00:39,470 so anytime that I use the words we need to do something and an update content on the screen. 9 00:00:39,470 --> 00:00:45,580 Hopefully you start to think about state anytime that you want any content on the screen to update whatsoever. 10 00:00:45,590 --> 00:00:48,090 We're always going to make use of state. 11 00:00:48,290 --> 00:00:52,790 So in order to handle the results so we get back from the Yelp API we're going to create a new piece 12 00:00:52,790 --> 00:00:59,260 of state inside of our search screen so inside of here I'm going to define a new piece of state that 13 00:00:59,260 --> 00:01:03,610 I'm going to call results and I'll get the setter as well. 14 00:01:04,760 --> 00:01:07,960 And I'll initialize this to be an empty array. 15 00:01:07,960 --> 00:01:14,000 I'M INITIALIZING it as an empty array because I expect results to eventually have a big array of objects 16 00:01:14,330 --> 00:01:19,580 that contains all the different results we got back from the Yelp API as a quick reminder if we go back 17 00:01:19,580 --> 00:01:26,720 over to the Yelp documentation specifically the search page documentation you'll recall that in the 18 00:01:26,720 --> 00:01:33,080 response we get way down here we get not only the total number of businesses but we also get the businesses 19 00:01:33,200 --> 00:01:36,240 property and that's the array of objects we care about. 20 00:01:36,290 --> 00:01:41,590 So eventually we're going to essentially have this exact array inside of our component. 21 00:01:41,600 --> 00:01:46,210 That's what we're using that state variable for one other quick thing I want to mention here. 22 00:01:46,260 --> 00:01:48,470 I call this piece of state results. 23 00:01:48,720 --> 00:01:53,610 It would have made a lot more sense to call this thing businesses because that's what Yelp calls it. 24 00:01:54,030 --> 00:01:58,300 Alternatively because we are essentially searching restaurants that's the theme of our application. 25 00:01:58,410 --> 00:02:06,190 We could have instead called it restaurants like so however both businesses and results are really easy 26 00:02:06,190 --> 00:02:07,300 words to misspell. 27 00:02:07,750 --> 00:02:12,510 And if you're taking this course you very might well have learned English as a second language. 28 00:02:12,580 --> 00:02:16,420 So I just want to make sure that we have one last word to actually make a typo around inside of our 29 00:02:16,420 --> 00:02:17,560 application. 30 00:02:17,560 --> 00:02:22,300 So for me I'm going to instead simply call this results which is a lot easier to just write out and 31 00:02:22,300 --> 00:02:27,910 avoid making easy typos on if you want to call that businesses or result restaurants feel free to do 32 00:02:27,910 --> 00:02:29,530 so. 33 00:02:29,550 --> 00:02:34,740 OK so now that we've got our piece of state let's try to print out the number of results we fetch at 34 00:02:34,740 --> 00:02:36,420 any given point in time. 35 00:02:36,750 --> 00:02:41,580 So rather than then displaying our current search term inside of this piece of text right here I'm going 36 00:02:41,580 --> 00:02:50,840 to delete that term and instead I'll say we have found and then results dot link results like so. 37 00:02:50,880 --> 00:02:56,370 So once we see like 20 or something like that up here inside of here we will know that we have successfully 38 00:02:56,370 --> 00:02:59,590 found some list of results. 39 00:02:59,610 --> 00:03:03,160 I'll save that and I'm just going to expected to first say zero. 40 00:03:03,210 --> 00:03:04,370 Yep looks good. 41 00:03:05,910 --> 00:03:08,930 OK so now we need to actually do our API request. 42 00:03:09,060 --> 00:03:12,680 Remember we want to run our API request anytime on turn. 43 00:03:12,690 --> 00:03:14,740 Submit right here gets invoked. 44 00:03:14,820 --> 00:03:17,490 We could write in some logic to make the request right here. 45 00:03:17,490 --> 00:03:22,620 But instead I'm going to make a little helper function inside of my component that I'm going to call 46 00:03:22,860 --> 00:03:26,480 anytime I call this function will actually initiate the request. 47 00:03:26,600 --> 00:03:35,160 So I'm going to define a new function right here I'll call it simply search API anytime I call this 48 00:03:35,160 --> 00:03:35,520 thing. 49 00:03:35,580 --> 00:03:43,440 I want to make my API request so I will call inside of here Yelp dot get slash search that's how we're 50 00:03:43,440 --> 00:03:45,410 going to access our Yelp API. 51 00:03:45,600 --> 00:03:52,950 So we're specifically making a get type CTP request and we want to access the slash search route. 52 00:03:52,950 --> 00:03:57,960 Remember that route right there will be concatenated onto our base your URL back inside of our yellow 53 00:03:57,960 --> 00:03:59,310 dot J.S. file. 54 00:03:59,310 --> 00:04:03,480 So in the end we'll end up doing a get request to blah blah blah slash search. 55 00:04:03,480 --> 00:04:03,990 Like so 56 00:04:07,370 --> 00:04:11,030 no one ever we make a API request or any kind of network requests. 57 00:04:11,030 --> 00:04:16,850 Remember it is an asynchronous operation so we need to add in either a promise or something like that 58 00:04:17,060 --> 00:04:19,980 to handle three search results we eventually get back. 59 00:04:20,210 --> 00:04:23,240 So we could chain on a dot then statement like so. 60 00:04:23,390 --> 00:04:30,290 Or alternatively to simplify our code a little bit we can turn search API into an async function by 61 00:04:30,290 --> 00:04:36,580 adding in that async keyword right there we can then use the await syntax inside this function so in 62 00:04:36,580 --> 00:04:43,750 other words we can say Conte's response is a wait Yelp get search so we're going to essentially wait 63 00:04:43,810 --> 00:04:45,090 for some requests or. 64 00:04:45,190 --> 00:04:50,770 Excuse me some response to come back once this thing resolves with some actual data we will assign the 65 00:04:50,770 --> 00:04:57,860 result to the response variable the response variable that we get back from an access request is going 66 00:04:57,860 --> 00:05:00,260 to have a dot data property on it. 67 00:05:00,830 --> 00:05:06,800 So response dot data like so that dot data property will be the actual Jason data that we got back from 68 00:05:06,800 --> 00:05:08,210 that API. 69 00:05:08,270 --> 00:05:13,580 So in other words response dot data is going to be this whole big object that we see inside the Yelp 70 00:05:13,670 --> 00:05:15,820 documentation and for you and I. 71 00:05:15,860 --> 00:05:19,590 The only property that we care about inside of here is businesses. 72 00:05:19,610 --> 00:05:24,950 So this big array of objects which is what you and I care about is available inside of here as response 73 00:05:25,260 --> 00:05:31,630 dot data dot businesses that's the array of objects that we want to store. 74 00:05:31,630 --> 00:05:35,830 Remember anytime we want to update some piece of state which is where we're going to store these search 75 00:05:35,830 --> 00:05:38,170 results we'll use that center. 76 00:05:38,170 --> 00:05:40,510 So I've got this set results set right there. 77 00:05:40,510 --> 00:05:47,120 I'm going to call set results with that big array of objects like so now before we test this. 78 00:05:47,120 --> 00:05:53,490 Just one last thing we have to do when we call Yelp does get we have to pass in a couple of different 79 00:05:53,490 --> 00:05:56,900 parameters that are going to customize the search we make. 80 00:05:56,970 --> 00:06:02,940 So as a second argument I'm going to pass in a object to this thing I'll put in the key of parameters 81 00:06:03,840 --> 00:06:09,990 if we pass in a Paramus property to the second argument of a axioms call any key value pairs we put 82 00:06:09,990 --> 00:06:14,390 inside of your will be automatically appended onto our request you are. 83 00:06:14,490 --> 00:06:20,240 So in other words if we put on something here like limit of 50 that will be automatically added into 84 00:06:20,280 --> 00:06:24,630 our final request you are L as question mark limit equals 50. 85 00:06:24,630 --> 00:06:30,120 Like so this query string is exactly how we are supposed to customize the request that we make to the 86 00:06:30,120 --> 00:06:30,970 Yelp API. 87 00:06:31,400 --> 00:06:36,510 And if you want to see that you can once again look back at the Yelp documentation years parameters 88 00:06:36,510 --> 00:06:40,290 right here it says specifically these parameters should be in the query string. 89 00:06:40,410 --> 00:06:42,910 So that's why we're using that parameter thing. 90 00:06:43,020 --> 00:06:48,300 So inside that parameter object we're going to add in our search term and we'll also add in for right 91 00:06:48,300 --> 00:06:51,620 now a hardcoded location. 92 00:06:51,780 --> 00:06:56,610 We're also going to add in a limit property remember by default we get 20 results. 93 00:06:56,640 --> 00:07:01,910 We're just gonna dial that up all the way to the maximum of 50 results OK. 94 00:07:01,940 --> 00:07:05,000 So inside of prams we've got the limit of 50. 95 00:07:05,000 --> 00:07:06,730 We're going to put in our term. 96 00:07:06,890 --> 00:07:09,830 Remember our term is our piece of state that we care about. 97 00:07:09,890 --> 00:07:14,220 Now we just kind of conveniently end up using a really good name for our piece of state. 98 00:07:14,270 --> 00:07:19,730 We called our piece of state term and it just ever so happens that the parameter that we're supposed 99 00:07:19,730 --> 00:07:22,820 to provide to the API is called term as well. 100 00:07:22,850 --> 00:07:24,510 I really didn't plan that out ahead of time. 101 00:07:24,530 --> 00:07:26,720 It's just how things ended up. 102 00:07:26,720 --> 00:07:29,640 So we can't say inside of this object term is term. 103 00:07:29,930 --> 00:07:35,180 Alternatively we can use a little bit of yes 2015 syntax because that key and value are identical. 104 00:07:35,210 --> 00:07:38,980 We can shorten it down to just be term like so. 105 00:07:39,100 --> 00:07:43,160 And then finally the last thing we care about is setting up some kind of location. 106 00:07:43,240 --> 00:07:48,070 So for right now like I said we're just going to hard code the location for me I'm going to use San 107 00:07:48,070 --> 00:07:51,910 Jose which is essentially a city in California. 108 00:07:51,910 --> 00:07:54,540 Essentially it's Silicon Valley okay. 109 00:07:54,560 --> 00:07:55,460 So it looks pretty good. 110 00:07:57,540 --> 00:08:03,170 Now the last thing you do is make sure that we eventually call our search API function. 111 00:08:03,290 --> 00:08:06,800 Anytime we submit our search term. 112 00:08:06,800 --> 00:08:12,100 So inside of on term submit right here rather than calling that council log I can remove that and I'll 113 00:08:12,100 --> 00:08:21,760 instead call our helper function of search API lowercase API like so now we're once again in a scenario. 114 00:08:21,760 --> 00:08:26,290 In both cases here with both these props where we're essentially just taking in some arguments or in 115 00:08:26,290 --> 00:08:30,230 this case no arguments and then passing that directly through to that function. 116 00:08:30,700 --> 00:08:35,110 So once again just as we saw inside of our search bar we could technically Shorten both of these props 117 00:08:35,110 --> 00:08:40,110 right here both these callbacks to just pass in a reference to the function we want to call. 118 00:08:40,180 --> 00:08:46,570 So in other words I could pass and simply search API like so without any parameter or speak parentheses 119 00:08:46,570 --> 00:08:47,410 after it. 120 00:08:47,500 --> 00:08:52,180 So we just want to pass a reference to the function that should be invoked and we can do the same thing 121 00:08:52,810 --> 00:08:55,480 with set term as well. 122 00:08:55,480 --> 00:08:59,660 It just condenses our code a little bit and makes it a lot easier to read. 123 00:08:59,680 --> 00:09:00,040 All right. 124 00:09:00,040 --> 00:09:01,740 So now it's the moment of truth. 125 00:09:01,930 --> 00:09:08,180 It's going to save this remember we're going to know if everything worked because we should see we have 126 00:09:08,180 --> 00:09:09,850 found something results. 127 00:09:09,950 --> 00:09:11,880 We should see that number change. 128 00:09:11,990 --> 00:09:16,310 Remember eventually once we make our network request and get our response we're going to update our 129 00:09:16,310 --> 00:09:17,780 list of results. 130 00:09:17,780 --> 00:09:19,340 That's going to update our piece of state. 131 00:09:19,370 --> 00:09:25,130 The results piece of state which will cause our entire component to automatically render when it renders 132 00:09:25,430 --> 00:09:29,870 that results array should then have some number of objects inside of it and we should see that number 133 00:09:29,870 --> 00:09:31,700 right there appear. 134 00:09:31,730 --> 00:09:32,020 All right. 135 00:09:32,050 --> 00:09:39,150 I'm got to put inside of here is something like a pasta I'll hit enter to submit and then I see that 136 00:09:39,150 --> 00:09:41,250 number change very good. 137 00:09:41,250 --> 00:09:45,410 And I should build do the same thing on Android as well so I'll do pasta it okay. 138 00:09:45,690 --> 00:09:51,960 And then after a little pause I'll see 50 appear perfect at this point if you see an error appear if 139 00:09:51,960 --> 00:09:57,030 you see a big red box or a warning or something like that well it means that something is not quite 140 00:09:57,030 --> 00:10:03,690 right the first thing I would recommend you do is double check your API Yelp dot J.S. file make sure 141 00:10:03,690 --> 00:10:09,030 you don't have any typos inside here if you accidentally put down authorization with a capital A Yes 142 00:10:09,060 --> 00:10:13,550 that's gonna make a difference and you're going to end up with an error when you make that request if 143 00:10:13,550 --> 00:10:18,140 you still can't find the error even after you check this file right here then feel free to help on over 144 00:10:18,140 --> 00:10:22,430 to the Q A DISCUSSION AND I'LL DO MY BEST TO HELP YOU OUT AND FIND THE ERROR. 145 00:10:22,500 --> 00:10:23,750 Okay so this looks great. 146 00:10:23,750 --> 00:10:27,720 We can now find some number of search results so let's take a quick pause right here. 147 00:10:27,770 --> 00:10:31,760 When we come back the next video we can start to think about how we're going to eventually render those 148 00:10:31,760 --> 00:10:36,670 lists of results out on our screen so quick pause and I'll see you in just a minute.