We've got our employee edit form put together but it's not actually being used anywhere just yet.
Remember whenever a user taps on an individual list item.
So here's my list item component.
We are still going to the employee create route.
So we need to make sure that it changes over to the employee at it.
So we're going to first add a new scene to represent employee audit at it and then we will have access
to the actions dot employee added route as well.
So since we know that we're going to add the scene in I'm going to just go out and change this one side
of list item right now.
So I will go to employee at it whenever a user taps on an individual row.
Now inside of my router router J us here it is right here at the top.
We will first import employee at it.
So I will import employee at it from components employee at it and then we can create a new scene with
this.
So I still want the scene to be in the same light kind of bucket as the other employee routes in here.
So inside of the main scene we will add on a scene for employee at it and it's going to show the employee
edit component.
Lastly we'll give it a title on here because this is not only showing but also editing an employer and
employee.
You can really make a lot of different arguments for what this title should be.
I think that an employee makes a lot of sense.
Remember this title property right here is what's going to be shown on the nav bar at the top of the
screen.
All right this looks good.
I'm pretty confident this is going to work.
You know we could do a quick test if you want to pause a video and do a quick test.
Go for it.
Otherwise we're going to keep steaming ahead a little bit.
So now you can navigate to this employee at its screen but we still haven't resolved that very root
issue inside of this form right now.
Whenever you navigate to this form we want to bootstrap work pre-load the reducer with the employee
that is being passed to the form.
And remember an employee has been passed to it as a prop because when we change the route we are explicitly
passing in the employee that we're trying to modify.
So inside employee at this stop Prasada employee is the employee that we're trying to modify.
So we're going to use a little bit of a trick to load up our producer with this employee.
Here's what we're going to do at the top.
I'm going to import employee update from actions remember employee update is the action creator that
will modify our employee form reduce her.
This is what changes the state of that reducer.
Then I'll scroll down we're going to add this as an action creator to the next method down here.
So I don't have a map state to prop's just yet.
I'll put in a no and employee update.
So now we've got access to that action Creator within this component.
And here comes the fun part.
I'm going to make a component will.
Now it's going to say at any time that this component is about to be loaded onto the screen so any time
is about to be shown.
I want to look at this stuff Propst that employee and every single property that it has.
I want to forward on to employee update.
So I'm going to take all the properties out of my employee and stuff it into the reducer to do so we're
going to be using load ash as well.
So at the top you'll import load ash from load ASH.
You know if you're wondering why we're going to pollute ASH.
Well we're going to iterate over all the properties of the employee.
So for each prop in this Start prop's employee and remember this is an object right here with the key
value pairs of ID name phone and shift.
So now for each key value pair we can take the value and key which I can refer to as Propp in here and
we will call our action creator with these.
So this doc Propst dot employee update and I'll pass in an object with profit and value.
So the end result here what this is doing I know this is a nasty little chunk of code right here.
This says that we understand that there is an employee model coming into this component.
We're going to iterate over every property on that object and update our reducer with every property.
So this is taking all those attributes off the employee and stuffing them as pre-filled values inside
of our form reducer.
This is a little bit of a hackish way to do this.
The other route that I might make or the other approach might be to create a new action creator to accept
an entire employee model and then update all the values in the reducer.
And just like in one go.
So it would definitely be another approach that we might take as well.
The OSCON do is Elly's start to hook up our button at least enough that we can start to test our application.
So the button I'm going to give it a handler of on Prus we will run on button press and I'll bind this
to it.
And then inside it of all button press I want to be able to cancel log the name the phone and the shift
from the props and accounts log name phone and shift.
Now this last bit right here this is probably if you were following me before this is probably where
I really threw you off by logging name phone and shift.
This is intended to be the name phone and shift out of our former douceur.
We have not yet pulled those properties into this component yet so we're going to define a map state
props at the bottom.
We'll take our state Hoopes and from our form reduce her we're going to take our name phone and shift
from the employee form piece of state and then we will return.
Name Phone shift.
And lastly and I've been forgetting to do this so often we need to plug in the map state to prop's like
so.
OK.
So if this.
I would imagine that this section seemed a little bit a little bit vague a little bit obtuse.
Let's continue I want to test this in just a second by just want to take a moment to say that yeah this
this is a little bit of nasty coding here.
This is some of the challenges that arise whenever we decide to have to deal with both to create an
edit form separately.
So it's a little bit nasty but we will do a nice big review to make sure that's really clear where all
these different props are coming from and where they're flowing to.
So let's do your one quick test inside of the simulator just to make sure we're going down the right
path here.
And it looks like I've got a typo somewhere in here.
It's inside of employ.
I probably just made it.
Yup looks like I got a little in there somehow my mistake so I'll save
bring the simulator back up.
I will log in.
Let's get that password.
Now I should be able to click on any employee in this row right here in this list and see the correct
values in the list.
So yup here is Amanda.
Amanda has a phone a five five five and a shift day of Tuesday.
I should be able to go back see Jane instead.
I should be able to see Nick.
So Thursday 5 5 5.
And now here's the really important part.
If I change any value.
So let's say that Nick is now going to have a phone number of 5 5 5 2 2 2 and then click on Save changes.
You'll see that I get the console log of all the attributes from my form reducer.
So here is the new update as values.
So it is very clear here is that we are correctly kind of pulling the values out of that employee that
we're trying to load the form up with.
They are getting saved onto the reduce or we know that that's occurring because we see the correct properties
in the form itself.
Then whenever I change the properties we are updating them in the form reducer.
I click the button and we see them cancel lot why I want to make sure is really clear here is that we
are not touching the underlying employee model that came from firebase.
You know the one that is being maintained by the employees reducer and what is so critical about that.
The reason it's so important.
You just saw that I'd change the phone number here right.
I changed it to two to two.
Now if I go back and I go back into Nick Nick is back at 5:55 as he was before because I did not save
the record.
Nothing got persisted to firebase.
So very important item to note in here.
All right let's continue on to the next section.
I think that our next step is going to be to create an action creator to save the changes that we are
making to these employees.
So let's tackle that in the next section