1 00:00:01,210 --> 00:00:03,670 We've got our track form kind of scaffolding that right here. 2 00:00:03,670 --> 00:00:07,240 So now we need to start thinking about what this form actually does. 3 00:00:07,240 --> 00:00:11,250 Whenever user taps on this button we probably want to start recording. 4 00:00:11,460 --> 00:00:13,380 What does it really mean to record though. 5 00:00:13,380 --> 00:00:17,910 Well remember back inside of our context our location context to be precise. 6 00:00:17,910 --> 00:00:23,040 We had that location's property inside of our state object right now location starts off by default 7 00:00:23,070 --> 00:00:24,560 as an empty array. 8 00:00:24,630 --> 00:00:28,680 So whenever a user TAPS ON RECORDING We're going to want to make sure that every time that we get a 9 00:00:28,680 --> 00:00:34,560 location out of the Expo location library we're not only going to update our current location but we're 10 00:00:34,560 --> 00:00:40,550 also going to add that location to the locations array so we need to make sure that whenever we start 11 00:00:40,550 --> 00:00:46,670 recording or stop recording we either start adding half additional locations that come into add location 12 00:00:46,850 --> 00:00:48,890 to that locations array right there. 13 00:00:48,920 --> 00:00:53,040 So that's definitely some change we're gonna have to make to our IT location context file. 14 00:00:53,120 --> 00:00:58,250 In addition we probably want to track the name of the track that the user is recording whenever they 15 00:00:58,250 --> 00:01:00,500 type it in inside of this input. 16 00:01:00,590 --> 00:01:04,970 We could track that piece of state inside of our track form but it might make a lot more sense to track 17 00:01:05,000 --> 00:01:07,760 the name inside of location contexts. 18 00:01:07,790 --> 00:01:12,710 The reason for that is that at some point time whenever a user hits like stop recording or save or something 19 00:01:12,710 --> 00:01:18,530 like that on our form we're going to want to save a record to our back end API that includes the list 20 00:01:18,530 --> 00:01:21,620 of locations that have been recorded and the name as well. 21 00:01:21,620 --> 00:01:26,000 So it makes a lot of sense to kind of co-located both the list of locations and the name that the user 22 00:01:26,000 --> 00:01:29,350 enters in the same location OK. 23 00:01:29,380 --> 00:01:35,230 So all that essentially is saying we need to do some work on our location context file we need to add 24 00:01:35,230 --> 00:01:41,130 in a piece of state called name we need to add in some implementation for start and stop recording and 25 00:01:41,140 --> 00:01:46,270 we need to make sure that any time recording is true whenever we get a location we add it into that 26 00:01:46,270 --> 00:01:47,130 locations are right. 27 00:01:47,140 --> 00:01:49,370 So a couple different things going on here. 28 00:01:49,420 --> 00:01:51,520 So to get started let's just begin easy. 29 00:01:51,580 --> 00:01:55,930 We're going to first put in some implementation for start and stop recording. 30 00:01:56,290 --> 00:02:01,270 So inside of START RECORDING I'm going to make sure that any time this thing gets called I will dispatch 31 00:02:01,270 --> 00:02:07,870 an action of type start recording that's all we really have to do. 32 00:02:07,870 --> 00:02:12,370 We don't need a payload because essentially we're just saying hey turn that recording flag from the 33 00:02:12,370 --> 00:02:15,030 default of false over to true. 34 00:02:15,040 --> 00:02:21,980 So inside of our reducer we can add in a case of start recording so we'll take our entire state object 35 00:02:22,010 --> 00:02:29,310 as usual and we'll update the recording flag to true now we can do the same thing for stop recording. 36 00:02:29,430 --> 00:02:40,710 So inside of my stop recording action function I will dispatch a type of stop recording and then inside 37 00:02:40,710 --> 00:02:46,490 of my reducer case stop recording and I'll return. 38 00:02:46,490 --> 00:02:51,740 Dot dot dot state and this time we want to set recording to false. 39 00:02:51,910 --> 00:02:53,670 Like so. 40 00:02:53,740 --> 00:02:54,990 So that's a good start. 41 00:02:54,990 --> 00:02:58,350 So we've now got the ability to toggle our recording state. 42 00:02:58,430 --> 00:03:02,880 It's now the next thing we want to do is make sure that any time that we add a location coming from 43 00:03:02,910 --> 00:03:08,880 Expo location we're going to always want to update our current location by dispatching action of type 44 00:03:08,880 --> 00:03:14,490 at current location but we're also going to want to take a look at what our recording flag is as well. 45 00:03:14,490 --> 00:03:19,560 If recording is set to true well then we're going to want to maybe dispatch an additional action and 46 00:03:19,560 --> 00:03:27,540 say okay let's make sure that we add in this new location to our locations array now in order to actually 47 00:03:27,600 --> 00:03:29,580 read in that recording flag. 48 00:03:29,580 --> 00:03:34,170 Unfortunately we cannot read read read in that piece of state inside of an action function. 49 00:03:34,290 --> 00:03:39,600 So we need to check to see whether or not we are currently recording by adding it in as an additional 50 00:03:39,600 --> 00:03:42,800 argument to our add location action function. 51 00:03:42,810 --> 00:03:47,370 So in other words in addition to the location argument that we're going to receive here we're also going 52 00:03:47,370 --> 00:03:53,750 to receive whether or not we are currently recording so we need to go back to our track rate screen 53 00:03:53,750 --> 00:03:58,430 at some point time and make sure that inside of our callback we also pass in that recording flag. 54 00:03:58,430 --> 00:04:00,790 But we'll take care of that in just a moment. 55 00:04:00,810 --> 00:04:08,510 So then inside of here we'll say if we are recording let's also dispatch an action of type add location 56 00:04:09,650 --> 00:04:16,600 and a payload of whatever that current location is so the first action that we're dispatching right 57 00:04:16,600 --> 00:04:18,220 here is going to update our current location. 58 00:04:18,220 --> 00:04:22,230 The second one is going to add our location to our locations array. 59 00:04:22,390 --> 00:04:26,140 So that's what's going to eventually result in the array of locations that we're going to use to build 60 00:04:26,140 --> 00:04:31,990 up our lines on our map so now we can add in a case for that new type as well. 61 00:04:32,090 --> 00:04:37,550 So backup here all add in a case of ADD location 62 00:04:42,410 --> 00:04:47,270 in this case we're going to return once again our entire state object and we need to do an update to 63 00:04:47,270 --> 00:04:52,540 our location array so remember the property name is locations. 64 00:04:52,640 --> 00:04:57,740 So we essentially just need to push a new entry inside there to do so we're going to use some kind of 65 00:04:57,740 --> 00:05:01,540 complicated syntax just ever so slightly complicated. 66 00:05:01,670 --> 00:05:08,070 So we're going to say take locations we want to take our new Array. 67 00:05:08,140 --> 00:05:10,510 So build up a new array from scratch inside of here. 68 00:05:10,510 --> 00:05:14,430 I want to have dot dot dot state DOT location. 69 00:05:14,440 --> 00:05:18,400 So take all the locations we already have and throw them into this new Array. 70 00:05:18,400 --> 00:05:25,050 And then on top add in the new action payload that we just got as well so that's how we modify an array 71 00:05:25,080 --> 00:05:30,150 or add a record to it without modifying the original array because remember we never want to mutate 72 00:05:30,360 --> 00:05:33,250 our original state object. 73 00:05:33,350 --> 00:05:38,720 So that looks good it's now the last thing we need to do inside if you're the last kind of record keeping 74 00:05:38,720 --> 00:05:44,090 around our location context we need to make sure that we also have some name piece of state whereas 75 00:05:44,120 --> 00:05:48,950 our simulator here we go need to make sure we also have a name piece of state and an action to change 76 00:05:48,950 --> 00:05:56,060 it over time as well so I got to add in one additional action function here I'll call it change name 77 00:05:59,580 --> 00:06:04,200 and anytime we call this I'm going to assume that we're going to pass in the updated name whenever a 78 00:06:04,200 --> 00:06:09,480 user has changed the name to I can receive that as an argument simply called name and then inside of 79 00:06:09,480 --> 00:06:17,610 here we will dispatch an action of type change name or throw the name on the payload property and then 80 00:06:17,640 --> 00:06:21,090 as usual we can add an additional case to our reducer. 81 00:06:21,090 --> 00:06:22,620 So we'll do a case of change name 82 00:06:25,380 --> 00:06:30,120 or returning object once again with state and we'll just update that name property 83 00:06:32,910 --> 00:06:36,940 and we should probably make sure that we've got a default name property on our default state object 84 00:06:36,940 --> 00:06:38,350 at the very bottom as well. 85 00:06:38,440 --> 00:06:44,080 So at the very bottom I'm going to make sure that my default state object has a name property of empty 86 00:06:44,080 --> 00:06:50,430 string and finally I'm gonna make sure they update or add in that change name action function to our 87 00:06:50,430 --> 00:06:51,830 actions object down here as well. 88 00:06:51,840 --> 00:06:56,160 So I'll put in change name like so OK. 89 00:06:56,190 --> 00:06:59,270 So we just added a ton of code to our location context. 90 00:06:59,310 --> 00:07:03,180 I know this has been a lot of typing but essentially all we've done is add in some additional functionality 91 00:07:03,180 --> 00:07:08,010 and implementation for some stuff inside of here that well we had to do at some point in time so we've 92 00:07:08,010 --> 00:07:10,840 now got the ability to start and stop recording. 93 00:07:10,920 --> 00:07:15,540 We've got the ability to change name and we've also got the ability to say that if we are recording 94 00:07:15,750 --> 00:07:20,350 we're going to record all the incoming locations inside the locations array. 95 00:07:20,490 --> 00:07:21,780 So this looks great. 96 00:07:21,780 --> 00:07:24,420 Don't forget we do have to do one last quick thing. 97 00:07:24,540 --> 00:07:29,100 We need to make sure that if recording or excuse me we need to make sure that any time we call add location 98 00:07:29,340 --> 00:07:33,100 we have to pass in whether or not we are currently recording as an argument. 99 00:07:33,180 --> 00:07:37,230 Let's take care of that inside of our track create screen very quickly which is where we are calling 100 00:07:37,250 --> 00:07:44,720 at location from it's back inside of track create screen here's where we call add location or at least 101 00:07:44,720 --> 00:07:48,210 pass it off to the use location hook. 102 00:07:48,250 --> 00:07:52,790 So going to once again turn this into an expanded function because now we need to pass it an additional 103 00:07:52,790 --> 00:07:54,270 argument. 104 00:07:54,410 --> 00:07:57,850 Remember this callback function will be called with our location. 105 00:07:57,850 --> 00:08:05,140 So inside of here I'll call add location I'll pass in the new location and then as a second argument 106 00:08:05,200 --> 00:08:08,530 we're also gonna throw in whether or not we are recording. 107 00:08:08,530 --> 00:08:13,360 So whether or not we are recording is inside of our state object that comes from location context. 108 00:08:13,380 --> 00:08:19,330 So I gonna pull in the state object and an inside of here I'll throw in state DOT recording and that's 109 00:08:19,330 --> 00:08:20,200 pretty much it. 110 00:08:21,680 --> 00:08:21,970 All right. 111 00:08:22,010 --> 00:08:23,180 This looks pretty good. 112 00:08:23,180 --> 00:08:27,020 So going to save this is gonna make sure that I don't have any errors from any typos or anything like 113 00:08:27,020 --> 00:08:27,600 that. 114 00:08:27,620 --> 00:08:29,020 Yep looks good over here. 115 00:08:29,120 --> 00:08:30,220 So let's take a quick pause. 116 00:08:30,230 --> 00:08:34,760 When I come back in the next video we're gonna start doing some additional work on our track form. 117 00:08:34,850 --> 00:08:39,560 Make sure that we can actually change the name effectively and start and stop recording so quick pause 118 00:08:39,590 --> 00:08:41,150 I'll see you in just a minute.