We're now ready to make an edit employee form that's going to look awfully similar to employ create 2
for them. 3
But the big difference is that this one will need to do something completely different when the user 4
clicks the button at the bottom. 5
And so that's where it gives us or creating a separate form is going to give us the ability to more 6
easily customize the the function of the button here at the bottom. 7
All right so let's get to it. 8
Microphone's directory. 9
I'm going to make a new file called employee edit. 10
Yes this is going to be where our form is going to sit for editing an existing employee. 11
We'll toss in our boiler plate. 12
I'm going to expect that we'll need the card card section and Button components in here and pull those 13
in common and then we'll make our class. 14
So employee at it extends component we'll do our render method I'm going to leave it empty for just 15
a second. 16
Let's do export default employee added at the bottom and now we'll do our render method. 17
So inside of here it's going look very similar to our existing employee create form. 18
Allow the top level of card will have a card section 19
that's going to have a button inside of it. 20
And then this button can say like save changes. 21
Just make sure that it's really clear that hey you are editing an existing employee you can click this 22
if you want to save any of the changes that you're making. 23
Now we need to also make sure that the employee form exists in here and we need to pass down any appropriate 24
values down into it. 25
So at the top of this file I will import my employee form 26
from an employee form. 27
I'm also going to need to make sure that I connect this thing to redux 28
like so and then the reason just barely clear the reason that we are doing the connector right here 29
is to make sure that we can call an action creator to this employee that we're trying to mess around 30
with a little bit. 31
So let's hook up connect at the bottom. 32
I don't have the actual creator put together just yet. 33
So I'm not going to pass anything into connect just a star. 34
I will put inside my employee form. 35
However there we go and I think you might have to do a typo. 36
Employee from employee form. 37
Thank goodness for E.S. lint huh. 38
That's a it's an annoying little one. 39
So now our employee for our employee it is excuse me is at a place where he can be displayed on the 40
screen. 41
So here's where things start to get more interesting. 42
We need to now customize this version of the form to work for editing and employee. 43
That means two things. 44
First we need to make sure that this form always gets navigated to with an employee in mind like the 45
one they were trying to operate on and load that employee's attributes into the form reducer. 46
So that's going to be the part where we initialize the valleys in our form. 47
Second we're going to need to add another action creator to specifically update an employee as opposed 48
to our existing one which just creates a new employee. 49
So let's take care of these two challenges in the next section