1 00:00:00,850 --> 00:00:02,770 We just created our location provider. 2 00:00:02,780 --> 00:00:06,550 So now we've got these three different pieces of state that are being managed inside our application 3 00:00:07,390 --> 00:00:08,980 as a little short term goal. 4 00:00:09,070 --> 00:00:13,330 I want to try to make sure that every time that we get an update to the user's location I want to update 5 00:00:13,330 --> 00:00:15,520 that current location property right there. 6 00:00:16,060 --> 00:00:20,830 I then want to make sure that we hook up that piece of state to our map component and inside of our 7 00:00:20,830 --> 00:00:21,520 map component. 8 00:00:21,520 --> 00:00:26,430 I want to try to recenter our map view any time that we get a new current location. 9 00:00:26,440 --> 00:00:30,700 So essentially I want to try to track the user's location as they move around the world. 10 00:00:31,060 --> 00:00:34,900 Now as a quick reminder we do not yet have this used location hook. 11 00:00:34,900 --> 00:00:39,280 We're going to add this stuff in in just a moment but right now we're just going to work solely from 12 00:00:39,310 --> 00:00:45,880 our track create screen so to get all this stuff put together inside of track it create screen remember 13 00:00:45,880 --> 00:00:51,040 we've got that callback right there that gets called anytime we see a new location. 14 00:00:51,070 --> 00:00:55,900 So from that callback I want to make sure that we try to dispatch an action that's going to update our 15 00:00:55,900 --> 00:00:57,570 current location property. 16 00:00:57,760 --> 00:01:01,990 We're then going to just make sure that that piece of information eventually flows down to our map component 17 00:01:02,740 --> 00:01:07,600 even though we're using all this fancy terminology right now this idea of updating some piece of state 18 00:01:07,840 --> 00:01:12,940 and then consuming it inside of some component is 100 percent unchanged compared to all the stuff we've 19 00:01:12,940 --> 00:01:14,130 done throughout this course. 20 00:01:14,290 --> 00:01:18,220 We're still doing the same stuff we're updating some piece of state and then getting access to that 21 00:01:18,220 --> 00:01:21,540 inside of some components okay. 22 00:01:21,570 --> 00:01:23,360 So let's give this stuff a shot. 23 00:01:23,360 --> 00:01:29,180 So to get started going to first find my track create screen inside of here I want to change some state 24 00:01:29,210 --> 00:01:34,910 that's inside my context object to do so I need to make sure that I first get access to some action 25 00:01:34,910 --> 00:01:40,540 function that's inside there anytime we want to get access to an action function we need to import the 26 00:01:41,020 --> 00:01:48,040 use context took from react and we also need to import the context object itself so I'll do an import 27 00:01:48,040 --> 00:01:59,190 context as location context from up one directory context location context it's now we can add in a 28 00:01:59,280 --> 00:02:00,680 use context call inside of here. 29 00:02:00,710 --> 00:02:04,950 So I'll say get the add location action function. 30 00:02:04,950 --> 00:02:08,750 Remember we just kind of scaffolding that out right there. 31 00:02:08,940 --> 00:02:14,530 We want to get that function from use context location context. 32 00:02:14,530 --> 00:02:19,140 So right now add location does nothing but we're gonna add in some additional functionality to it in 33 00:02:19,140 --> 00:02:20,640 just a moment. 34 00:02:20,690 --> 00:02:25,350 So now down inside my call callback right here that gets invoked every single time a user changes their 35 00:02:25,350 --> 00:02:32,310 location rather than just doing a console log I'm going to instead call add location with that new location 36 00:02:32,310 --> 00:02:39,460 object so I'll call add location in passing the new location object okay. 37 00:02:39,490 --> 00:02:41,920 So that's all we do inside of a track create screen. 38 00:02:41,950 --> 00:02:47,190 So now every time we get an update we're calling an action function site of location provider. 39 00:02:47,200 --> 00:02:51,610 So now inside of location provider we need to make sure that we dispatch an action that's going to run 40 00:02:51,610 --> 00:02:58,100 through our reducer and update the current location piece of state so going to say this file and change 41 00:02:58,100 --> 00:03:02,050 back over to the location context J.S. file. 42 00:03:02,120 --> 00:03:06,800 So here's the add location function that we are now calling in like we just said this function is now 43 00:03:06,800 --> 00:03:13,590 going to be invoked with a location object so inside of here we want to dispatch an action. 44 00:03:13,780 --> 00:03:23,290 I'll give it a type of something like add current location and I'll also give it a payload of that location 45 00:03:23,290 --> 00:03:27,560 object so remember any time we call dispatch function. 46 00:03:27,590 --> 00:03:32,840 This object right here is going to show up inside of our reducer as that second argument. 47 00:03:32,840 --> 00:03:40,350 So now we can put in an additional case statement of ADD current location and we can return our updated 48 00:03:40,350 --> 00:03:41,850 state object. 49 00:03:41,850 --> 00:03:46,890 So chances are we want to just take all the existing properties inside of our city object so we'll create 50 00:03:46,890 --> 00:03:52,550 the new object right there and say dot dot dot state and we'll put in the update that we want to make. 51 00:03:52,560 --> 00:03:55,830 So in this case we want to update the current location property. 52 00:03:55,920 --> 00:04:01,200 We want to say hey we just got a new location read out so we're gonna take action not payload inside 53 00:04:01,200 --> 00:04:08,010 of reducer and use that to update the current location property it's a backup here I'll say current 54 00:04:08,010 --> 00:04:16,250 location is now going to be action dot payload and that should be at so we've now essentially gone from 55 00:04:16,370 --> 00:04:21,340 our component up to location provider and we updated that piece of state. 56 00:04:21,530 --> 00:04:25,310 It's now the last thing we have to do is make sure that that piece of information flows down to our 57 00:04:25,550 --> 00:04:34,290 map component so I'm now going to open up my map dot J.S. file inside of our components directory remember 58 00:04:34,290 --> 00:04:38,070 inside of here at present we are generating a random list of points. 59 00:04:38,070 --> 00:04:41,100 Well not really random but more or less random. 60 00:04:41,130 --> 00:04:43,850 We only did this to figure out how we could draw a line on the map. 61 00:04:44,010 --> 00:04:48,180 So we really don't need this stuff anymore so I'm going to delete that for loop in the points array 62 00:04:49,900 --> 00:04:51,820 now that we no longer have an array of points. 63 00:04:51,820 --> 00:04:53,880 I'm also going to delete the poly line. 64 00:04:54,010 --> 00:04:56,060 We're going to put this back in here in just a moment. 65 00:04:56,140 --> 00:05:00,220 But for right now like I said we don't have an array of points songs can delete it for now. 66 00:05:01,990 --> 00:05:02,300 All right. 67 00:05:02,300 --> 00:05:07,130 So now we want to get some access to some piece of information inside of our map component and this 68 00:05:07,130 --> 00:05:09,530 information is coming from our provider. 69 00:05:09,560 --> 00:05:15,770 So as usual we need to make sure that we import our used context took and the context object itself 70 00:05:15,800 --> 00:05:25,350 that is tied to that provider so at the very top from react I'm going to get used context and I'll also 71 00:05:25,350 --> 00:05:38,160 import context as location context from up one directory context location context. 72 00:05:38,360 --> 00:05:46,210 It's now inside of our component we can pull off the state object using used context with location context. 73 00:05:46,250 --> 00:05:51,280 So now every single time that we get a location update we should see it inside that state object. 74 00:05:51,300 --> 00:05:55,060 Right now let's just add in the console log and verified that that is the case. 75 00:05:55,190 --> 00:06:00,180 So I'll do a console log of the entire state object like so now before I test this out. 76 00:06:00,200 --> 00:06:05,240 I want to remind you that at this point in time it's kind of up to you how you are getting your location 77 00:06:05,300 --> 00:06:07,570 updates inside of tracked rate screen. 78 00:06:07,580 --> 00:06:13,700 I am relying upon the fake location data coming from mock location if you want to use some other type 79 00:06:13,700 --> 00:06:19,140 of sourcing location updates either by using your android emulator or IO a simulator go for it. 80 00:06:19,370 --> 00:06:26,520 But if you're on a physical device chances are you want to use that fake data it's going to save this 81 00:06:27,410 --> 00:06:29,830 and then I'm going to go back over to my device. 82 00:06:29,970 --> 00:06:35,210 I'll go to a track create and I'm going to make sure that I've got some console logs appearing in my 83 00:06:35,210 --> 00:06:38,660 terminal so back inside my terminal. 84 00:06:38,720 --> 00:06:40,320 Here's my big state object. 85 00:06:40,430 --> 00:06:42,170 So I've got my current location. 86 00:06:42,380 --> 00:06:47,570 I can see that about once every seconds the latitude and longitude is being updated by supposedly about 87 00:06:47,570 --> 00:06:49,200 10 meters or so. 88 00:06:49,250 --> 00:06:56,080 And I also have my locations array and recording property so notice that my location object has a court's 89 00:06:56,080 --> 00:07:01,340 property and inside of cords is my latitude and longitude. 90 00:07:01,360 --> 00:07:04,180 So this is looking pretty good now. 91 00:07:04,180 --> 00:07:05,310 One quick thing here. 92 00:07:05,350 --> 00:07:12,050 If you're on a physical device I would encourage you at this point in time to very quickly comment out 93 00:07:12,110 --> 00:07:15,540 the mock location right here inside of track create screen. 94 00:07:15,710 --> 00:07:21,510 Go back over the track create see your console log here and whatever console log you have on a physical 95 00:07:21,510 --> 00:07:27,600 device should be your real latitude and longitude in the physical world. 96 00:07:27,600 --> 00:07:32,910 So I would take that latitude longitude like your very real latitude and longitude for your location 97 00:07:32,910 --> 00:07:39,840 in the world and I would use that as your starting point inside the mock location file right here so 98 00:07:39,840 --> 00:07:45,210 inside of right here inside a mock location find longitude latitude and update those two values to be 99 00:07:45,270 --> 00:07:47,740 your real world location. 100 00:07:47,970 --> 00:07:52,950 If you do not do that you're going to see the map jumping all over the place as your physical device 101 00:07:52,980 --> 00:07:57,400 gives you a real location and then the next second a fake location. 102 00:07:57,540 --> 00:08:01,770 And so it's going to be a really disorienting and hard to figure out exactly what's going on. 103 00:08:01,770 --> 00:08:07,090 So once again I would encourage you to update the longitude and latitude to your physical location. 104 00:08:07,110 --> 00:08:07,380 All right. 105 00:08:07,410 --> 00:08:13,750 So now that I've got that out of the way I'm going to comment Mark location back inside of mapped out. 106 00:08:13,810 --> 00:08:19,040 J.S. very clearly our state object now has the information that we expected to have. 107 00:08:19,040 --> 00:08:24,770 So now we can use that longitude enlarged latitude property inside of the current location dot coords 108 00:08:24,800 --> 00:08:30,810 object to place our map view and center it on wherever we actually are. 109 00:08:30,840 --> 00:08:35,590 So inside of here the first thing I'm going to do is d structure off of the state object. 110 00:08:35,630 --> 00:08:41,570 I want to get just the current location property like so because I don't really care about the recording 111 00:08:41,570 --> 00:08:44,790 flag or locations or anything else. 112 00:08:44,930 --> 00:08:46,490 The next thing I need to make sure that I do. 113 00:08:46,550 --> 00:08:51,890 I remember whenever we initialize our state object current location is going to be no because our application 114 00:08:51,890 --> 00:08:52,730 first boots up. 115 00:08:52,820 --> 00:08:55,350 We don't know what our current location is. 116 00:08:55,370 --> 00:09:00,050 So if I don't have a current location chances are I don't want to show the map yet. 117 00:09:00,200 --> 00:09:02,210 So I'm going to put inside if you're a quick check. 118 00:09:02,210 --> 00:09:05,030 I'm going to say if we do not have a current location. 119 00:09:05,180 --> 00:09:11,890 If that value is null then I want to return early and we can very easily do something just like say 120 00:09:11,890 --> 00:09:12,820 don't show anything. 121 00:09:13,150 --> 00:09:17,830 Alternatively we can very easily show a spinner to the user which might be kind of nice. 122 00:09:17,830 --> 00:09:27,840 So I could instead do a return activity indicator like so I'll give it a size of large. 123 00:09:28,030 --> 00:09:33,960 And I'm also going to hard code in some style property here it's going to pass in an object and I'll 124 00:09:33,960 --> 00:09:36,130 do a margin top of 200. 125 00:09:36,180 --> 00:09:40,710 That's just kind of like a very rough style there to kind of get the activity indicator to roughly show 126 00:09:40,710 --> 00:09:43,490 up in the middle of the screen. 127 00:09:43,690 --> 00:09:44,090 All right. 128 00:09:44,090 --> 00:09:51,160 So then I'm going to make sure very quickly that I import the activity indicator from React Native. 129 00:09:51,190 --> 00:09:54,720 So now we've handled a case in which we do not yet have a current location. 130 00:09:54,720 --> 00:09:58,770 If we do have a current location and we end up returning the Mount View then we probably want to use 131 00:09:58,770 --> 00:10:04,140 the latitude and longitude from the locate current location property as opposed to the hardcoded ones 132 00:10:04,140 --> 00:10:05,490 we have right here. 133 00:10:05,550 --> 00:10:14,250 So to do so we're gonna put in dot dot dot current location dot courts remember that coords object. 134 00:10:14,290 --> 00:10:16,930 That's where our latitude and longitude are. 135 00:10:17,020 --> 00:10:21,220 So we're gonna take the latitude and longitude out of that current location and then we're going to 136 00:10:21,220 --> 00:10:26,920 also apply in the latitude Delta in longitude Delta which remember is essentially how wide and tall 137 00:10:26,920 --> 00:10:33,100 the map is or essentially in reality how zoomed in it is I should say one less thing initial region 138 00:10:33,100 --> 00:10:38,410 right here is an indication of what the map should show when it first gets rendered on the screen. 139 00:10:38,410 --> 00:10:41,800 If we want to then kind of have the map track the user around. 140 00:10:42,010 --> 00:10:48,430 We could also add in a second prop called simply region whenever we update this region property the 141 00:10:48,430 --> 00:10:54,100 map is going to automatically update itself and recenter on the user and resume as well. 142 00:10:54,900 --> 00:10:59,550 For our region we want it to be essentially identical to initial region because once again we want to 143 00:10:59,550 --> 00:11:04,360 use whatever our current location led to in longitude hour and probably the same Delta as well. 144 00:11:04,490 --> 00:11:11,060 So I'm going to copy all three of those down into a region like so OK. 145 00:11:11,080 --> 00:11:12,030 So that should be it. 146 00:11:12,030 --> 00:11:16,350 We should now be ready to test this stuff out now as a quick reminder we just went through this entire 147 00:11:16,350 --> 00:11:20,040 flow so we got some updated data inside of track rate screen. 148 00:11:20,040 --> 00:11:21,810 We threw it up to our provider. 149 00:11:21,810 --> 00:11:27,800 We update the current location property and then consumed it inside of our map component. 150 00:11:27,900 --> 00:11:32,680 Let's now save this and see how we're doing gag and go to track create. 151 00:11:32,800 --> 00:11:38,050 I saw a spinner as my location was being obtained or the initial location. 152 00:11:38,170 --> 00:11:42,340 And now once every second or so I can see that my map is kind of moving around. 153 00:11:42,490 --> 00:11:43,600 Awesome. 154 00:11:43,600 --> 00:11:48,880 So again I want to remind you at this point time that if your map is like wildly jumping all over the 155 00:11:48,880 --> 00:11:53,530 place it is 100 percent because of the mock location stuff. 156 00:11:53,530 --> 00:11:57,130 Remember at present we are reading the user's real location. 157 00:11:57,340 --> 00:12:02,800 If we have a location like on a physical device and we are also simultaneously throwing out these fake 158 00:12:02,800 --> 00:12:04,210 points as well. 159 00:12:04,360 --> 00:12:07,100 So the two might be kind of conflicting with each other. 160 00:12:07,300 --> 00:12:08,820 Obviously not super ideal. 161 00:12:08,830 --> 00:12:14,050 Nonetheless this is the best solution we have for kind of moving around our map a little bit or simulating 162 00:12:14,050 --> 00:12:18,190 movement without having to have you like walk around the block so to speak. 163 00:12:18,190 --> 00:12:23,500 So if your map is jumping around super wildly remember you can set your longitude and latitude to be 164 00:12:23,740 --> 00:12:27,070 essentially very close to wherever you are in the physical world. 165 00:12:27,160 --> 00:12:30,360 Even then you might see still see a little bit of jumping around. 166 00:12:30,670 --> 00:12:36,340 If that's still really annoying to you you can very easily go back to your track create screen and just 167 00:12:36,340 --> 00:12:43,450 say I don't want to use mock location at all and just rely upon natural updates of your location if 168 00:12:43,450 --> 00:12:44,950 you don't use map Mark location. 169 00:12:44,950 --> 00:12:49,360 Once again it's going to a little bit challenging to actually simulate movement nonetheless that's the 170 00:12:49,360 --> 00:12:52,880 solution we have for better or for worse OK. 171 00:12:52,910 --> 00:12:55,670 So overall I would say this is working out pretty decently. 172 00:12:55,760 --> 00:13:00,950 So now about once every second we get that location update and we use it to update the user's map or 173 00:13:01,030 --> 00:13:04,850 similar location the world which therefore moves our map as well. 174 00:13:04,850 --> 00:13:09,080 Now one thing one to mention is that because we are setting the region property on our map that's going 175 00:13:09,080 --> 00:13:14,020 to essentially reset the map to that location even if the user starts to drag it around. 176 00:13:14,030 --> 00:13:19,490 So if I start to drag like that I'm just gonna get kind of like rubber banded back maybe not the best 177 00:13:19,490 --> 00:13:25,590 thing in the world but once again it's kind of what we have if we don't want to see that kind of rubber 178 00:13:25,590 --> 00:13:30,800 band action we could remove the region property and we will not see any further updates. 179 00:13:30,930 --> 00:13:35,610 We'll only see the initial region be set so I can now go back to try to create. 180 00:13:35,610 --> 00:13:42,580 Now I'm here and I can once again drag but again I don't see any further updates in my maps location. 181 00:13:42,640 --> 00:13:43,690 So it looks pretty reasonable. 182 00:13:43,690 --> 00:13:46,650 So let's take a pause right here and continue in just a moment.