1 00:00:00,980 --> 00:00:04,300 All right without further ado let's start to implement this architecture. 2 00:00:04,340 --> 00:00:08,610 The first thing I want to do is add in a new context called location. 3 00:00:08,750 --> 00:00:12,460 And we're going to use this thing to maintain a couple of different pieces of state. 4 00:00:12,710 --> 00:00:17,510 So back inside my code editor I'll find a context directory inside there I'll create a new file called 5 00:00:17,570 --> 00:00:26,850 location context dot J.S. then at the very top are going to import create data context from create data 6 00:00:27,600 --> 00:00:36,150 context I'll then make a location reducer as usual this thing will be called with a state object in 7 00:00:36,150 --> 00:00:43,400 some action and right now I'll just set up my switch statements I'll say switch over action type by 8 00:00:43,400 --> 00:00:51,550 default just return our state's then after that I'm going to start to kind of scaffold out a couple 9 00:00:51,550 --> 00:00:55,040 of the different action functions that I think we're going to need. 10 00:00:55,060 --> 00:00:59,530 So first off I think that we need the ability to toggle whether or not we are recording. 11 00:00:59,530 --> 00:01:04,590 Remember recording means that we want to take the user's location updates and store them somehow. 12 00:01:04,630 --> 00:01:09,110 So I want to create some action functions to update that recording flag. 13 00:01:09,310 --> 00:01:15,630 I'll create one called like start recording and I'm gonna use that Shorten syntax here like so. 14 00:01:15,650 --> 00:01:17,470 So remember you we'll type of there. 15 00:01:17,520 --> 00:01:18,130 That's better. 16 00:01:18,510 --> 00:01:23,760 So remember this is going to be one function that gets called with dispatch that returns a another function 17 00:01:25,090 --> 00:01:32,190 will then create another called like stop recording. 18 00:01:32,200 --> 00:01:39,280 Next up I think we need the ability to maybe also how about update or like add in a new location. 19 00:01:39,580 --> 00:01:43,350 So I'll add in a function called something like add location. 20 00:01:43,360 --> 00:01:47,950 So essentially we might want to call add location right here any time we get a location update out of 21 00:01:47,950 --> 00:01:55,390 our use location hook so for ADD location I'll do dispatch like so. 22 00:01:55,670 --> 00:01:57,440 And I think that should at least get us started. 23 00:01:57,440 --> 00:02:01,850 For right now there will be eventually some other action functions we put inside of here but they're 24 00:02:01,850 --> 00:02:03,430 not going to quite make sense just yet. 25 00:02:03,440 --> 00:02:07,010 So we'll come back and add those in in just a little bit. 26 00:02:07,070 --> 00:02:14,000 So then at the very bottom the file will do our export const context and provider and that's all going 27 00:02:14,000 --> 00:02:21,410 to come from create data context and as usual for the first argument we're going to put in our reducer 28 00:02:22,190 --> 00:02:27,910 which is the location reducer well then put inside of an object are different action functions. 29 00:02:27,980 --> 00:02:37,100 So put an object in would start recording stop recording and add location. 30 00:02:37,290 --> 00:02:40,610 And then finally I'm going to provide some initial state object here as well. 31 00:02:40,650 --> 00:02:45,450 So as we just discussed I think that our initial state object should have like a recording flag some 32 00:02:45,480 --> 00:02:53,320 locations array and whatever the current location is as well so my initial state objects will have recording 33 00:02:53,860 --> 00:02:55,360 by default we're gonna say false. 34 00:02:55,360 --> 00:03:00,640 No we are not recording any new track we're gonna have an empty array of locations that the users pass 35 00:03:00,640 --> 00:03:05,950 through and we'll have a current location that's going to start off as not to say we don't yet have 36 00:03:05,980 --> 00:03:09,390 any location whatsoever okay. 37 00:03:09,420 --> 00:03:11,880 So that's a good start for our location context. 38 00:03:11,940 --> 00:03:15,830 Now let's make sure that we wire up this provider inside of our app dot J.S. file. 39 00:03:16,160 --> 00:03:24,510 So inside of app dot J.S. at the very top we'll make sure that I import provider as location provider 40 00:03:25,870 --> 00:03:33,970 from we're gonna walk into our there from not form gonna walk into our s our city directory context 41 00:03:34,420 --> 00:03:40,780 location context and then we can place that location provider down inside of the component that we create 42 00:03:40,780 --> 00:03:42,110 inside of here. 43 00:03:42,190 --> 00:03:48,260 So I'm going to wrap my auth provider with location provider like so 44 00:03:52,540 --> 00:03:52,830 okay. 45 00:03:52,870 --> 00:03:54,070 That's step one. 46 00:03:54,100 --> 00:03:57,720 So I can say this I can make sure that my application doesn't crash or anything like that. 47 00:03:57,740 --> 00:03:58,850 Yeah looks good. 48 00:03:58,870 --> 00:04:03,400 So now we've got some new provider that's going to be in charge of taking all these different location 49 00:04:03,400 --> 00:04:05,760 updates and doing something with them. 50 00:04:05,800 --> 00:04:07,410 So let's now take another quick pause. 51 00:04:07,480 --> 00:04:12,010 The next video we're going to wire up this context thing right here inside of our track create screen 52 00:04:12,310 --> 00:04:17,260 we'll make sure that anytime we get a location update we somehow store that inside of our location context 53 00:04:17,710 --> 00:04:19,570 so quick pause I'll see you in just a minute.