In the last section we had a long discussion about the differences between forms and they create versus
edit mode.
I'm going to pick a direction to move forward in if you feel like you know I want to really try to reuse
the entire form like the entire thing I want to make one component that's responsible for both editing
and show and creation.
That's fine if you want to make two completely separate components as totally fine but go into a kind
of I can call it a hybrid approach or going to call like the middle ground.
I want to point out that the really reusable portion in both of these create and edit forms is the set
of fields in the middle right.
That's like the real reusable portion here.
So what I'm going to suggest is that we're going to create two separate components one is going to be
called employee create and we've already got one called that.
And then we're going to have another one called employee and it will then make a third component called
employee form.
The purpose of employee form is to just tackle these three fields right here.
So these three fields are 100 percent common between the two different forms.
So I can pull them all into a separate component.
I can reuse that amount of code but for all the stuff about deciding about hey what should happen when
the user clicks the button at the bottom.
We can make a separate employee create component to figure that out.
And when deciding what to do when a user clicks on delete we're going to make a separate employee edit
component to figure that out as well.
So that's that's the plan going forward.
We're going to introduce a new employee edit component and a new employee form component as well.
So we certainly have quite a good amount of refactoring to do here.
So let's get started on it inside of my components directory.
I'm going to get started by creating a new file called employee form and then the sole purpose of this
company right here is to show those different fields to the user fields to edit the name the shift and
the phone number.
So we'll make a class employee form
at our render method.
I'm not going to add anything in here just yet at the bottom we will export default employee form.
So again the only purpose of this thing is to make sure that it's the only purpose of this is to make
sure that we show the different fields that the user should see.
So I'm going to flip back over to the employee create and I think that we can actually get away with
just copy pasting out a bunch of stuff in here.
So I'm going to take the first card section the second card section and the third card section and all
the picker's stuff.
So I get to select all this stuff all three card sections.
I'm going to cut it out and I'm going to move it all over to the employee form.
So in here I will return and I need to have a view at the top level because I cannot every render method
I make has to return just one top level element.
And these three card sections are all siblings.
OK so now we've got our employee form and it contains three different card sections in here.
Of course we're going to need to fill in a couple of imports at the top so I'll do that right now.
I will import view from Riak native.
I think we're also going to need the text for the label and picker as well.
So viewed Texan picker and then we will import the card section and the input from common.
And I think that should probably get up to one last area here we need to make sure we bring over the
stiles object as well.
So we've got text styles right here.
And if flip back over to employee create in a grab my style's object it's not being used inside this
file so I'm going to take the entire thing is I going to cut it and I come back over to employee form
and paste it at the bottom.
OK.
So now I don't think of any errors left in here I think I'm good to go.
The next thing we have to do inside of this employee form right here is make sure that it has access
to the employee update action creator.
Remember that is the action creator that actually does something whenever a user types some value in
here.
So I wanted to take my employee update action creator and add it to this component.
You know how to handle that.
We will import that connect helper at the top
from reactor's ducks and then we'll also import our action creator of employee update from actions.
Then we can flip down to the bottom and we'll toss in our connect helper.
I don't think we're going to need a map state to props here.
So I'm going to leave it as no health costs an employee update.
OK.
So the API so to speak about this thing you know what I take that back.
We do need a we do need a map state to proxy because we do have to poll in the name the phone and the
shift of the user as well.
So we do need that map stage props so all down or real will define outstate props
we take our state object this thing is going to show airs going to require some number of attributes
off of the employee form reducer.
So we're going to reach out to the
state DOT employee form property and we're going to pull off the name the phone in the shift then from
this function we'll return name phone and shift Lastly and replace null with map state two prompts.
So now I'm sure this refractors probably doesn't seem like the clearest thing in the world.
Right.
That seemed like the clearest thing but I do want to point out I want to convince you it's not as bad
as it might seem.
Our employee form as it stands right here is exactly identical to how it was inside of employee create.
We're still showing three card sections.
We show the value coming from this dot stock name which is sourced from our employee former douceur.
And then whenever a user changes the value of some input we call employee update action creator with
the prop of the property was changed and the new value as well.
So all we've done at this point is extracted these three fields into a separate component and now the
last thing that we need to do is make sure that the employee create form shows that set of fields.
So inside of employee create We're going to do it just a little bit of cleanup at the top.
We don't need the picker or the techs anymore.
We don't need the inputs anymore.
We do need our employee form from employee form and we're going to show this inside of this component.
So when the render method right above the last card section will show employee form.
Like so the last thing that I'm doing here is to make sure that any props that are given to this employee
create form or this employee create component get passed on to employee form as well and we'll we'll
see why in just a moment.
So to make sure that we pass along any props that are provided to this employee forum I'm going to say
Dot dot dot this stuff props and what this says is take all of the different props that employ create
has been passed and forward them on to employee form as well.
Again we'll come back to this little topic right here in a moment.
OK let's do a quick test.
I'm going to do my refresh.
We will log in
and then I click on Add and lo and behold we still have the same forms on the screen and the same field
so I can add in Jane 5 5 5.
I listed a different name let's say.
Amanda that will create and everything still works the same.
So here's Amanda right here.
The only difference we made at this point is that we extracted out all those fields into a separate
component.
Do you notice at this point that you know it employed create is now really small.
There's not a lot of stuff that's going on here just yet.
So it is pretty nice in that regard.
Let's now continue onto the next section and see where we're going to get the real benefit here by creating
our employee added form