1
00:00:00,660 --> 00:00:04,500
At the end of the last section we did a test of our application side the browser.

2
00:00:04,500 --> 00:00:07,350
Now I've got a real big error message over here.

3
00:00:07,380 --> 00:00:11,510
Chances are I really suspect that everything worked out appropriately for you.

4
00:00:11,520 --> 00:00:16,970
So I was using a slightly out of date piece of software I just updated that everything's working now.

5
00:00:16,980 --> 00:00:19,920
And so I guarantee you you're probably using the correct version.

6
00:00:19,920 --> 00:00:21,650
So really a mistake on my site.

7
00:00:21,960 --> 00:00:26,260
Anyways it looks like we got our input appearing on the screen correctly right now.

8
00:00:26,350 --> 00:00:29,240
We can enter text in here and presumably.

9
00:00:29,250 --> 00:00:29,910
I mean I don't know.

10
00:00:29,910 --> 00:00:32,430
Presumably everything's working the way we expect.

11
00:00:32,430 --> 00:00:38,010
So hopefully this value is getting reflected over the a redux form in some fashion.

12
00:00:38,190 --> 00:00:42,710
For now I want to just continue on assuming that everything's working the way that we would expect.

13
00:00:42,900 --> 00:00:47,790
And I want to add on a little bit more styling and CSSA to this thing right here to make it look a little

14
00:00:47,790 --> 00:00:48,740
bit nicer.

15
00:00:49,050 --> 00:00:53,370
After that we'll start working on some of the other fields components that we need inside of this page

16
00:00:53,670 --> 00:00:59,280
and then we will do a final test and make sure that redux form is really doing the right thing for us

17
00:00:59,370 --> 00:01:05,280
in regards to saving this on application level state and all that kind of good stuff.

18
00:01:05,280 --> 00:01:09,090
So again we'll start off first by working on some of the styling.

19
00:01:09,090 --> 00:01:14,670
This is supposed to be the title input for an individual blog post but right now the user really has

20
00:01:14,670 --> 00:01:17,260
no reasonable way of figuring that out.

21
00:01:17,340 --> 00:01:17,590
Right.

22
00:01:17,580 --> 00:01:18,980
Like there's no label on here.

23
00:01:18,990 --> 00:01:20,520
Nothing like that.

24
00:01:20,580 --> 00:01:26,610
So we really need to figure out some way of adding in some additional styling to format that input a

25
00:01:26,610 --> 00:01:28,680
little bit more nicely.

26
00:01:28,680 --> 00:01:32,130
So that's really the job of the surrender title field function.

27
00:01:32,160 --> 00:01:37,200
It's up to us to add in some amount of markup inside of here to make sure that we get a label in all

28
00:01:37,200 --> 00:01:39,320
that kind of good stuff.

29
00:01:39,420 --> 00:01:45,450
So let's use a little bit of bootstrap styling to improve the design on the dish that we're returning

30
00:01:45,450 --> 00:01:47,230
in here.

31
00:01:47,260 --> 00:01:57,050
Going out on a class name of form group and on the input all add on a class name of form control.

32
00:01:57,060 --> 00:02:03,730
So let's save this and have it before we go and test it will still label as well.

33
00:02:04,020 --> 00:02:08,610
So we'll give it a label of title again.

34
00:02:08,680 --> 00:02:10,160
Let's test this.

35
00:02:10,290 --> 00:02:13,650
So flip back over to the browser will do our refresh and OK.

36
00:02:13,690 --> 00:02:16,030
All right that definitely is starting to look a little bit more reasonable.

37
00:02:16,060 --> 00:02:20,590
We've got that title label and this is much more nicely formatted.

38
00:02:20,650 --> 00:02:22,840
So I think this is looking pretty good so far.

39
00:02:24,230 --> 00:02:28,790
Now that we have got a little bit better styling on here I would really like to make sure that we can

40
00:02:28,790 --> 00:02:36,470
show not only the title field but also the input for the content and the tags that will be associated

41
00:02:36,470 --> 00:02:39,150
with each blog post as well.

42
00:02:39,170 --> 00:02:45,890
So to add in more fields it's as easy as adding any more field components underneath the existing title

43
00:02:45,890 --> 00:02:56,280
or component or the existing title field I should say let's add on another field for our tags property.

44
00:02:56,330 --> 00:02:58,850
So all of this fields and name of tags.

45
00:02:59,240 --> 00:03:07,080
And then we will make a new function call this dot render tags field.

46
00:03:07,100 --> 00:03:11,630
Again we're not going to add on the parentheses here at the end because we are passing in a function

47
00:03:11,660 --> 00:03:16,370
just a reference to a function so that the field can read render itself multiple times.

48
00:03:18,080 --> 00:03:24,380
Then we will specify the render tags field function as well.

49
00:03:24,380 --> 00:03:29,780
So instead of saying we're going to end up with some markup that looks definitely very similar to the

50
00:03:29,780 --> 00:03:32,380
title field function that we've already put together.

51
00:03:32,390 --> 00:03:38,420
I mean really if you look back at the mockup that we have the mock up really again has the title label

52
00:03:38,450 --> 00:03:41,600
as some input for categories.

53
00:03:41,600 --> 00:03:43,690
We have the label and some input as well.

54
00:03:43,760 --> 00:03:48,060
So really these two things are awfully identical in nature.

55
00:03:48,200 --> 00:03:53,450
And so whenever you have two inputs or I should say two pieces of GSX that are starting to look very

56
00:03:53,450 --> 00:03:54,270
similar.

57
00:03:54,290 --> 00:04:01,430
You really want to start thinking about how to dry up your code or don't repeat yourself.

58
00:04:01,580 --> 00:04:06,890
If we were to write out these two separate functions we would have a lot of duplicate logic.

59
00:04:06,890 --> 00:04:12,080
So we need to figure out some way or at least I suggest it would be really nice if we could figure out

60
00:04:12,080 --> 00:04:18,380
some way to just have a single render field function that will be responsible for rendering both the

61
00:04:18,380 --> 00:04:21,710
title field and the tag's field.

62
00:04:21,800 --> 00:04:22,750
So let's give this a shot.

63
00:04:22,790 --> 00:04:24,660
Let's see if we can make it happen.

64
00:04:24,680 --> 00:04:29,920
I mean to first start by deleting the rendered tags field function that we just put in here.

65
00:04:30,620 --> 00:04:36,820
I'm going to rename the rendered title field function to just render field.

66
00:04:37,210 --> 00:04:42,820
So because now it's going to be responsible for ending an arbitrary field as opposed to a specific one.

67
00:04:43,190 --> 00:04:50,120
And then inside of our render function I can make sure that we're passing the component Propp of just

68
00:04:50,210 --> 00:04:52,070
render field

69
00:04:55,120 --> 00:04:55,700
OK.

70
00:04:55,900 --> 00:05:01,300
So at this point in time if I save the file and I go back over to the browser I should be able to refresh

71
00:05:01,300 --> 00:05:05,920
and see two identical titles by the way if we type into one here.

72
00:05:06,070 --> 00:05:09,220
You'll notice that it's not reflected in the other.

73
00:05:09,220 --> 00:05:13,870
Right now they're using the exact same piece or they're using different pieces of internal state.

74
00:05:13,900 --> 00:05:14,800
Just a quick aside.

75
00:05:14,800 --> 00:05:17,280
We'll talk more about that later.

76
00:05:17,530 --> 00:05:17,740
OK.

77
00:05:17,750 --> 00:05:22,250
So our goal right now is to generalize what render field is doing.

78
00:05:22,300 --> 00:05:25,650
The big problem right now is that they both showed the title label.

79
00:05:25,660 --> 00:05:31,570
So I think that if we really just update the label in some fashion in it or in some way then we'll be

80
00:05:31,570 --> 00:05:40,360
in a pretty good spot to do so we can pass arbitrary properties to the field component itself and those

81
00:05:40,390 --> 00:05:48,040
arbitrary properties will be passed along side of the field Propp or the field argument right here.

82
00:05:48,040 --> 00:05:55,420
So let's see what that looks like in practice down on the field components all add on label.

83
00:05:56,120 --> 00:06:01,260
And I'll say the label for the first one should be in title and the label for the second one should

84
00:06:01,260 --> 00:06:10,490
be tag's then up inside of the render field function I'll replace the hardcoded title right here with

85
00:06:10,580 --> 00:06:13,770
field dot label like so

86
00:06:16,580 --> 00:06:22,310
again if we pass arbitrary properties like properties with any given name that we can possibly imagine

87
00:06:22,730 --> 00:06:28,610
to this Field's component they will be automatically attached to that field argument inside of the render

88
00:06:28,610 --> 00:06:29,680
field function.

89
00:06:29,930 --> 00:06:38,240
So this does not have to be labeled right here as could be labeled to show or you know field title whatever

90
00:06:38,240 --> 00:06:41,880
we really want we can be any property name that we so choose.

91
00:06:44,020 --> 00:06:46,550
OK let's test this out now and see how we're doing.

92
00:06:46,730 --> 00:06:48,340
So let's flip back over.

93
00:06:48,450 --> 00:06:53,420
Refresh the page and now we correctly have title and tags separately.

94
00:06:53,490 --> 00:06:56,730
So OK it looks like things are working out pretty well.

95
00:06:56,730 --> 00:07:01,260
Now you might be curious as to why we provided the separate label when you've already got the name of

96
00:07:01,260 --> 00:07:02,400
the field right here.

97
00:07:02,620 --> 00:07:04,310
Well there's a very good reason for that.

98
00:07:04,350 --> 00:07:09,860
Yes we could just capitalize the name of the field and say Oh yeah here is the label just capital-T

99
00:07:09,870 --> 00:07:10,360
title.

100
00:07:10,380 --> 00:07:11,270
We're good to go.

101
00:07:11,520 --> 00:07:17,190
But you could easily imagine the case in which you would want a different label so we could end up wanting

102
00:07:17,190 --> 00:07:21,420
the label or something like title for post or something like that.

103
00:07:21,420 --> 00:07:26,990
So clearly the label of the field and the name property field might be very very different in nature.

104
00:07:27,000 --> 00:07:30,250
And so that's why we're not going to try to reuse the name field.

105
00:07:30,620 --> 00:07:35,250
So now if we go back over and refresh again title for post.

106
00:07:35,360 --> 00:07:35,670
OK.

107
00:07:35,690 --> 00:07:36,920
So this is looking pretty good.

108
00:07:36,930 --> 00:07:42,630
The last field I want to add on here is the field for our content of the post to add that on.

109
00:07:42,630 --> 00:07:46,860
It's going to be as easy as just adding on another field component.

110
00:07:46,860 --> 00:07:56,610
We'll give it a label of post content a name of content and the component product will again be a reference

111
00:07:56,610 --> 00:08:00,980
to the render field function like so OK.

112
00:08:00,990 --> 00:08:02,370
So let's test this out.

113
00:08:02,820 --> 00:08:05,660
And again we're looking pretty good.

114
00:08:05,700 --> 00:08:07,760
You will notice I've got the little icon right here.

115
00:08:07,770 --> 00:08:13,870
This is I get a lot of questions about why some of my inputs have these icons on the right hand side.

116
00:08:13,890 --> 00:08:19,470
This is the password manager that I use I used last pass and last pass will sometimes I try to attach

117
00:08:19,470 --> 00:08:25,160
itself to different inputs and see that if I press it it's going to start giving me a bunch of.

118
00:08:25,170 --> 00:08:25,680
Here we go.

119
00:08:25,680 --> 00:08:27,680
So like it's going to try to fill in the form for me.

120
00:08:27,690 --> 00:08:30,750
Again this is a password manager that I use with Chrome.

121
00:08:30,750 --> 00:08:35,490
So it's nothing specific to the application that we're working on.

122
00:08:35,490 --> 00:08:35,850
All right.

123
00:08:35,850 --> 00:08:42,600
So in this section we generalize the render field function and we added on three separate field components.

124
00:08:42,600 --> 00:08:44,070
So this is looking pretty good.

125
00:08:44,070 --> 00:08:49,140
The last thing we have to do is figure out how to actually submit this form and validate the input that

126
00:08:49,140 --> 00:08:50,690
the users entered in here.

127
00:08:50,700 --> 00:08:53,310
So let's take care of those challenges in the next section.