Our employee edit form is really coming along whenever a user clicks on the Save Changes button.
We're going to run on button press and we have now verified that when we cancel log name phone and shift
we get the updated values out of that form inducer.
So all we have do now is replace this console log with an action creator that will actually save our
new data after firebase.
So let's do that now.
We'll start off by writing the action creator all imported into this file we'll call it from on button
press and then we'll test it all out inside the simulator.
So Step 1 is going to be to open up my employee actions file.
Now we've covered previously on how to create new records and firebase believer or not saving or I should
say updating records is really just as simple.
So we're going to form up a ref to the database and then instead of calling this push method right here
which usually creates a new record we'll use what's called the set property and what it does is it updates
information.
So set is for updating.
So see how that works in practice.
At the bottom of my file I'm going to create a new action creator Randy Khalis.
Employees say I don't expect employees it to be called with a name or phone.
A shift and an ID.
So that last last property of their idea this is the real key right here.
Remember that in the case of saving or really you know updating an employee we are updating an existing
record.
So we have to be very explicit until firebase that we are attempting to you know like a this record
over here the one with this idea this is the one that we are trying to update.
So whenever we call this action creator we need to make sure that we specify the employee that we are
trying to save.
Or I should say update if I flip over to my firebase console just to be 100 percent clear you'll see
that I have on users the first idea that's in here is my user ID that user has an employee's collection.
And this is that you I.D. the idea of that very particular employee right here.
So that's where that is coming from.
All right.
So as far as creating the ref to the database it's going to look very similar to the others.
We're first going to need to get access to the current user
like so I am pretty darn sure that this is going to be an asynchronous action creator again.
So again I'm going to return a function because I know that I do.
I'm not going to have anything to return right away from this from this action creator right.
I don't know anything just yet.
Then inside of here we'll form up our raft to our database.
So firebase start database.
RATH we're going to place our ticks.
So we'll do slash.
Users will designate the current users I.D. employees.
And now here's the interesting part.
We need to specify the exact record that we are trying to update.
So usually before we were just saying like hey yeah go find that employees bucket and you know actually
appear as a better example go find that employees bucket and push on the new record in their right just
through a new record on top this time around.
We are trying to update a very specific record.
So in the ref we are pointing to a very specific record.
I am pointing to the one with this very particular I.D. and once it's found I want to set some new number
of properties on it.
So we're going to set on there the name the phone in the shift.
Finally right now I want to just do a count of log of saved.
So after everything is done all the accounts log of saved and we'll call it get checks are in reality
we're going to want to navigate back to the employee list screen.
I think that would be a good idea.
But right now we'll just kick to use or just a season we'll just do a console log.
All right I think we're ready to do a up.
Almost forgot one last thing we need to make sure that we actually call this action creator from somewhere.
So I'm going to import it over into employee at it.
So I'm going to flip over to employ it at the top.
I've already got an import statement from my employee update action creator of Poland employees save
as well.
And then I'll hook it up to my component down inside the connector paper.
I'll do a new line just to make things look nice.
Here's employee save.
And then finally inside of the button the button handler that is I can call this stop prop's dot employee
save.
And of course I need to pass and the modified name phone shift.
And don't forget.
Here's the really important one.
The ID of the record that we are trying to update.
So as you I.D. to pass and stopped Propst employee you I.D..
So this last little bit here and that that's the nasty part.
Where did this employee come from.
Remember when ever we come to employee at it the only way you can navigate this thing is by clicking
or tapping pressing on an employee.
And when you do that we have our event handler inside of our list item and the list item transitions
us over to employee had it passing in that employee as a prop.
So that is where this does start.
Props don't employ you ideas coming from it is because whenever we come to this view we are specifying
the very particular employee that we are trying to work on.
All right.
I think we are ready for a test here.
It's going to save this all do a refresh.
I will log in
and here's.
I deleted all my other employees.
I want to have just one in here so that I can see the actual record that is going to get updated.
So here's Jane all by her lonesome on tap and again all of Jane's attributes are pre-filled in the form.
So Jane five five Monday is actually what I expect.
Let's update her phone number.
So she's got a new phone number and I expect her you know let's be really mean let's really to make
scene work on Saturday to read from Jane.
It's now going to click on see if changes are going to expect that this is going to make her request
off to firebase update this record.
And I should see a council log that just says something like Hey safety record looks good.
So I click save changes we get the yellow flash over here which means some data has been updated.
You'll see it.
Now I've got the phone number of 4 4 4 4 4 and my shift is now on Saturday.
Perfect.
Let's see I want to do is verify that we got the concert log.
Yup.
Here it is.
It says saved exactly what I expected.
So it's perfect.
We're working really well right now.
I think the last thing that we need to do is make sure that we navigate the user back over to the employee
list.
Normally I would say let's do it in the next section.
But in this case well you know it lets us handle this event along section.
Let's take care of the next section.
So scene a second we're going to navigate our users back over to the employee list after they successfully
save the changes.