1
00:00:00,870 --> 00:00:02,990
We're in the middle of working on our form right now.

2
00:00:03,030 --> 00:00:06,060
We just finished up our employee form douceur.

3
00:00:06,360 --> 00:00:11,590
We have not yet wired up to our it to our combined reducers call so let's do that now before we forget.

4
00:00:11,680 --> 00:00:16,350
This is something I just forget to do all the time personally so on make sure I catch this one.

5
00:00:16,350 --> 00:00:19,370
So here's my reducers index file.

6
00:00:19,560 --> 00:00:21,740
I've got my combined reducers in here.

7
00:00:21,900 --> 00:00:28,800
Right now we've only got the author douceur So we are going to also import our employee form reduce

8
00:00:28,800 --> 00:00:36,650
her from employee form producer and we need to decide on what piece of state.

9
00:00:36,660 --> 00:00:39,590
You know what do we want to call this new piece of state.

10
00:00:39,630 --> 00:00:41,600
I think Dunscombe call it employee form.

11
00:00:41,780 --> 00:00:42,830
We've been nice and simple.

12
00:00:44,910 --> 00:00:50,560
So the employee form piece of state will be maintained by the employee form reducer.

13
00:00:51,210 --> 00:00:54,870
I'm not super happy you know I'm going on a bad spree of naming things here.

14
00:00:54,870 --> 00:01:00,000
I'm not super happy with the name employee former douceur because it really assumes that there's only

15
00:01:00,000 --> 00:01:03,760
ever going to be one employee form in our entire application.

16
00:01:04,020 --> 00:01:10,560
So I am not super happy about it but I think that given the scope of this application I think it's going

17
00:01:10,560 --> 00:01:11,720
to work out.

18
00:01:11,790 --> 00:01:18,540
In addition I think that it's a reasonable pick because the form and the reducer itself are very tightly

19
00:01:18,540 --> 00:01:19,070
coupled.

20
00:01:19,080 --> 00:01:25,680
So the name does really imply hey this is working along with a employee forum which is hosted an employee

21
00:01:25,680 --> 00:01:34,410
create now that our reducers hooked up we can flip back to our employee create form and start wiring

22
00:01:34,410 --> 00:01:36,330
up our action creators.

23
00:01:36,360 --> 00:01:40,020
So here is my employee create component at the top.

24
00:01:40,050 --> 00:01:41,010
We need to.

25
00:01:41,070 --> 00:01:46,830
Well let me first say we need to wire up an action creator here so whenever someone adds something or

26
00:01:46,830 --> 00:01:52,370
type something on input we can call our action creator and update our form of state.

27
00:01:52,390 --> 00:01:57,840
So remember how we get access to an action creator in a component we have to import the connect helper

28
00:01:58,110 --> 00:02:00,910
and import the action career that we want to call as well.

29
00:02:01,230 --> 00:02:13,450
So at the top will import connect from re-act redux and then we'll import employee update from actions.

30
00:02:16,510 --> 00:02:19,670
Then at the bottom we will add on our connect.

31
00:02:20,140 --> 00:02:22,240
So here's the bottom.

32
00:02:22,240 --> 00:02:26,890
We do not yet have a map set to prop's So for the first argument I'll pass Gnoll.

33
00:02:27,010 --> 00:02:33,580
And the second argument will pass in our employee update action creator and then don't forget that second

34
00:02:33,580 --> 00:02:37,880
set of Puranas to go around employee create as well.

35
00:02:38,080 --> 00:02:42,040
And you know I think I spoke too early we actually are going to have maps to prop's we have to make

36
00:02:42,040 --> 00:02:45,960
sure that we get those attributes that are being created by the Forum itself.

37
00:02:46,270 --> 00:02:53,120
So we will make a map state to perhaps function to pull stuff off of the employee form piece of state.

38
00:02:53,150 --> 00:03:00,510
So say can smash state to prop's Here's my state object.

39
00:03:01,000 --> 00:03:05,790
And then just as we did previously with our Auth. piece of state we'll do a little bit of destructuring

40
00:03:05,790 --> 00:03:10,680
ahead of time and just make sure his cousin here looks nice and clean.

41
00:03:10,680 --> 00:03:14,850
So I expect to have a name a phone and a shift.

42
00:03:14,880 --> 00:03:18,920
Now of course again we do not yet have the shift in here but we will very shortly.

43
00:03:18,920 --> 00:03:21,770
So we'll just carry the shift through right now.

44
00:03:22,290 --> 00:03:26,610
So I'll say this is coming from state DOT employee form.

45
00:03:26,840 --> 00:03:31,920
Remember I know I say this all the time but it's a very important piece of rebox.

46
00:03:31,920 --> 00:03:38,520
We have the employee forum piece of state right here because we assigned our employee form producer

47
00:03:38,790 --> 00:03:42,230
to the employee forum key in our recombined reducers call.

48
00:03:42,440 --> 00:03:46,250
And that is why it's called employee form.

49
00:03:46,260 --> 00:03:52,540
Finally we return the name the phone and the shift.

50
00:03:52,710 --> 00:03:55,610
I think there's probably just one more step.

51
00:03:55,740 --> 00:04:03,600
I think we'll just have to make sure that we pass these values or these name and phone onto the respective

52
00:04:03,600 --> 00:04:04,260
inputs.

53
00:04:04,350 --> 00:04:07,070
So let's do that right now.

54
00:04:07,230 --> 00:04:09,650
I'll make sure that my input knows that it is.

55
00:04:09,720 --> 00:04:16,900
Its value is going to come from this dot proper name and the phone's value is going to come from the

56
00:04:16,900 --> 00:04:22,010
stock prop's doc phone.

57
00:04:22,860 --> 00:04:26,170
One last thing I know there's a lot of typing here but you know I got it.

58
00:04:26,190 --> 00:04:31,470
I got to point out the fact that we in the past on the logon form you know we spent probably six or

59
00:04:31,470 --> 00:04:35,240
seven sections to go through what we're doing now into rather quickly.

60
00:04:35,240 --> 00:04:39,290
So we're definitely speeding up here pretty handily.

61
00:04:39,300 --> 00:04:45,090
The last thing we have to do is make sure that whenever an input's value is changed we call our employee

62
00:04:45,150 --> 00:04:46,490
update action creator.

63
00:04:46,520 --> 00:04:47,970
It's a lesson we have to do.

64
00:04:48,270 --> 00:04:56,040
So on both the name and the phone will add in on change text you know give myself some space here and

65
00:04:56,040 --> 00:05:02,130
I'm going to put the action or zoomy excuse me in the callback right here just in line on onchange text

66
00:05:02,130 --> 00:05:05,600
rather than making a separate helper function up here.

67
00:05:06,660 --> 00:05:12,570
So onchange text whenever this thing is called will be called with the new tax that's in that input

68
00:05:12,930 --> 00:05:17,370
we need to call this not props dot employee update.

69
00:05:17,790 --> 00:05:20,940
And remember the signature of this action creator.

70
00:05:20,970 --> 00:05:23,270
You know what does it expect to be called with.

71
00:05:23,460 --> 00:05:28,000
Let's go back over to our employee actions file.

72
00:05:28,000 --> 00:05:29,460
Here is employee update.

73
00:05:29,520 --> 00:05:34,590
They expects to be called within object with a proper key and a value key.

74
00:05:34,860 --> 00:05:38,130
So we need to make sure we follow that method signature.

75
00:05:38,130 --> 00:05:46,080
So whenever this thing gets called We want to make sure that it has a proper name and the value of text

76
00:05:46,230 --> 00:05:53,530
like so to this this part in here that's keeping track of the proper thing is what's going to allow

77
00:05:53,530 --> 00:06:01,720
us to use just one single action creator rather than having you know on name update on phone update

78
00:06:01,720 --> 00:06:02,850
on shift update.

79
00:06:02,950 --> 00:06:09,070
One actually creator for each attribute instead of we can just use a single one then we'll repeat the

80
00:06:09,430 --> 00:06:11,830
same process for the phone input as well.

81
00:06:12,280 --> 00:06:25,260
So say on change text take the text employee update that prompt we're changing this time it's me the

82
00:06:25,260 --> 00:06:31,920
phone and the value is going to be text as well because that's what we're going to call our callback

83
00:06:32,040 --> 00:06:38,220
function here with you mean text one thing keep in mind is that unless we are using destructuring from

84
00:06:38,220 --> 00:06:43,580
the arguments object remember destruction is where we put in the curly braces and the arguments list.

85
00:06:43,800 --> 00:06:46,950
If there's just a single argument here we can call this whatever we want.

86
00:06:46,950 --> 00:06:53,740
It doesn't have to be text it can be name in this case it can be phone here be anything we want.

87
00:06:53,760 --> 00:07:00,510
I'm just choosing to stick with text maybe a more reasonable approach would be if we made it value and

88
00:07:00,510 --> 00:07:06,270
then we can use a little bit of E-6 shorthand to condense the line down to just be value like so.

89
00:07:06,330 --> 00:07:13,320
Because if the name of the key and the value are the same we can condense it down to just a single word.

90
00:07:13,320 --> 00:07:15,110
So maybe that's a valuable factor.

91
00:07:15,360 --> 00:07:17,040
Let's go with that direction.

92
00:07:18,510 --> 00:07:21,140
And shorten up each line just a little bit.

93
00:07:21,960 --> 00:07:22,470
OK.

94
00:07:22,590 --> 00:07:23,580
I think this is good.

95
00:07:23,580 --> 00:07:29,820
I think that this is probably a great time to do a little bit of testing my Linter is complaining that

96
00:07:29,820 --> 00:07:33,910
I defined map state to Propst without ever adding it anywhere.

97
00:07:33,930 --> 00:07:35,480
So my mistake.

98
00:07:35,520 --> 00:07:38,760
We defined this but we never added to the connect function.

99
00:07:38,760 --> 00:07:47,460
I'm going to replace the null down here with map state to prop's like so right now ready for some testing.

100
00:07:48,820 --> 00:07:51,150
Or refreshed the simulator.

101
00:07:51,170 --> 00:07:57,380
I want to remind you when we log in here that due to that oddity with how Facebook or excuse me firebase

102
00:07:57,380 --> 00:08:03,890
handles errors if there is any error in your code during the signing process it's going to be caught

103
00:08:03,980 --> 00:08:10,170
during that firebase promise remember and you will see that error pop up in the console right here.

104
00:08:10,430 --> 00:08:15,380
But it might manifest itself by saying authentication error making you think that you typed in the wrong

105
00:08:15,380 --> 00:08:16,140
password.

106
00:08:16,250 --> 00:08:19,150
But in reality it is the promise swallowing the air.

107
00:08:19,160 --> 00:08:25,920
So don't forget that if you get an error right now or if it says authentication failed or something.

108
00:08:26,090 --> 00:08:29,890
Hopefully mine works ok cool so I've got my employee list.

109
00:08:30,020 --> 00:08:34,280
I'm going to attempt to add an employee when I want to be Jane.

110
00:08:34,490 --> 00:08:41,470
5 5 5 5 5 whatever and then if I want to we can click create and add the record in here as well.

111
00:08:41,690 --> 00:08:44,000
Of course we don't have anything hooked up to the button just yet.

112
00:08:44,060 --> 00:08:48,090
So let's continue in the next section and finish working on our form.