1 00:00:01,320 --> 00:00:04,960 In the last video we got access to this is focused flag right here. 2 00:00:04,980 --> 00:00:10,750 So now we need to decide whether or not to start tracking or stop tracking inside of use location based 3 00:00:10,750 --> 00:00:12,300 upon that flag. 4 00:00:12,340 --> 00:00:16,480 In addition inside of U.S. location itself remember we just spoke about how when we start up this watching 5 00:00:16,480 --> 00:00:19,660 process we get back a variable called subscriber. 6 00:00:19,660 --> 00:00:27,780 If we want to stop watching users location we would call subscriber dot remove like so so now we're 7 00:00:27,780 --> 00:00:29,940 kind of in an interesting scenario. 8 00:00:29,940 --> 00:00:36,500 We need to decide when to call subscriber remove based upon the is focused flag back inside of track 9 00:00:36,500 --> 00:00:37,920 rate screen. 10 00:00:37,950 --> 00:00:42,300 So the first way that we're going to approach this is to do something kind of obvious we need to communicate 11 00:00:42,300 --> 00:00:44,280 that flag into our hook. 12 00:00:44,280 --> 00:00:49,120 So I'm going to pass that flag in is focused as the first argument to use location. 13 00:00:49,140 --> 00:00:51,660 So say is focused like so. 14 00:00:51,660 --> 00:00:56,730 So we're gonna say that use location the hook we created is now going to take two separate arguments. 15 00:00:56,730 --> 00:01:00,230 The first argument is going to be a Boolean if it is true. 16 00:01:00,240 --> 00:01:05,520 That means that we want to start up location tracking if it is false that means stop tracking altogether 17 00:01:06,360 --> 00:01:10,740 and then the second argument is going to continue to be our callback function for any time the user's 18 00:01:10,740 --> 00:01:12,750 location changes. 19 00:01:12,780 --> 00:01:18,680 So now inside of it use location I'm going to flip over there right now and our argument list right 20 00:01:18,680 --> 00:01:20,340 here next to export default. 21 00:01:20,450 --> 00:01:24,110 We can receive that is focused flag now inside of our hook. 22 00:01:24,100 --> 00:01:27,350 There's not really any idea of being focused or not focused. 23 00:01:27,350 --> 00:01:30,950 So calling it is focused inside of here wouldn't really make a lot of sense. 24 00:01:30,980 --> 00:01:35,780 Instead inside the context of this hook right here that first argument is really telling us whether 25 00:01:35,780 --> 00:01:38,290 or not we should be tracking the user either true. 26 00:01:38,360 --> 00:01:40,240 Yes start tracking or false. 27 00:01:40,250 --> 00:01:42,090 No don't do any tracking at all. 28 00:01:42,110 --> 00:01:47,230 So rather than calling it is focused inside of here I'm going to call it should track instead. 29 00:01:47,330 --> 00:01:49,130 And that's essentially assigned to us. 30 00:01:49,130 --> 00:01:56,440 And the code inside of here that we should start tracking or false means no don't do it at all OK. 31 00:01:56,470 --> 00:02:01,840 So now we should track we need to somehow run some code any time that value changes. 32 00:02:01,840 --> 00:02:07,690 So if should track flips from false to true that means OK let's start watching start tracking the user's 33 00:02:07,690 --> 00:02:13,240 location and if it goes from true to false that means we need to stop watching or stop tracking the 34 00:02:13,240 --> 00:02:15,010 user's location. 35 00:02:15,010 --> 00:02:19,810 So to be able to run some code based upon the value of should track right there we're going to go down 36 00:02:19,810 --> 00:02:24,870 to our use effect function so inside of use effect you might recall. 37 00:02:24,930 --> 00:02:29,910 The second argument throughout this course we've almost always been using an empty array the empty array 38 00:02:29,940 --> 00:02:36,210 means that we want to run this function right here exactly one time if we want to we can put some elements 39 00:02:36,240 --> 00:02:42,720 inside that array in our case we're gonna put in should track by putting a value inside this array we're 40 00:02:42,720 --> 00:02:45,900 telling react that we might want to run this function right here. 41 00:02:45,900 --> 00:02:51,540 More than just when our component first is rendered on the screen in particular every time our hook 42 00:02:51,570 --> 00:02:52,500 is executed. 43 00:02:52,500 --> 00:02:57,330 And remember this hook gets executed every time track create screen re renders. 44 00:02:57,330 --> 00:03:02,070 So every time our hook is executed react is going to look at that value right there of should track 45 00:03:02,480 --> 00:03:08,120 and it's going to compare that value to the last time our hook ran between these two times of our hook 46 00:03:08,120 --> 00:03:08,800 running. 47 00:03:08,870 --> 00:03:14,560 If that value changes then react is going to run that function right there in additional time. 48 00:03:14,600 --> 00:03:20,090 So essentially inside this array we can put some variable where if that variable ever changes we want 49 00:03:20,090 --> 00:03:22,110 to run that function again. 50 00:03:22,130 --> 00:03:27,230 So this perfectly suits what you and I are trying to do we want to make sure that if should track ever 51 00:03:27,230 --> 00:03:27,850 changes. 52 00:03:27,950 --> 00:03:33,090 Let's rerun this function so we can now start to use this function rather than just calling start watching. 53 00:03:33,170 --> 00:03:40,740 We can use that function to decide whether we want to start watching or possibly stop watching the inside 54 00:03:40,740 --> 00:03:44,260 of here we might do something like If should at track. 55 00:03:44,460 --> 00:03:51,450 Well we want to start watching otherwise we want to stop watching. 56 00:03:51,590 --> 00:03:55,830 Now it just turns into a question of exactly how we're going to stop watching. 57 00:03:56,030 --> 00:04:01,720 Remember in order to stop watching we need to get access to that subscriber variable right there in 58 00:04:01,720 --> 00:04:03,150 order to get access to that variable. 59 00:04:03,160 --> 00:04:07,450 We're going to define an additional piece of state inside of our hook and we're going to store that 60 00:04:07,450 --> 00:04:12,190 subscriber as a piece of state so at the very top of the file. 61 00:04:12,290 --> 00:04:14,490 We've already got an import for you state. 62 00:04:14,560 --> 00:04:24,110 I'm going to define a new state variable inside of here called subscriber sub scrubber and set subscriber 63 00:04:25,910 --> 00:04:28,610 and by default it can have a value of No. 64 00:04:28,610 --> 00:04:32,990 So when our hook runs for the very first time we're essentially saying we don't have any subscriber 65 00:04:32,990 --> 00:04:38,030 yet whatsoever doesn't exist because we've not yet started watching. 66 00:04:38,050 --> 00:04:42,610 So now inside of our tri circuit statement rather than assigning the result to that to the subscriber 67 00:04:42,610 --> 00:04:46,170 variable I'm going to abbreviate it simply as sub instead. 68 00:04:46,300 --> 00:04:51,870 And then after we get that variable we will assign it to the subscriber piece of state using our setter. 69 00:04:51,910 --> 00:04:56,140 So I'll say right here set subscriber with sub 70 00:04:58,920 --> 00:05:05,660 so now we've got access to our subscriber object inside the subscriber variable so finally back down 71 00:05:05,660 --> 00:05:12,650 here inside of use effect in the else case in order to stop watching we can call subscriber dot remove. 72 00:05:12,840 --> 00:05:17,680 And that will stop the watching process altogether after we stop the watching process. 73 00:05:17,680 --> 00:05:20,310 There's technically one other little thing we have to do. 74 00:05:20,350 --> 00:05:22,500 Women call called subscriber removed right here. 75 00:05:22,540 --> 00:05:25,940 Well we no longer have any use for this subscriber object. 76 00:05:25,990 --> 00:05:31,780 So after we stop watching we're going to use set subscriber to set our subscriber piece of state back 77 00:05:31,780 --> 00:05:35,440 channel which indicates we don't have a subscriber we don't have anything to stop. 78 00:05:36,060 --> 00:05:42,080 So going to call set subscriber with no okay. 79 00:05:42,110 --> 00:05:44,220 And that's pretty much be it. 80 00:05:44,240 --> 00:05:49,790 So now anytime we use this hook we'll pass in a billion value as the first argument if that value is 81 00:05:49,790 --> 00:05:54,850 true or if it ever changes we're going to rerun this function right here if should track is true. 82 00:05:54,860 --> 00:05:59,900 We're going to start at the starting the watching process but if it is false then we're going to stop 83 00:05:59,900 --> 00:06:05,210 the existing subscriber and set that subscriber piece of state to no because we don't need access to 84 00:06:05,210 --> 00:06:06,370 that subscriber anymore. 85 00:06:06,410 --> 00:06:10,000 Just basically tossing it out the window altogether. 86 00:06:10,010 --> 00:06:10,250 All right. 87 00:06:10,250 --> 00:06:11,480 So I think we're ready for a test. 88 00:06:11,600 --> 00:06:15,520 But before we test it we need some way to actually verify that we're not tracking anymore. 89 00:06:15,530 --> 00:06:18,380 Even if we're not looking at the track rate screen. 90 00:06:18,380 --> 00:06:24,490 So inside of my location context dot j ust file I'm going to find add location right here. 91 00:06:24,530 --> 00:06:28,630 Remember that function gets called anytime we update a user's location. 92 00:06:28,760 --> 00:06:32,780 So I'm gonna just gonna put a little console log inside there that says Hi there. 93 00:06:32,780 --> 00:06:35,900 So as soon as we stop seeing Hi there console logs at the terminal. 94 00:06:35,900 --> 00:06:39,180 That means that we have stopped tracking the user's location. 95 00:06:39,190 --> 00:06:39,440 OK. 96 00:06:39,470 --> 00:06:44,270 So going to save this I can save all these different files going to do a quick refresh and then go to 97 00:06:44,360 --> 00:06:52,020 track create gates so I still see my location and if I go over to my terminal there we go there's the 98 00:06:52,020 --> 00:06:59,070 Hi there console logs and now if I go away to some other screen like track list I should once again 99 00:06:59,070 --> 00:07:02,240 be able to go back over and I no longer see any console logs up here. 100 00:07:02,250 --> 00:07:07,340 So we have successfully disabled location tracking because we navigated away. 101 00:07:07,370 --> 00:07:13,100 Now if I go back to track create screen it should start up the tracking process once again and yep looks 102 00:07:13,100 --> 00:07:13,920 like it sure did. 103 00:07:13,940 --> 00:07:17,940 I see the map moving and I see console logs appearing again very good. 104 00:07:18,090 --> 00:07:22,490 You might notice that when I tap back over or when I went back to track create my little marker move 105 00:07:22,510 --> 00:07:28,180 just a little bit remember that's because I'm using that fake tracking data through block location and 106 00:07:28,180 --> 00:07:33,100 this thing just has a set interval inside of it which means no matter what weather on tracking location 107 00:07:33,100 --> 00:07:37,980 or not I'm always changing my position in the background okay. 108 00:07:38,010 --> 00:07:40,140 So it looks like this works out pretty well. 109 00:07:40,230 --> 00:07:44,940 Now I do want you to recall that we had said originally back inside of like original mockups that if 110 00:07:44,940 --> 00:07:49,470 we are recording a track is remember right now we're not technically recording a track we're just displaying 111 00:07:49,470 --> 00:07:55,200 the user's location but once we actually start recording a track if we go to a different screen we do 112 00:07:55,200 --> 00:07:57,050 want to keep recording. 113 00:07:57,120 --> 00:08:01,740 The good thing about that is that the way in which we wired up use location right here and the fact 114 00:08:01,740 --> 00:08:06,420 that it just accepts a boolean as the first value means that it's really easy for us to put in some 115 00:08:06,420 --> 00:08:10,890 additional requirements to decide whether or not we want to actually stop tracking. 116 00:08:10,890 --> 00:08:17,070 So once we decide to start a recording process and we want to not disable tracking when we go between 117 00:08:17,070 --> 00:08:19,460 screens no problem really easy. 118 00:08:19,500 --> 00:08:25,210 We just need to make sure we pass in an appropriate value for that variable right there OK. 119 00:08:25,250 --> 00:08:26,180 So this looks great. 120 00:08:26,180 --> 00:08:28,580 Let's take a pause right here and continue in the next video.