1 00:00:01,110 --> 00:00:05,580 Well we can show a little circle to indicate where our user is which is definitely fantastic. 2 00:00:05,580 --> 00:00:09,240 However there's still a little deficiency inside of our application. 3 00:00:09,270 --> 00:00:11,960 I'm going to open up my location context file. 4 00:00:12,000 --> 00:00:14,660 Here it is right here inside of ADD location. 5 00:00:14,670 --> 00:00:21,390 I'm going to add a quick console log and just have it say something like Hi there or then save this. 6 00:00:21,600 --> 00:00:27,730 Refresh my application go back to track create and then go check out those console logs at my terminal. 7 00:00:27,730 --> 00:00:30,200 So inside my terminal I see. 8 00:00:30,210 --> 00:00:31,590 Hi there start to appear. 9 00:00:31,700 --> 00:00:31,960 OK. 10 00:00:31,970 --> 00:00:34,370 Makes sense every time we get a location update. 11 00:00:34,380 --> 00:00:36,050 We get a single console log. 12 00:00:36,210 --> 00:00:39,430 But here's where something not so great starts to come into play. 13 00:00:39,510 --> 00:00:44,320 I can go backward my application and navigate over two track list screen. 14 00:00:44,480 --> 00:00:49,380 So on trackless screen now that we're here and we are not purposefully like recording a new track for 15 00:00:49,380 --> 00:00:49,890 a user. 16 00:00:50,130 --> 00:00:55,260 Ideally we would disable all of our location tracking stuff because right now it's just eating up battery 17 00:00:55,260 --> 00:01:00,450 power even though we're not showing a map or the user's location or anything like that. 18 00:01:00,450 --> 00:01:05,280 However if I go back over to my terminal I'm still getting a ton of different console logs so hi there. 19 00:01:05,280 --> 00:01:05,670 Hi there. 20 00:01:05,670 --> 00:01:06,110 Hi there. 21 00:01:06,110 --> 00:01:07,260 And so on. 22 00:01:07,260 --> 00:01:13,290 So at present even though we navigated away from that track create screen we're still maintaining a 23 00:01:13,290 --> 00:01:15,570 lookup on the user's location. 24 00:01:15,630 --> 00:01:20,700 Again not ideal because we don't want to burn excess battery power if we are not purposely creating 25 00:01:20,730 --> 00:01:27,730 a new track very closely related to this idea of kind of toggling whether or not we're tracking a user's 26 00:01:27,730 --> 00:01:28,630 location. 27 00:01:28,630 --> 00:01:34,720 Remember we had also very briefly discussed the idea of extracting some of the location logic from chat 28 00:01:34,720 --> 00:01:41,100 create screen into a reusable hook that we could call it use location so at this point I think it would 29 00:01:41,100 --> 00:01:46,410 be a really good idea to start extracting all that location logic into a reusable hook and then we can 30 00:01:46,410 --> 00:01:51,420 start to figure out how to disable the location tracking whenever a user navigates from chat create 31 00:01:51,420 --> 00:01:52,860 screen as well. 32 00:01:52,860 --> 00:01:56,970 So long story short let's start working on use location. 33 00:01:56,970 --> 00:01:57,240 All right. 34 00:01:57,240 --> 00:01:57,980 To get started. 35 00:01:58,050 --> 00:02:02,810 I'm gonna go back over my code editor and remove that console log I put in there really quickly then 36 00:02:02,820 --> 00:02:09,640 inside my SRT directory I'll make a new folder called hooks inside of hooks I'll make a new file called 37 00:02:09,940 --> 00:02:16,540 use location dot J.S. so inside of here we're going to write out some amount of logic that's going to 38 00:02:16,540 --> 00:02:22,750 start up the process of requesting permission to track users location do the error handling and then 39 00:02:22,750 --> 00:02:28,930 start watching for a users change in location so inside of here I'm gonna do an import at the very top 40 00:02:28,930 --> 00:02:39,060 for you state and use effect from react and then we're also going to get from the location library accuracy 41 00:02:39,870 --> 00:02:46,230 request permissions async and watch position async 42 00:02:48,950 --> 00:03:00,950 from Expo location then we can create an export our hook alright so remember this is a custom hook that 43 00:03:00,950 --> 00:03:05,960 we're putting together we've seen one example already of how we extract logic into a separate hook file 44 00:03:05,960 --> 00:03:07,800 or a separate hook helper function. 45 00:03:07,940 --> 00:03:09,840 So we're going to do the same thing this time. 46 00:03:10,130 --> 00:03:14,900 The general idea behind these reusable hooks is that we're going to go to some component like track 47 00:03:14,900 --> 00:03:19,370 create screen and we're going to take a look at all the different variables we define inside of here 48 00:03:19,540 --> 00:03:23,930 that we want to somehow make reusable where all the different logic that we want to make reusable. 49 00:03:24,050 --> 00:03:29,330 So in our case we want to extract everything from this component track rate screen that has something 50 00:03:29,330 --> 00:03:32,230 to do with handling location. 51 00:03:32,360 --> 00:03:35,120 So at present we're going to go through this thing line by line. 52 00:03:35,210 --> 00:03:39,770 I would say that this error piece of state right here is definitely tied to location because it's tied 53 00:03:39,770 --> 00:03:43,520 to tracking whether or not there is an air during requesting permissions. 54 00:03:43,580 --> 00:03:49,040 So I'm going to cut that line and put it put it into use location. 55 00:03:49,060 --> 00:03:51,210 Next up the entire start watching function. 56 00:03:51,220 --> 00:03:51,520 Yeah. 57 00:03:51,520 --> 00:03:52,450 Without a doubt. 58 00:03:52,450 --> 00:03:54,540 Hundred percent related to location. 59 00:03:54,550 --> 00:03:57,440 So going to take the entire start watching function. 60 00:03:57,580 --> 00:04:05,250 Cut it and put it into use location then use effect right here. 61 00:04:05,350 --> 00:04:05,640 Yeah. 62 00:04:05,660 --> 00:04:08,400 Hundred percent related to location so I can extract that. 63 00:04:08,410 --> 00:04:11,770 I'm going to cut it and put it at the bottom of use location as well. 64 00:04:13,360 --> 00:04:19,060 And now finally we're only left with some stuff that is not quite related to well tracking a user's 65 00:04:19,060 --> 00:04:19,650 location. 66 00:04:19,660 --> 00:04:21,400 You'll see right here we've got ADD location. 67 00:04:21,430 --> 00:04:24,610 Yeah that's definitely related to tracking the user's location. 68 00:04:24,610 --> 00:04:30,790 However that's a very specific use case of maintaining a user's location and it's not really related 69 00:04:30,790 --> 00:04:33,830 to some reusable logic that we might want to use in the future. 70 00:04:33,940 --> 00:04:38,020 Remember anytime we create a reusable hook like this we only want to put stuff inside there that we 71 00:04:38,020 --> 00:04:40,570 expect to reuse possibly at some point. 72 00:04:41,430 --> 00:04:47,400 Having a reference directly to add location and our location context not necessarily reusable because 73 00:04:47,400 --> 00:04:52,560 we might work on another project where there is no location context where we might try to use this use 74 00:04:52,560 --> 00:04:57,290 location hook on another screen where we don't care about the location context at all as well. 75 00:04:58,970 --> 00:05:03,980 So now that we've got use location put together we need to start to think about what arguments it's 76 00:05:03,980 --> 00:05:08,960 going to take in what is going to return in order to decide what it's going to return. 77 00:05:08,960 --> 00:05:13,700 Remember we can go back to our track create screen and we can look up all the different variables inside 78 00:05:13,700 --> 00:05:17,030 of our JSA X block that come from that hook. 79 00:05:17,030 --> 00:05:20,900 The only thing inside of here that comes from that hook is the air value right there. 80 00:05:22,100 --> 00:05:27,560 So inside of use location at the very bottom I can make sure that I return an array with air inside 81 00:05:27,560 --> 00:05:32,730 of it recall that the only reason that we return in array right here is that we might want to eventually 82 00:05:32,730 --> 00:05:34,370 return multiple different values. 83 00:05:34,380 --> 00:05:36,240 There's nothing special about returning an array. 84 00:05:36,240 --> 00:05:38,430 That's just the convention of hooks. 85 00:05:38,430 --> 00:05:43,710 We could just as easily easily only return the air or we could return the air inside of an object like 86 00:05:43,710 --> 00:05:44,510 so. 87 00:05:44,640 --> 00:05:47,730 But in this case we're gonna follow convention and return it inside of an array 88 00:05:50,480 --> 00:05:54,160 secondly what arguments does use location really require. 89 00:05:54,170 --> 00:05:58,370 Well I think that at present the only thing that we really want to pass in here that we need to customize 90 00:05:58,400 --> 00:06:01,730 and really make this thing reusable is the callback function right here. 91 00:06:01,730 --> 00:06:06,890 The second argument to watch position async because whenever we make use of this hook will we probably 92 00:06:06,890 --> 00:06:10,110 want to customize what happens whenever we get a new location. 93 00:06:10,190 --> 00:06:15,890 So I'm going to assume that we are going to be able to pass in a callback to this hook and that we will 94 00:06:15,890 --> 00:06:21,910 run that callback function rather than trying to call ad location right there. 95 00:06:21,970 --> 00:06:27,170 Now anytime we get a position update we're gonna call callback okay. 96 00:06:27,210 --> 00:06:29,720 That's pretty much our reusable use location hook. 97 00:06:29,720 --> 00:06:35,570 So we now have a input of the callback function to run any time that we get an update and then we have 98 00:06:35,570 --> 00:06:41,430 a return value from the hook of an error if one occurs during the permissions process. 99 00:06:41,480 --> 00:06:43,310 Now we can save our hook. 100 00:06:43,310 --> 00:06:48,980 Go back over to track create screen we can update some of the import statements inside of here and really 101 00:06:48,980 --> 00:06:53,390 condense this thing down so we no longer need anything from Expo location. 102 00:06:53,390 --> 00:06:59,310 We no longer need you state or use effect I will import the hook I just created. 103 00:06:59,310 --> 00:07:09,790 So I will import used location from hooks use location and then right after we call our context right 104 00:07:09,790 --> 00:07:17,810 here and get a reference to add location we can receive that ear value and call use location like so 105 00:07:17,900 --> 00:07:22,820 and we'll make sure that we pass in a callback function to be ran anytime we get a new location. 106 00:07:22,940 --> 00:07:28,220 So we want to take the location that we receive as the update from Expo location and just pass it directly 107 00:07:28,270 --> 00:07:32,920 to add location. 108 00:07:32,950 --> 00:07:36,620 Now we're once again in a scenario where we don't really have to make this extra helper function here 109 00:07:36,620 --> 00:07:42,750 we could just pass in a reference directly to add location like so and that's pretty much it. 110 00:07:43,540 --> 00:07:48,700 So I think you'll agree with me the logic is inside of track rate screen is now significantly less complex 111 00:07:48,700 --> 00:07:49,750 than it was before. 112 00:07:49,750 --> 00:07:51,820 Really easy to understand what's going on. 113 00:07:51,870 --> 00:07:56,410 It's now any time that we have some project where we need to get access to a user's location and see 114 00:07:56,410 --> 00:08:02,710 how it changes over time we could just import use location call it pass in some callback and then receive 115 00:08:02,710 --> 00:08:07,220 some error if anything goes wrong when we tried to ask for permission. 116 00:08:07,310 --> 00:08:11,450 So it looks pretty good not going to save it and just make sure that everything still works as expected 117 00:08:12,510 --> 00:08:14,060 and yep looks like it sure does. 118 00:08:15,190 --> 00:08:15,400 Okay. 119 00:08:15,400 --> 00:08:20,200 So this is definitely a good extraction but we're still in our original scenario where we are not really 120 00:08:20,200 --> 00:08:24,330 turning off our location tracking whenever we go to a different screen. 121 00:08:24,540 --> 00:08:26,800 So let's try to figure out how to handle that in the next video.