In the last section we did a little bit of testing of our form only to find out that if we did not touch
the picker at all the shift would come up as undefined.
So why would that be why.
Why is shift coming up is undefined but appears.
Everything else on here is working correctly.
Remember the state of our form is being held by our employee form reducer.
By default the employee form inducer does not have a starting or initial value for any element in the
form.
Why has an empty string.
But you know essentially doesn't really have anything to picture itself visually defaults to being Monday.
Right.
So like when we logged in and looked at that form that picture appears to be on Monday by default but
that is just the visual behavior of that picture.
It's not actually selecting Monday for us it's just defaulting to that value.
So even though it looks like oh yeah we've got Monday selected here.
I have a shift a Monday.
We are never actually making any change or calling any actually creator inside our application to update
the shift value inside of her or induce her to be Monday.
So that's essentially what's happening here.
We think that the value is being set but we never actually update the reducer to say hey it should be
Monday.
Now of course if I changed the reduce or excuse me if I change the picture right here that will initiate
a change that will call an action crater right because we said all that stuff up and then shift will
be set to you know Tuesday Wednesday Thursday whatever it might be.
But if a user opens up the form does not touch the shift does not touch the picker at all.
It's going to stay as just empty string.
But by the way just to be really clear I probably made a little bit of a stated the WRONG WRONG thing
I said in the last section that shift was coming up is undefined.
In fact it was really empty string that was probably a little bit of a verbal typo on my my side.
So it would be more correct to say shift is empty string and not undefined when we log it anyways.
There's definitely more than one way to solve this problem right here.
Definitely more than one way WAY.
So I throw out a couple of different ways in here.
I don't personally feel very strongly about any one solution so I'm going to suggest a solution but
if there's one that sounds better to you then absolutely go for it.
All of these these solutions are going to outline I think are all reasonable solutions.
So the first solution that might do is inside the reducer.
I had this initial state object right here.
I could instead of defaulting shift to empty string I could defaulted to Monday.
So that means that when this form is first rendered I will have a shift of Monday set.
If the user does not touch the picker then no problem.
We've got a shift a Monday in there by default.
Everything's good to go.
The one downside to this approach right here I'm going to mention is that it really does.
However it really tightly couples the options in the picker like the days of the week to this reducer
right here.
So if you for some reason end up changing the picker options to add like hours of the day instead of
actual days well then you have to update that in both the picker file and the actual form and the reducer
here.
So a very small con but I am going to mention that as being a con so I'm I'm not going to go with that
path.
So I'm going to leave shift as empty string right here.
The second option that we could do is to add a component will mount inside of our employee create form
and as soon as this component is mounted to the dorm or out the door but mounted on a device as soon
as it is rendered we can call the action creator manually and say hey let's make sure that we default
the value of shift to to be Monday or whatever we might want to default to be.
So that's definitely another valuable option if you want to go that path as well.
The final option and I think what we're going to do in here because it involves the probably the least
amount of code besides the reducers solution is when we call the action creator employee create right
here we can default the value of shift so we can just say if a shift is not set then by default use
Monday.
I think that's reasonably clear.
It makes sure that when we call the action crater itself there is an actual value in there.
Of course the other option could be in the crater itself.
We could include a shift.
You know that's also an option we could default the value of shift.
Again there's a lot of different approaches here.
I'm just going to arbitrarily pick this one.
So I get to say when we call employee creates if a shift is not provided then we use Monday like so.
So for the shift key use either the shift that has been set by the form or if one is not set defaulted
to Monday.
Now the one thing that we got to be really aware of here we're exploiting a little bit of a workaround
you might say in javascript's.
We are counting on the fact that our reduce our producers shift as a empty string by default which is
a false value in Javascript.
So if I say you know over here let's do a quick example.
If I say empty string or Monday the return result will be Monday so early exploiting a little loophole
in javascript right here.
It is not the clearest thing in the world so it's a little bit of a rough spot.
We might come up with a better solution here.
OK long lecture there.
No real long lecture but I think you get the idea now.
By default our pickers should always have a value set to it.
So the next thing we have to do is make sure that whenever our employee create action crater's called
we actually see this thing off to firebase.
I have to say to sing off to firebase Let's take a quick break come back in the next section and do
that actual save process.