1
00:00:00,590 --> 00:00:05,820
That in the last section we took a look at the state form object and found all the values out of our

2
00:00:05,820 --> 00:00:07,190
form inside there.

3
00:00:07,230 --> 00:00:12,420
So now our survey form review component is being passed all the different values out of our form from

4
00:00:12,420 --> 00:00:13,610
the redux store.

5
00:00:13,950 --> 00:00:19,920
We can receive those values as props from the map say object by destructuring them out right here.

6
00:00:19,920 --> 00:00:22,060
So we'll say form values.

7
00:00:22,410 --> 00:00:27,270
Now I want to say I just took a real leap of faith right there and just kind of magically putting form

8
00:00:27,270 --> 00:00:31,090
values right here and assuming that they're going to magically show up inside the component.

9
00:00:31,260 --> 00:00:37,110
Remember whenever we call or whenever we define maps to props and pass it to the connect function whatever

10
00:00:37,110 --> 00:00:40,580
we return we'll show up as props to our component.

11
00:00:40,710 --> 00:00:47,370
So in other words this object right here is being passed as a prop to survey form of view that object

12
00:00:47,370 --> 00:00:49,710
has a key form values.

13
00:00:49,710 --> 00:00:53,540
And so we're going to pull it out of that prop's object right here.

14
00:00:53,700 --> 00:00:59,420
So form values right here contains all the different values out of our field simiar form.

15
00:00:59,830 --> 00:01:00,100
OK.

16
00:01:00,120 --> 00:01:04,630
So now it's time to print these up inside the survey form a view component right.

17
00:01:04,660 --> 00:01:08,280
Or any of the five we're going to place a div.

18
00:01:08,280 --> 00:01:12,960
And this is going to be kind of a deeply nested div I'm using a lot of divs here to just kind of get

19
00:01:12,990 --> 00:01:14,690
all the new lines to work correctly.

20
00:01:14,730 --> 00:01:16,830
You'll see what it looks like in just a little bit.

21
00:01:17,250 --> 00:01:18,150
So I want to print out.

22
00:01:18,150 --> 00:01:20,860
Print out the first fields that I care about.

23
00:01:20,880 --> 00:01:25,170
Now the first field that I really care about is probably going to be the survey title because remember

24
00:01:25,170 --> 00:01:28,210
that was the first thing we showed on the form itself.

25
00:01:28,230 --> 00:01:33,180
So I want to first print out the survey title so that the user can easily review it and say OK yeah

26
00:01:33,180 --> 00:01:34,470
that's what I expected to.

27
00:01:34,530 --> 00:01:37,550
Well that's why I had attempted to enter.

28
00:01:37,800 --> 00:01:42,730
So inside of this first div that will be responsible for this first property we're printing out will

29
00:01:42,750 --> 00:01:48,300
place a label with a text that will make it just match up.

30
00:01:48,300 --> 00:01:59,860
So survey title and then another div underneath that to hold the actual value which is form values dot

31
00:02:00,190 --> 00:02:07,860
and then the property name here is title remember the title property name is really being determined

32
00:02:07,860 --> 00:02:09,310
from that field's object.

33
00:02:09,320 --> 00:02:15,330
We had put together back inside the survey foot scudi the fields object we had put together inside the

34
00:02:15,330 --> 00:02:18,770
survey form just nonstop tongue twisters here.

35
00:02:18,840 --> 00:02:21,750
So the survey title was setting the title property.

36
00:02:21,750 --> 00:02:24,310
So that's why we did specifically form values.

37
00:02:24,330 --> 00:02:25,610
Title right here.

38
00:02:26,110 --> 00:02:26,360
OK.

39
00:02:26,380 --> 00:02:29,680
So let's say this and do a quick test to see how we're doing.

40
00:02:30,300 --> 00:02:32,130
I'll change back to the browser.

41
00:02:32,610 --> 00:02:35,930
There's a refresh entering some text

42
00:02:38,880 --> 00:02:39,470
it next.

43
00:02:39,510 --> 00:02:40,620
And very good.

44
00:02:40,650 --> 00:02:42,700
We see the first value printing out here.

45
00:02:42,840 --> 00:02:45,090
Now you might imagine where things can go from here.

46
00:02:45,090 --> 00:02:50,160
Essentially we're saying that for every separate property we're going to copy paste this inner div right

47
00:02:50,160 --> 00:02:52,890
here and paste it right here.

48
00:02:52,890 --> 00:03:00,180
Now instead of serve a title I want to print out subject line which is going to be the subject property

49
00:03:00,280 --> 00:03:02,160
of a form values.

50
00:03:02,160 --> 00:03:10,530
I will duplicate it again change this one to be email body because that's the third field.

51
00:03:10,530 --> 00:03:14,190
This will be body and you kind of get the idea.

52
00:03:14,220 --> 00:03:19,740
Now when I look at this code right here I see some really repetitive stuff like this is super repetitive.

53
00:03:19,740 --> 00:03:22,320
We have the same div over and over again.

54
00:03:22,350 --> 00:03:28,320
In addition we have some values inside of each of these labels and divs right here that are very closely

55
00:03:28,320 --> 00:03:34,930
tied to exactly what we had inside of that field's object that we had created inside of survey form.

56
00:03:35,010 --> 00:03:36,500
So we have two problems right now.

57
00:03:36,510 --> 00:03:41,800
We have some property names that are really being manually duplicated from this object right here from

58
00:03:41,820 --> 00:03:47,640
this entire array of objects and we also have some very duplicated looking GSX right here as well.

59
00:03:47,640 --> 00:03:49,060
Two big problems.

60
00:03:49,080 --> 00:03:51,880
Now the reason that I think that first one is a problem at all.

61
00:03:51,900 --> 00:03:58,110
You know the fact that we are duplicating the label name survey title and survey title right here is

62
00:03:58,110 --> 00:04:03,000
that I can very easily imagine in a case in which some engineer says oh well you know what.

63
00:04:03,000 --> 00:04:05,010
This isn't really called survey title anymore.

64
00:04:05,010 --> 00:04:08,150
This is now called Campaign title.

65
00:04:08,150 --> 00:04:11,450
And so maybe that engineer comes into the survey form component.

66
00:04:11,520 --> 00:04:15,270
They update the fields object and they say OK that's pretty much it.

67
00:04:15,280 --> 00:04:17,210
That's that's all I had to do.

68
00:04:17,700 --> 00:04:23,670
They save this file to go look at the form and they say oh yeah that successfully got updated to campaign

69
00:04:23,680 --> 00:04:26,680
title as we'll see here in just a second when it refreshes.

70
00:04:26,880 --> 00:04:34,020
However that engineer might not know that as soon as you submit the form and go to the next step it's

71
00:04:34,020 --> 00:04:40,140
going to show some text that's being displayed or pulled from this Toli other location inside of our

72
00:04:40,140 --> 00:04:42,960
component structure or this completely different component.

73
00:04:43,140 --> 00:04:45,390
So now really this should say campaign title as well.

74
00:04:45,390 --> 00:04:45,720
Right.

75
00:04:45,720 --> 00:04:51,330
I wouldn't really want to have that different terminology of campaign title there but then serve a title

76
00:04:51,330 --> 00:04:52,200
here.

77
00:04:52,340 --> 00:04:58,800
And so this is something that we can really fix by rather than duplicating or handwriting out all these

78
00:04:58,800 --> 00:05:05,160
different divs we could somehow import this Field's object right here and then just as we iterated over

79
00:05:05,160 --> 00:05:09,220
the fields object previously we could iterate over it again.

80
00:05:09,480 --> 00:05:15,210
And inside that iteration kind of construct all these different divs to show to our user.

81
00:05:15,330 --> 00:05:19,080
So I think that's going to go a long ways to solving a couple of different issues here.

82
00:05:19,080 --> 00:05:23,730
Again we don't have to manually type all this stuff out and be subject to some brittleness or breakage

83
00:05:23,730 --> 00:05:24,480
in the future.

84
00:05:24,600 --> 00:05:28,260
And we also don't have to have all this duplicated GSX in here as well.

85
00:05:28,560 --> 00:05:29,820
So let's give that a shot.

86
00:05:29,820 --> 00:05:35,490
We're going to try to import that form or see that Fields object right here and then make use of it

87
00:05:35,970 --> 00:05:39,210
inside of the survey form of the component as well.

88
00:05:39,810 --> 00:05:43,670
Now to start we can do a little bit of cleanup inside of survey form of view.

89
00:05:43,680 --> 00:05:48,180
I'm going to delete that entire big div that we just put together and I'm sorry if you type that all

90
00:05:48,180 --> 00:05:48,930
up by hand.

91
00:05:48,930 --> 00:05:51,600
I hope you copy pasted it like I did.

92
00:05:52,080 --> 00:05:55,160
I apologize if you if you did not.

93
00:05:55,680 --> 00:05:58,210
So at this point we've now got the survey form of view.

94
00:05:58,380 --> 00:06:04,670
It wants to get access to some object or some array that is declared inside of survey form.

95
00:06:04,890 --> 00:06:11,480
Now rather than export this Fields object from survey form and then somehow import it into survey form

96
00:06:11,490 --> 00:06:16,950
view I'm thinking that this list of fields should really just be pulled out to a completely separate

97
00:06:16,950 --> 00:06:21,890
file and then imported into both the survey form and survey form review.

98
00:06:22,200 --> 00:06:22,700
OK.

99
00:06:22,800 --> 00:06:28,590
So rather than try to leave this thing inside of this file and import it over to the other one I want

100
00:06:28,590 --> 00:06:34,610
to just put it into a completely new file and then import it into both survey form and survey form review.

101
00:06:35,160 --> 00:06:39,400
So let's make a new file inside the survey's directory as well.

102
00:06:39,570 --> 00:06:42,950
I'm going to call this one form fieldstone genius.

103
00:06:43,140 --> 00:06:48,270
Notice that again I'm using a lowercase tile here of form fields because I'm not exporting a component

104
00:06:48,300 --> 00:06:54,490
or a component class or really just a class I'm exporting some simple property a simple array.

105
00:06:54,720 --> 00:07:00,940
And so for that I'd choose to use a lowercase still camel case but lowercase leading character.

106
00:07:01,180 --> 00:07:05,220
Downside if you're all we're doing is creating that list of fields and exporting them.

107
00:07:05,250 --> 00:07:08,660
So we'll just lead right off with the export default.

108
00:07:08,670 --> 00:07:11,200
I'm going to change back over to the survey form.

109
00:07:11,400 --> 00:07:15,030
I'm going to take the array of cut it out of here.

110
00:07:15,270 --> 00:07:19,560
I'm going to go back over to form fields and paste it.

111
00:07:19,680 --> 00:07:21,870
I'll make sure I get a space in there too.

112
00:07:22,600 --> 00:07:22,980
OK.

113
00:07:23,010 --> 00:07:30,570
So now our form configuration like the field configuration is all centralized inside of this one file.

114
00:07:30,570 --> 00:07:36,330
Now I can go back into the survey form I'm going to clean up that Konst statement that I left around

115
00:07:37,490 --> 00:07:41,660
and I'm also going to import that field's object.

116
00:07:41,660 --> 00:07:46,340
Now I'm going to assign it to capital fields in here as well because again it's kind of so constant

117
00:07:46,400 --> 00:07:49,850
I don't really want to go and hunt down all the different uses I have of it.

118
00:07:49,940 --> 00:07:54,090
It would be totally appropriate as well to just call it form fields in here.

119
00:07:54,320 --> 00:07:54,970
And you know what.

120
00:07:55,060 --> 00:07:56,750
I take it back let's do of form fields.

121
00:07:56,750 --> 00:07:58,480
That's the right thing to do.

122
00:07:58,520 --> 00:08:02,900
I wanted to leave it as capitals so that we didn't have to like go and find all of its uses in this

123
00:08:02,900 --> 00:08:04,810
file which is kind of lazy of me.

124
00:08:04,820 --> 00:08:08,050
So let's rename the sing to me form fields instead.

125
00:08:08,150 --> 00:08:14,000
It still is a true constant but when we import a constant to another file we don't always carry along

126
00:08:14,000 --> 00:08:16,410
that all capitals syntax as well.

127
00:08:16,880 --> 00:08:23,060
OK so we're going to import this from form fields now going to make sure that anywhere we were referring

128
00:08:23,060 --> 00:08:27,950
to capital fields inside of here we replace it with the new form fields.

129
00:08:27,980 --> 00:08:29,550
So still the array of objects.

130
00:08:29,720 --> 00:08:32,170
But now it's going to be just the slightly different name.

131
00:08:32,480 --> 00:08:36,120
So I see one use right here will save form fields right away.

132
00:08:36,350 --> 00:08:41,990
I'm going to do a quick scan through here and see if I used fields anywhere else.

133
00:08:42,170 --> 00:08:45,440
Looks like down inside the validate function we use it here as well.

134
00:08:45,740 --> 00:08:48,920
So here is that each where we were handling some validation.

135
00:08:48,980 --> 00:08:54,660
I'll be sure to replace this capital F fields here with form fields as well.

136
00:08:54,680 --> 00:08:57,440
I'm going to keep looking through and that's pretty much it.

137
00:08:58,020 --> 00:09:02,450
OK so let's save this let's do a quick test inside the browser to make sure we didn't just break anything

138
00:09:02,450 --> 00:09:04,980
with that refactor.

139
00:09:05,020 --> 00:09:06,340
So wait for the refresh.

140
00:09:06,430 --> 00:09:08,960
And yet it looks like everything is still working.

141
00:09:09,070 --> 00:09:11,510
If I just click next I still have all the validation.

142
00:09:11,770 --> 00:09:18,700
So at this point if you see any type of air inside your console that says like unknown variable capital

143
00:09:18,730 --> 00:09:23,780
fields or something like that that means that you probably did not fix up the import statement.

144
00:09:23,800 --> 00:09:29,590
You want to make sure that you pick up the change in variable name inside of render fields and the validate

145
00:09:29,590 --> 00:09:31,020
function at the bottom as well.

146
00:09:31,210 --> 00:09:33,260
So do triple check both of those.

147
00:09:33,780 --> 00:09:35,410
OK so good refactoring the section.

148
00:09:35,410 --> 00:09:40,660
We made a little bit of progress towards kind of generalizing the logic around all these fields.

149
00:09:40,660 --> 00:09:41,810
Let's take a quick break.

150
00:09:41,830 --> 00:09:47,350
When we come back we're going to import that object into the survey form review and make sure that we

151
00:09:47,350 --> 00:09:51,940
use that list of fields to print out all the different inputs that the user added.

152
00:09:52,210 --> 00:09:54,800
So quick break and I'll see you in just a second.