All right in this video we're going to do some work inside of our track form.
So instead of track form we now need to wire up a couple of those different action functions so we just
put together.
In particular we need to make sure that we call start recording.
Anytime time we tap on that button we also need to make sure that we call change name.
Anytime user changes the name.
So essentially we're just adding in some code to track form to call those action functions that we just
implemented in last video.
The first we have to do inside of here is get access to those functions.
So we need to make sure we get our use context hook from react.
We need to make sure that we get our context as location context from our context file as well so we'll
get that from up one directory context location context gates.
Now inside of here we're going to pull off start recording stop recording and change name from use context
location context we'll probably eventually need to get access to state inside of here as well.
But right now let's just wire up some of these easy things.
So first off we probably want to make sure that our text input right here anytime a user changes that
text we should call changed name.
Remember this is how we turn it into a controlled input so I'm going to add on a on change text callback
on change text and say anytime someone changes this text call our action function of change name to
truly turn this into a controlled input.
Remember we need to specify the value prop on the input as well.
So I guess we do need that state property.
Let's pull it off right now.
So a lot in state right there.
Now we probably are going to end up needing a couple of different state values inside of here.
So we could just reference like state DOT name and state DOT recording all that kind of stuff or we
could d structure further into our state object which I think would probably be ideal.
So going to first begin by giving myself just a little bit of space here by new learning these properties
that we're pulling off and then off the state object I'll say inside of there I want to get access to
name.
And chances are we will also need recording inside of here as well to decide what text we should show
on that button.
It's now on our input.
We can add in a value prop of name and now on the button we can add in an on press and say anytime someone
presses that button right there like that one in particular let's start recording.
So I will do start recording like so we also wanna make sure that this button kind of changes its title
and the on press callback anytime that recording is true.
So if we already are recording we want to show a different button so we can easily express that by writing
in a little ternary expression.
Once again it's all put in a set of red quotes.
I'll say if we are recording so recording then a question mark if we are recording then I probably want
to show a new button element so I'll put it a button and I'll give this one a title of stop recording
and then on press of stop recording and then if we are not recording so I'll put in the LC case inside
of your soul.
Put in the colon like so if we are not recording I want to use that but an element right there.
Though the one that says start recording and that should probably do it all right.
So if we are recording or something if we are yes if we are recording we want to stop.
Otherwise if false then we want to start all right.
So this looks pretty good.
Let's see this and see how we're doing.
So go back to track create I should be able to enter a name.
Yep looks good.
And I should be able to tap on start recording and when I do you'll notice the changes into stop recording.
Look at that.
Definitely looks good.
Now one thing I can tell you right away is that it's really hard to see when that checks change from
start to stop.
So we might want to change the text on the button element right here on specifically these stop recording
one and just have it say like Stop instead because that's gonna make the change a little bit more evident
to the user and just make it more obvious that hey you are like now in a recording state.
Yeah there we go that's a little bit better.
We'll get more obvious what's going on.
So I can stop.
And very good OK.
So this definitely looks great but we need to make sure that we're actually saving the correct data.
We're updating the correct data inside of our location context.
The last thing I want to do very quickly inside of here at the very top of track form I'm going to pull
off the locations property off of state as well.
Remember anytime we are recording a list of all of our different locations should be getting accumulated
inside of that locations array so inside of here I'm gonna do a console log of locations dot length
like so I'm not going to look at the actual objects inside there because remember every location is
a rather large object.
Instead I'm just going to say hey are we adding in some additional number of locations.
That's all I really want to check.
So I going to save this I'm going to go over to create a track I'm going to go and check my journal
really quickly and make sure those we start off with zero.
And yes we definitely do notice how we're seeing kind of the scrolling zero right here.
That's because remember we are updating our current location piece of state over and over again because
we are updating the current location piece of state that causes all of our different components to re
render and that includes track form.
Now to make sure that we actually can track or add in some additional locations I'll hit start recording
if I now flip back over oh well it says zero right here which means something is not quite recording
correctly so it looks like we've got a little bit of troubleshooting to do.
So let's take a quick pause right here and continue in the next video.