We've got our track form kind of scaffolding that right here.
So now we need to start thinking about what this form actually does.
Whenever user taps on this button we probably want to start recording.
What does it really mean to record though.
Well remember back inside of our context our location context to be precise.
We had that location's property inside of our state object right now location starts off by default
as an empty array.
So whenever a user TAPS ON RECORDING We're going to want to make sure that every time that we get a
location out of the Expo location library we're not only going to update our current location but we're
also going to add that location to the locations array so we need to make sure that whenever we start
recording or stop recording we either start adding half additional locations that come into add location
to that locations array right there.
So that's definitely some change we're gonna have to make to our IT location context file.
In addition we probably want to track the name of the track that the user is recording whenever they
type it in inside of this input.
We could track that piece of state inside of our track form but it might make a lot more sense to track
the name inside of location contexts.
The reason for that is that at some point time whenever a user hits like stop recording or save or something
like that on our form we're going to want to save a record to our back end API that includes the list
of locations that have been recorded and the name as well.
So it makes a lot of sense to kind of co-located both the list of locations and the name that the user
enters in the same location OK.
So all that essentially is saying we need to do some work on our location context file we need to add
in a piece of state called name we need to add in some implementation for start and stop recording and
we need to make sure that any time recording is true whenever we get a location we add it into that
locations are right.
So a couple different things going on here.
So to get started let's just begin easy.
We're going to first put in some implementation for start and stop recording.
So inside of START RECORDING I'm going to make sure that any time this thing gets called I will dispatch
an action of type start recording that's all we really have to do.
We don't need a payload because essentially we're just saying hey turn that recording flag from the
default of false over to true.
So inside of our reducer we can add in a case of start recording so we'll take our entire state object
as usual and we'll update the recording flag to true now we can do the same thing for stop recording.
So inside of my stop recording action function I will dispatch a type of stop recording and then inside
of my reducer case stop recording and I'll return.
Dot dot dot state and this time we want to set recording to false.
Like so.
So that's a good start.
So we've now got the ability to toggle our recording state.
It's now the next thing we want to do is make sure that any time that we add a location coming from
Expo location we're going to always want to update our current location by dispatching action of type
at current location but we're also going to want to take a look at what our recording flag is as well.
If recording is set to true well then we're going to want to maybe dispatch an additional action and
say okay let's make sure that we add in this new location to our locations array now in order to actually
read in that recording flag.
Unfortunately we cannot read read read in that piece of state inside of an action function.
So we need to check to see whether or not we are currently recording by adding it in as an additional
argument to our add location action function.
So in other words in addition to the location argument that we're going to receive here we're also going
to receive whether or not we are currently recording so we need to go back to our track rate screen
at some point time and make sure that inside of our callback we also pass in that recording flag.
But we'll take care of that in just a moment.
So then inside of here we'll say if we are recording let's also dispatch an action of type add location
and a payload of whatever that current location is so the first action that we're dispatching right
here is going to update our current location.
The second one is going to add our location to our locations array.
So that's what's going to eventually result in the array of locations that we're going to use to build
up our lines on our map so now we can add in a case for that new type as well.
So backup here all add in a case of ADD location
in this case we're going to return once again our entire state object and we need to do an update to
our location array so remember the property name is locations.
So we essentially just need to push a new entry inside there to do so we're going to use some kind of
complicated syntax just ever so slightly complicated.
So we're going to say take locations we want to take our new Array.
So build up a new array from scratch inside of here.
I want to have dot dot dot state DOT location.
So take all the locations we already have and throw them into this new Array.
And then on top add in the new action payload that we just got as well so that's how we modify an array
or add a record to it without modifying the original array because remember we never want to mutate
our original state object.
So that looks good it's now the last thing we need to do inside if you're the last kind of record keeping
around our location context we need to make sure that we also have some name piece of state whereas
our simulator here we go need to make sure we also have a name piece of state and an action to change
it over time as well so I got to add in one additional action function here I'll call it change name
and anytime we call this I'm going to assume that we're going to pass in the updated name whenever a
user has changed the name to I can receive that as an argument simply called name and then inside of
here we will dispatch an action of type change name or throw the name on the payload property and then
as usual we can add an additional case to our reducer.
So we'll do a case of change name
or returning object once again with state and we'll just update that name property
and we should probably make sure that we've got a default name property on our default state object
at the very bottom as well.
So at the very bottom I'm going to make sure that my default state object has a name property of empty
string and finally I'm gonna make sure they update or add in that change name action function to our
actions object down here as well.
So I'll put in change name like so OK.
So we just added a ton of code to our location context.
I know this has been a lot of typing but essentially all we've done is add in some additional functionality
and implementation for some stuff inside of here that well we had to do at some point in time so we've
now got the ability to start and stop recording.
We've got the ability to change name and we've also got the ability to say that if we are recording
we're going to record all the incoming locations inside the locations array.
So this looks great.
Don't forget we do have to do one last quick thing.
We need to make sure that if recording or excuse me we need to make sure that any time we call add location
we have to pass in whether or not we are currently recording as an argument.
Let's take care of that inside of our track create screen very quickly which is where we are calling
at location from it's back inside of track create screen here's where we call add location or at least
pass it off to the use location hook.
So going to once again turn this into an expanded function because now we need to pass it an additional
argument.
Remember this callback function will be called with our location.
So inside of here I'll call add location I'll pass in the new location and then as a second argument
we're also gonna throw in whether or not we are recording.
So whether or not we are recording is inside of our state object that comes from location context.
So I gonna pull in the state object and an inside of here I'll throw in state DOT recording and that's
pretty much it.
All right.
This looks pretty good.
So going to save this is gonna make sure that I don't have any errors from any typos or anything like
that.
Yep looks good over here.
So let's take a quick pause.
When I come back in the next video we're gonna start doing some additional work on our track form.
Make sure that we can actually change the name effectively and start and stop recording so quick pause
I'll see you in just a minute.