1 00:00:00,820 --> 00:00:04,300 There's one last change we're gonna make to our search screen component before we start to render out 2 00:00:04,300 --> 00:00:05,730 that list of results. 3 00:00:05,740 --> 00:00:10,270 So at this point our search screen has a lot of code inside of it and a lot of the code inside of here 4 00:00:10,510 --> 00:00:13,450 is not really related to our search screen at all. 5 00:00:13,450 --> 00:00:18,270 Instead it's kind of some business logic that's all about making a request to some outside API. 6 00:00:18,640 --> 00:00:23,380 So it would be kind of nice if we could somehow extract this code into some other location side of our 7 00:00:23,380 --> 00:00:26,620 project and essentially have two separate files. 8 00:00:26,620 --> 00:00:31,870 One file would be all about showing our search screen and another file could maybe export a function 9 00:00:32,140 --> 00:00:35,510 that could be used to actually make use of this Yelp API. 10 00:00:35,560 --> 00:00:37,870 So that's exactly what we're going to do in this video. 11 00:00:38,290 --> 00:00:43,930 Extracting business logic from a react component is one of the reasons that we make use of these things. 12 00:00:43,960 --> 00:00:49,450 It's really easy to extract any logic that makes use of a hook into a separate file and then reuse that 13 00:00:49,450 --> 00:00:52,100 logic inside of multiple different components. 14 00:00:52,510 --> 00:00:56,350 In our particular application we don't have any other components that are ever gonna have to make a 15 00:00:56,350 --> 00:00:58,540 request to the Yelp API. 16 00:00:58,540 --> 00:01:03,250 Nonetheless we're going to still extract this logic just to understand how we can extract stuff related 17 00:01:03,250 --> 00:01:09,130 to hooks so to get started going to first create a new file that I'm going to use to extract some amount 18 00:01:09,160 --> 00:01:13,340 of this Yelp API logic to go inside my s RC directory. 19 00:01:13,450 --> 00:01:20,290 I'm gonna make a new folder called hooks when we extract some amount of hook related logic into a second 20 00:01:20,290 --> 00:01:20,840 file. 21 00:01:20,860 --> 00:01:26,200 We're technically creating our own custom hook remember a hook is essentially a function that adds in 22 00:01:26,200 --> 00:01:31,120 some additional functionality to a component that we create whenever we create a hook. 23 00:01:31,150 --> 00:01:33,020 We're always going to use a name. 24 00:01:33,090 --> 00:01:37,650 So going to make a new file inside of here inside the hooks directory we usually create this file with 25 00:01:37,650 --> 00:01:44,170 a name of something like use and then a word that essentially describes what kind of resource or thing 26 00:01:44,260 --> 00:01:47,550 or whatever this hook is going to help us with. 27 00:01:47,590 --> 00:01:52,720 So in our case re centrally adding in some amount of code or some business logic related to dealing 28 00:01:52,720 --> 00:01:58,230 with some search results coming back from the Yelp API so I might call this use results. 29 00:01:58,270 --> 00:02:05,070 J.S. remember a better term for results inside of application would have been like businesses or restaurants. 30 00:02:05,200 --> 00:02:12,520 So a better name for this book right here could have been something like Use businesses or use rest 31 00:02:13,020 --> 00:02:14,560 rants like so. 32 00:02:14,560 --> 00:02:20,820 But again I decided to use results just to decrease the chance we make a typo inside of our code okay. 33 00:02:20,860 --> 00:02:26,230 Now inside of here we're going to add in all the logic that we had related to our search request to 34 00:02:26,230 --> 00:02:27,100 the Yelp API. 35 00:02:28,500 --> 00:02:32,760 So the first thing I'm going to do is that in a couple of import statements at the top. 36 00:02:33,030 --> 00:02:39,040 First I'm going to import use effect and use state from react. 37 00:02:39,060 --> 00:02:41,990 I'm also going to import that Yelp API that we created. 38 00:02:42,000 --> 00:02:50,590 So import yelp from up one directory API Yelp like so then after that I'm going to do an export default 39 00:02:51,700 --> 00:02:54,090 and export an arrow function. 40 00:02:54,090 --> 00:02:59,140 So inside of this function we're going to add in all the code we need to actually make a request to 41 00:02:59,140 --> 00:03:00,670 that Yelp API. 42 00:03:00,670 --> 00:03:05,110 And at the bottom we're going to return a couple of different variables that we're going to make available 43 00:03:05,140 --> 00:03:07,260 to our search screen component. 44 00:03:07,270 --> 00:03:12,010 Now I got to be honest with you the first time you extract some hook related logic into a separate file 45 00:03:12,310 --> 00:03:14,040 it's kind of a tricky thing. 46 00:03:14,160 --> 00:03:19,290 So I'm gonna show you a little trick that we can use to kind of make our lives a little bit easier. 47 00:03:19,330 --> 00:03:24,100 So what we're going to do here is we're going to first extract all the code inside of search screen 48 00:03:24,430 --> 00:03:32,320 that is related to the Yelp API except for our ASX so all the code that's related to our Yelp API is 49 00:03:32,320 --> 00:03:38,740 essentially everything from const results right here all the way down to everything above RJ OS X block 50 00:03:39,190 --> 00:03:44,350 all the stuff that I just highlighted is 100 percent related to our Yelp API and you might think that 51 00:03:44,350 --> 00:03:48,990 the term and set term piece of state right here is related to our Yelp API as well. 52 00:03:49,000 --> 00:03:54,700 Well technically not our Yelp API really just need some kind of search term to work correctly so that 53 00:03:54,700 --> 00:04:01,720 term piece of state is not 100 percent really directly related to our Yelp API so I'm going to take 54 00:04:01,720 --> 00:04:07,600 all stuff I just highlighted I'm going to cut it and then paste it over inside of that arrow function 55 00:04:07,600 --> 00:04:13,260 we just created so now inside this file we are creating the results piece of state. 56 00:04:13,270 --> 00:04:18,330 The error message piece of stage our search API function and our use effect call as well. 57 00:04:20,100 --> 00:04:25,130 So that's part 1 we're going to essentially cut and paste all the logic at some component that's related 58 00:04:25,130 --> 00:04:27,330 to some piece of business logic. 59 00:04:27,470 --> 00:04:30,710 Now in part 2 we're going to take a look at our JSA X block. 60 00:04:31,040 --> 00:04:36,470 We're going to note all the different functions and variables inside of our JSA X block that are coming 61 00:04:36,470 --> 00:04:39,680 from all that code that we just cut and pasted. 62 00:04:39,890 --> 00:04:45,250 So note that inside of our JSA X block we now have a reference to the search API function. 63 00:04:45,440 --> 00:04:50,270 We have a reference to our error message piece of state and our results piece of state. 64 00:04:50,270 --> 00:04:56,170 That's the only three things that we reference inside of our a block because those things are now needed 65 00:04:56,170 --> 00:05:00,220 inside of our search screen component at the bottom of use results. 66 00:05:00,350 --> 00:05:06,430 I'm going to add in a return statement and I'm going to return those three variables that we need inside 67 00:05:06,430 --> 00:05:06,950 of an array. 68 00:05:07,450 --> 00:05:10,720 So remember the three different things we still need inside of our ASX block. 69 00:05:10,720 --> 00:05:15,140 Here are search API results and error message. 70 00:05:15,620 --> 00:05:21,380 So going to return search API results and error message. 71 00:05:21,400 --> 00:05:24,090 Like so. 72 00:05:24,110 --> 00:05:25,190 That's part 2. 73 00:05:25,220 --> 00:05:29,010 So we're returning the things that we need inside of our component inside of an array. 74 00:05:29,030 --> 00:05:32,810 So now part 3 we're going to go back over to our search screen. 75 00:05:32,810 --> 00:05:36,770 We're going to import that hook that we just created. 76 00:05:36,800 --> 00:05:39,570 So at the top I'm going to import use results 77 00:05:42,100 --> 00:05:50,580 from up one directory hooks use results like so then inside of our component we're going to call use 78 00:05:50,580 --> 00:05:55,320 results in very similar to how they use state hook returns an array with some variables that we need 79 00:05:55,650 --> 00:05:57,370 whenever we call user results. 80 00:05:57,450 --> 00:06:03,750 That's going to give us an array as well that has the search API results in error message variables 81 00:06:03,750 --> 00:06:13,570 that we need as well so underneath our you state call I'll do const search API results and error message 82 00:06:14,540 --> 00:06:20,590 and those are all going to come from calling user results and that's pretty much it. 83 00:06:20,590 --> 00:06:23,800 The last thing I'm going to do here just all a bit of cleanup I'm going to delete that import statement 84 00:06:23,830 --> 00:06:29,220 at the very top zip code do we now have inside of our search screen component is essentially identical 85 00:06:29,220 --> 00:06:35,160 to what we had before all we did was extract some amount of business logic into a helper function. 86 00:06:35,160 --> 00:06:40,830 The nice thing about this approach is now we can make use of this helper function inside of other components. 87 00:06:40,830 --> 00:06:46,010 As I mentioned we don't have any components inside of our app that need to do a search of the Yelp API 88 00:06:46,050 --> 00:06:47,400 besides our search screen. 89 00:06:47,550 --> 00:06:53,770 But if we did we could very easily reuse all the code inside of here now lasting and to do is say this 90 00:06:53,770 --> 00:06:58,750 file in a flip back over and make sure that I don't have any error message and make sure that I also 91 00:06:58,750 --> 00:07:01,540 get 50 results back and it looks like I do. 92 00:07:01,690 --> 00:07:02,840 Perfect. 93 00:07:02,920 --> 00:07:08,680 Now as I mentioned understanding how to extract hook related logic is definitely a little challenging 94 00:07:08,680 --> 00:07:09,240 thing. 95 00:07:09,320 --> 00:07:14,020 And you might be sitting there wondering OK why do we not also extract this term piece of state we're 96 00:07:14,020 --> 00:07:17,950 going to take a look at many other extractions of logic throughout this course. 97 00:07:17,980 --> 00:07:22,390 So you're going to get a lot of practice in extracting some amount of logic into a helper file so we 98 00:07:22,390 --> 00:07:25,800 can easily reuse it at some point in the future. 99 00:07:25,900 --> 00:07:27,200 Let's take a pause right here. 100 00:07:27,460 --> 00:07:28,480 Come back the next video. 101 00:07:28,480 --> 00:07:33,370 And finally I think we can start working on showing this list of different results to our user.