Back inside of our track text file we can now make use of our tracker API right here to make a request
to our API and create our track.
So going to find create track I'm going to delete the code inside of it.
I'm gonna make sure that I mark the inner function here as async because we're definitely going to want
to use some async await syntax.
All then say a weight tracker API and remember to create a new track.
We're going to make a post request to slash tracks then as a second argument we're gonna pass in in
an object or name of the track we're trying to create in the list of locations as well so I'll put in
name and locations inside of an object.
And that should pretty much be it so I'm gonna save this before I tested.
I want you to recall that we can take a look at all the data inside of our database by going to our
Mongo DB Atlas over here and finding are running cluster.
Once here we can inspect our cluster.
Remember you can click on that collections button right there and then we can take a list look at our
list of tracks.
So right now I have exactly one track inside of my database so I'm going to flip back over to my application.
I'm going to go to track create I'll answer in a name like went for a hike.
I'll then start recording I'll let it do one two three or four points or so I'll then stop and then
I should be able to hit save recording and that should make the request to our back and server.
So after I hit save recording I'll then go back over to mongo.
I'm going to click on that green find button right here to reassure our query to get a list of all the
different tracks we have.
And now I can see that I've got a second track inside of here with the name of went for Heike and if
I expand locations I'll see that I've got all of my recorded locations inside of here.
So I've got cords and there's exactly where it was for that portion or that particular point that we
recorded.
So it looks like everything is working out OK well this is definitely fantastic.
Before we move on there's probably a couple things we're going to want to do after we successfully save
a recording.
So first off after we save a recording we probably are going to want to make sure that media we like
navigate over to the track list screen or something like that where a user can then take a look at the
track they just created.
In addition after we save a recording we're probably going to want to reset the state of our form so
we might want to dump the entire list of points that are currently on the screen.
We probably are going to want to hide the text right there and essentially just revert this entire screen
back to how it looked when a user first started the application up.
So a couple of different things we need to do.
I think the first thing we should do is just make sure that we can reset this form right here.
After we successfully save our recording so to do so I'm going to go back to our use save tracked J.S.
file right here inside of you save track remember we've got the safe track function and that's right
there is where we actually make a request inside of create track so if we wanted to we can add a async
onto that function and then await the success of creating the track.
So then right after we successfully create that thing we can add in some code to do some cleanup on
our form like reset the name reset the list of locations and all that kind of good stuff.
Now remember our list of locations and the name and all that stuff is stored inside of our location
context.
So what we're really doing here when we are talking about resetting our form we are really talking about
modifying the state inside of location context.
And as usual anytime we want to modify our state we need an action function so let's open up our location
context file year location context I'm going to add in a new action function inside of here and I'll
call it simply reset.
So any time that I call reset I want to dispatch an action right away that's going to essentially reset
our state back to some kind of like initial state where maybe we empty out our list of locations and
reset the name property back to an empty string so inside of resets I'll make sure that I dispatch an
action type simply like reset.
I think that's a reasonable term I'll add in that new action function to my list of functions right
here.
So the very end I'll put in reset
and then finally inside of my reducer I'll add in a new case of resets.
So then instead of here I'll take my entire state object.
I'm going to update the name and kind of reset it back to being an empty string and then I'll reset
my list of locations as well to an empty array okay.
That should pretty much be it.
Now I can save this file.
I'll go back to you at use save track.
Here's the hook and from our location context right here.
I'll get that reset function we just created.
So now inside of safe track immediately after we successfully make a request we can call reset and that
should reset our form okay.
So let's make a quick test here once again.
I will add in some name like went for a bike ride.
I'll start recording let it get a couple of points here.
Just so I can see a line being drawn I'll then stop.
And now once I hit save recording and their request is made successfully I should see the text right
there be zeroed out and go back to an empty string.
In addition I should see that line right there disappear as well because remember we just emptied out
that list of locations.
So let's say recording.
And sure enough it all goes away and I'm back to my original status.
Well I'd say this looks pretty good.
Now there's probably one other quick thing that we might want to do here.
Remember after we save the form as we just mentioned we probably want to navigate over to our trackless
screen where a user can then see that track that they just created.
So to do so we can just add in right after that reset call call to our navigate function.
Remember we've got that navigate function from the navigation ref file that we created a little bit
ago so inside of you save track.
I'm going to add in an import at the top to get the navigate function from up one directory.
Navigation ref and then after we save our stuff after we reset the form will then navigate over to our
track list like so let's do a safe here.
And one last quick test.
So get a check create I can enter in a new thing here like car drive I'll start recording and I'll stop
I'll save and I get navigated over here where presumably we can now make a request to go and get our
list of all those different tracks that are saved on our API.
Well I'd say we've made some pretty good progress so quick pause right here.
When come back the next video we'll make sure that our track contacts has an implementation for fetch.
Tracks right here.
We'll get that list of tracks storm inside of our state and then we'll be able to show them as a list
on the screen.
So as usual quick pause and I'll see you in just a minute.