I think the very last thing we have to do on this create track screen is make sure that after a user
has entered a name started recording and stopped recording.
We probably want to make sure that we show another button on here that will allow a user to save the
recording that they have created.
So to do so let's open up our track form once again inside of our components directory and inside of
here.
We're going to try to show an additional button that will eventually allow a user to save this recorded
list of locations to our Express API.
All right.
So inside of here we probably only want to show that button to save the list of locations if we are
no longer recording and we have some number of locations.
So in other words if recording is false and locations has some number of objects inside of it let's
show an additional button.
By the way while I'm inside of track form I'm going to clean up that console log.
We had around locations dot length really quickly all right.
So then I'll scroll on down and right after our existing button I'll add in another ternary expression.
So instead of here I'll say if we are not recording and if we have some number of locations
then I want to show a button element notice that I've got the question mark in there for my ternary
expression right now I'll give this button a title of save recording and then otherwise indicated by
my colon I won't show anything at all indicated by null case we can then save this and test it out really
quickly.
Now I should be able to start recording.
Let it get one or two points and then stop.
And as soon as I do so I now see that extra button.
At present those two buttons are kind of shameless smushed up against each other so to speak.
So let's add a spacer component around both of our different buttons right here just to make sure that
they've got a little bit of spacing around them.
It's all wrapped.
My first button with a spacer and I'll wrap my second button with a spacer as well
so if I now test this once again I can start let it get one or two points stop and there's that save
button.
Okay.
So that definitely looks good.
So now we need to think about what happens whenever a user taps that button.
Chances are we're going to want to take our list of locations and make a list or someone make a request
to our back end API and essentially create a new track that's kind of opens up an interesting idea like
how are we going to actually save our list of tracks to the back end API.
In addition how are we going to eventually fetch all those and show them on the track list.
Screen will as usual any time that we're talking about working with some kind of data we are always
talking about making use of context.
We already have a single context inside of our project called location context that's all about storing
user data.
So one way we could handle this is to essentially add in some more action functions to location context
to create a new track on our backend API and then fetch a list of all the tracks that we have.
However we're going to take a slightly different approach adding additional functionality to location
contexts absolutely could work.
Hundred percent.
No doubt about it.
But in the context of this course I want to make sure that you have a really good example of how to
get different context objects to kind of work with each other so rather than just adding some more functionality
into location context we're going to instead create a another context a third one inside of our application.
We're going to call this track context and this new thing is going to be all about saving tracks that
we ever recorded and fetching them from our back end API.
Again we could add that functionality into location context but I really want you to have an example
of having these two different things having to work with each other.
Now when I say work with each other what I mean to say is that our location context has that locations
property and it also has the name property.
Whenever we make a request to our back end API to create a new track we need to take that name and the
list of locations and send them off any post request.
So we want to somehow take those two properties and transfer them in some fashion over to our track
context and make sure it has the ability to take that information make a post request get a track back
and then store it and say OK here's the track that was just created so to get started.
Let's first start to scaffold out a track context a back inside of my project directory I'm going to
find the context directory and find me create a new file inside they're called Track context dot J.S.
inside of here we are going to import create data context remember that is our helper function from
a create data context I'll then make my reducer which I will call track reducer as usual this thing
is going to take in some state and action we'll do a switch over the actions type.
And right now we'll just have a default case where we return our state's let's start to think about
the different action functions that we might want to have related to our track reducer.
I can definitely think of two off the top of my head.
We probably want to have the ability to fetch all the tracks that are tied to some user so going to
put in fetch tracks here.
I'll use the shortened syntax and I'm going to put in kind of a placeholder function for right now like
so and then I think that we should also have a second one called Create track.
And this is as you might guess it's going to take in a name and list of locations and send them off
to our back end API so I'll do create track.
This will also have our dispatch in once again.
I'll just throw in a can a stub of a function right here.
All right now that we've got those to put together let's do an export const provider in context and
that's going to come from calling create data context.
And as usual our first argument will be our reducer.
The second argument will be an object with our different action functions so fetch tracks and create
track.
And then finally our third argument is going to be our initial state.
So for our initial states well we're gonna have a kind of list of different tracks here that we want
to eventually display on the screen.
So I think that our default state object should just be a simple array that will eventually have a list
of all the different tracks that we have created and tied to this particular user gets us.
Looks good to get started with last and we need to do is make sure that we wire this thing up to our
app dot J.S. file.
So I going to go back over to abduct J.S. at the very top.
I'm gonna make sure that I import provider as track provider from source context track context and we
can use that track provider down inside of our component right here.
Now once again doesn't really matter what order we provide these in we can put them in in any order
we wish.
So this time around.
All throw it as the most outer element so I'll put in track pro Vidar and just make sure I close it
off.
On the other side.
So let's save this.
I'm gonna make sure that I don't get any error messages or anything like that.
Yeah still looks good.
All right.
So now that we've got this additional provider in here let's now take a quick pause.
When come back the next video we're gonna figure out how we can somehow get the track context and the
location context to kind of work together exchange information and eventually make our request to the
back end API.
So I'll see you in just a minute.