1 00:00:01,400 --> 00:00:03,380 Now we can see what the user's current location is. 2 00:00:03,380 --> 00:00:06,420 We can start to really think about architecting our application. 3 00:00:06,500 --> 00:00:07,790 So what do I mean by that. 4 00:00:07,790 --> 00:00:12,890 Well we're gonna have some really complex interactions between this location update right here our map 5 00:00:13,190 --> 00:00:16,820 and the overall data flowing out throughout our application. 6 00:00:16,880 --> 00:00:21,140 Anytime we see a location update we need to make sure that we take that current location and we use 7 00:00:21,140 --> 00:00:24,140 it to update the center point of our map right here. 8 00:00:24,140 --> 00:00:28,240 So we always want to send to the map on wherever the user actually is. 9 00:00:28,250 --> 00:00:33,200 In addition we want to make sure that if the user is currently recording a track we also somehow record 10 00:00:33,200 --> 00:00:37,970 this location as well and stored inside of an array or something like that to indicate that this is 11 00:00:38,000 --> 00:00:42,020 a point that a user pass through while they were recording a track. 12 00:00:42,200 --> 00:00:46,610 So to coordinate all this stuff and all this flow of information we're going to add in some kind of 13 00:00:46,610 --> 00:00:48,870 complex architecture to our app. 14 00:00:49,070 --> 00:00:50,770 Here's essentially what we're going to do. 15 00:00:51,020 --> 00:00:56,030 So we're going to add in a new piece of context something called our location provider. 16 00:00:56,030 --> 00:01:01,100 This is going to hold some information related to the user's current location in the world and related 17 00:01:01,100 --> 00:01:04,950 to the ability to create a new track and then eventually save it. 18 00:01:04,970 --> 00:01:10,430 So inside this location provider we're going to record the user's most recent location as a flag called 19 00:01:10,580 --> 00:01:12,360 current location. 20 00:01:12,490 --> 00:01:17,260 We're going to record whether or not the user is currently recording a track under a flag called recording 21 00:01:18,580 --> 00:01:22,840 and then finally it will store a list of locations that the user has passed through. 22 00:01:22,870 --> 00:01:27,550 So we're going to have all this information available to our track create screen the track form and 23 00:01:27,550 --> 00:01:28,370 the map. 24 00:01:28,600 --> 00:01:33,160 Remember the track form is going to be that form right there down at the bottom and has that big record 25 00:01:33,160 --> 00:01:35,690 button on their All right. 26 00:01:35,690 --> 00:01:40,360 Now the actual kind of way in which this stuff works together is unfortunately a little bit complicated. 27 00:01:40,370 --> 00:01:44,000 So going to show you another diagram that's going to kind of expand on this architecture a little bit 28 00:01:44,240 --> 00:01:46,820 and give you a better idea of what's going on. 29 00:01:47,040 --> 00:01:47,300 OK. 30 00:01:47,330 --> 00:01:51,620 So this is essentially the final kind of form of what we're going for. 31 00:01:51,630 --> 00:01:54,630 So in this diagram I cut out a couple of things you saw in the last one. 32 00:01:54,690 --> 00:01:59,370 So at the very top we do have our location provider again location providers going to store the user's 33 00:01:59,430 --> 00:02:03,130 most recent location as something called current location. 34 00:02:03,230 --> 00:02:07,560 It will have that recording boolean and then an array of locations. 35 00:02:07,740 --> 00:02:12,150 One of the most important things we want to focus on right now is making sure that the current location 36 00:02:12,180 --> 00:02:18,300 where the user's most recent location that was red somehow gets placed or sent down to our map component 37 00:02:19,280 --> 00:02:21,300 once we get that current location inside of map. 38 00:02:21,320 --> 00:02:27,940 We can then use that current location to update what the map is centred upon now at present all of our 39 00:02:27,940 --> 00:02:31,760 code around handling location updates is directly inside of our track. 40 00:02:31,770 --> 00:02:34,890 Great screen if we left all of that code inside there. 41 00:02:34,900 --> 00:02:38,920 So I'm talking specifically about this like permission stuff in this watch position stuff. 42 00:02:38,920 --> 00:02:41,920 We could definitely leave the stuff inside of track create screen. 43 00:02:42,040 --> 00:02:47,110 However if we did track track create screen with very quickly be very challenging to read. 44 00:02:47,140 --> 00:02:53,020 So instead we're going to start to extract some of that logic into a new reusable hook called use location 45 00:02:54,130 --> 00:02:58,690 anytime that we want to get some updates on a user's location or any time we want to read a user's location 46 00:02:58,690 --> 00:03:01,620 in any way we're going to use this hook right here. 47 00:03:01,720 --> 00:03:06,400 And we're going to pass it a callback function this callback function is going to be automatically invoked 48 00:03:06,400 --> 00:03:07,460 by use location. 49 00:03:07,480 --> 00:03:09,750 Anytime that the user's location changes. 50 00:03:09,850 --> 00:03:13,630 So essentially the callback is going to be put in like right there. 51 00:03:13,750 --> 00:03:18,960 Anytime we get an update on the user's location will invoke that callback so inside of track create 52 00:03:18,960 --> 00:03:24,990 screen we can pass that callback over and inside of the callback we can get the most recent location 53 00:03:25,080 --> 00:03:30,390 and use that to update the user's current location up inside of our provider and added onto the list 54 00:03:30,390 --> 00:03:34,320 of locations that the user has passed through if they are currently recording a track. 55 00:03:35,180 --> 00:03:35,500 OK. 56 00:03:35,520 --> 00:03:41,880 I know this is all kind of complicated stuff but this is pretty much new it's what react native is there's 57 00:03:41,880 --> 00:03:45,160 some degree of complicated stuff here and it's kind of unavoidable. 58 00:03:45,360 --> 00:03:47,220 So now that we've got a better idea of what's going on. 59 00:03:47,220 --> 00:03:51,390 Let's take one more quick pause start writing some code to implement all this stuff in the next video.