1
00:00:00,740 --> 00:00:03,380
We're starting to really pick up some speed on our application.

2
00:00:03,380 --> 00:00:05,760
I like it let's keep rolling through.

3
00:00:05,780 --> 00:00:10,580
We now have the ability to navigate over the two this simply form which means we can finally start focusing

4
00:00:10,970 --> 00:00:16,920
on having some real functionality to our app by giving users the ability to create employees.

5
00:00:16,930 --> 00:00:17,500
All right.

6
00:00:17,510 --> 00:00:21,890
So before we start work on the farm itself I want make sure that we're on the same page as to what this

7
00:00:21,890 --> 00:00:22,990
forum needs to do.

8
00:00:22,990 --> 00:00:24,340
Exactly.

9
00:00:24,380 --> 00:00:30,320
So when employees created where they're going to have three properties assigned to them a name a phone

10
00:00:30,320 --> 00:00:32,890
number and a shift time or shift days.

11
00:00:32,900 --> 00:00:37,760
Really what is the shift they will be the day of the week that they are scheduled to work.

12
00:00:38,170 --> 00:00:45,620
So for the phone number and the name the first two entries here we can definitely reuse the input component

13
00:00:45,620 --> 00:00:49,110
that we've already created previously the reusable component.

14
00:00:49,280 --> 00:00:54,050
On the other hand for the shift where they have to pick a day of the week we're probably going to want

15
00:00:54,050 --> 00:00:58,250
to make sure that we display the choices for them and they should only be able to use or should only

16
00:00:58,250 --> 00:01:01,650
be able to pick from one of these existing options on here.

17
00:01:01,670 --> 00:01:07,820
So Monday Tuesday Wednesday you get the idea after the user enters all this stuff we should validate

18
00:01:07,820 --> 00:01:09,590
their inputs in some fashion.

19
00:01:09,590 --> 00:01:15,440
So you make sure they actually entered a value for each one of these and then it's Add a button on to

20
00:01:15,440 --> 00:01:16,670
submit it all.

21
00:01:17,330 --> 00:01:19,940
Now we did something really similar with a log in form.

22
00:01:19,940 --> 00:01:25,520
So we're going to make sure you know of course that we're absolutely concrete and understanding on how

23
00:01:25,520 --> 00:01:26,660
to put a form together.

24
00:01:26,660 --> 00:01:32,280
So this is going to be another exercise in form generation and form validation.

25
00:01:32,600 --> 00:01:35,380
We'll make sure that the component or we'll make the components.

26
00:01:35,510 --> 00:01:40,370
We're going to wire them up to some action creators make a reduce or to hold all the values in the forms

27
00:01:40,460 --> 00:01:44,240
and then make an action crater to actually save the form.

28
00:01:44,240 --> 00:01:50,420
Now there is one twist in here that I really want to add in that I really want to add one more twist

29
00:01:50,770 --> 00:01:53,600
on all the boxes shown you so far tonight.

30
00:01:53,610 --> 00:01:55,110
I know this is a horrible example right here.

31
00:01:55,110 --> 00:01:58,370
Maybe I've got a better one blah blah.

32
00:01:58,400 --> 00:02:04,070
I guess I'll have to do all the mocks passionately before it kind of showed this form as having like

33
00:02:04,160 --> 00:02:10,710
editing capability is right like a save button a fire button text button to text that employee.

34
00:02:10,820 --> 00:02:16,250
But now I'm claiming that we're going to have a form that is solely made for creating an employee and

35
00:02:16,250 --> 00:02:20,190
not really kind of viewing one or editing one.

36
00:02:20,200 --> 00:02:27,190
So if we're going to make a edit form or kind of like a show form to show an existing record and a creative

37
00:02:27,190 --> 00:02:32,370
form maybe it would be a waste of time to make two separate forms.

38
00:02:32,410 --> 00:02:33,660
Right.

39
00:02:33,700 --> 00:02:39,250
Maybe we should make just one form and reuse it for both the Create and the edit as well.

40
00:02:39,250 --> 00:02:42,660
So for now we're going to focus on just the Create aspect to the form.

41
00:02:42,670 --> 00:02:48,070
But I want you to keep that thought in mind or I want you to remember that that maybe recreating this

42
00:02:48,070 --> 00:02:52,470
form for both create and edit doesn't make a lot of sense.

43
00:02:52,660 --> 00:02:55,660
But anyways we're going to concentrate on just create right now.

44
00:02:55,840 --> 00:02:59,040
So let's get started for the form itself.

45
00:02:59,050 --> 00:03:01,510
You probably got a good idea of what we need to do.

46
00:03:01,510 --> 00:03:08,710
We're going to import some of our reusable components put on some labels some card sections some inputs

47
00:03:09,040 --> 00:03:10,230
just get a form on the page.

48
00:03:10,240 --> 00:03:12,500
It's going look very similar to the log in form to start.

49
00:03:12,500 --> 00:03:15,310
So we're going to breeze right through it first.

50
00:03:15,340 --> 00:03:17,510
We do not need the re-act need of import any more.

51
00:03:17,530 --> 00:03:20,760
We're gonna replace it with all of our own custom components.

52
00:03:20,950 --> 00:03:22,400
It's going to take those out.

53
00:03:22,810 --> 00:03:34,000
I'll pull in my card card section input and button from common and then inside of the employee create

54
00:03:34,000 --> 00:03:43,720
component replace it with a card and a couple of card sections.

55
00:03:43,980 --> 00:03:46,950
So I'm going to copy paste the card section down.

56
00:03:47,010 --> 00:03:53,700
I'm going to skip the worrying about the picker right now hours selecting the date because I definitely

57
00:03:53,700 --> 00:03:55,320
want a new custom component in there.

58
00:03:55,320 --> 00:03:57,300
So right now I'm not going to worry about it.

59
00:03:57,300 --> 00:04:00,650
We're going to come back to it in a future section.

60
00:04:00,720 --> 00:04:08,070
So in the first card section I'll place my first input which is going to be responsible for getting

61
00:04:08,070 --> 00:04:12,160
the employee's name and I'll give it a placeholder.

62
00:04:12,180 --> 00:04:21,230
Jane then for the second and put this one is going to be responsible for collecting the phone number

63
00:04:22,730 --> 00:04:27,490
given the label of just a phone and a placeholder.

64
00:04:27,730 --> 00:04:28,550
555

65
00:04:31,410 --> 00:04:33,360
looks good.

66
00:04:33,360 --> 00:04:35,570
Again the third card section is give me that picture.

67
00:04:35,580 --> 00:04:37,050
I'm going to ignore it right now.

68
00:04:37,090 --> 00:04:42,310
So the last thing I need to do is place a button inside of the last card section.

69
00:04:42,420 --> 00:04:49,600
So place my button and I want to say something like save all we can do to create now.

70
00:04:49,800 --> 00:04:51,310
Yes create.

71
00:04:51,570 --> 00:04:52,470
Let's go to create.

72
00:04:52,470 --> 00:04:53,360
Why not.

73
00:04:53,910 --> 00:04:54,520
OK.

74
00:04:54,750 --> 00:04:55,860
I'm sure this all works good.

75
00:04:55,860 --> 00:05:00,420
So I'm oh I will refresh the simulator just to make sure I don't have a compilation error or anything

76
00:05:00,420 --> 00:05:05,800
like that any typos but I'm going to skip the process of actually logging in and checking it out.

77
00:05:06,160 --> 00:05:06,450
OK.

78
00:05:06,480 --> 00:05:08,380
So a good place to start with our form.

79
00:05:08,400 --> 00:05:13,140
Let's continue in the next section by starting to wire up our action creators our reducers all that

80
00:05:13,140 --> 00:05:14,290
kind of good stuff.