1
00:00:00,740 --> 00:00:05,720
Our users now have the ability to review all their different inputs and they can freely go back and

2
00:00:05,750 --> 00:00:07,600
edit them if they feel like they need to.

3
00:00:07,880 --> 00:00:12,320
So we're not going to move on to one of the last steps in the form which is to put a nice big submit

4
00:00:12,320 --> 00:00:16,730
button on here towards the right hand side that a user can click to actually submit all the different

5
00:00:16,730 --> 00:00:20,020
values and presumably send out the survey.

6
00:00:20,570 --> 00:00:24,260
So we're going to change back over to our survey form review view file.

7
00:00:24,260 --> 00:00:28,680
Remember this is the one that shows the form and puts and allows the user to review all of them.

8
00:00:29,060 --> 00:00:34,040
And then inside of here we'll scroll down to our return statement or we're going to add another button

9
00:00:34,040 --> 00:00:37,930
inside of here that will go right after our current back button.

10
00:00:37,940 --> 00:00:41,420
So right on that one I'll put my button tag.

11
00:00:41,540 --> 00:00:44,570
This is going to be again the submit button right here.

12
00:00:44,570 --> 00:00:48,770
Now I want to make sure that our user really understands that when they click this it's really the point

13
00:00:48,770 --> 00:00:49,660
of no return.

14
00:00:49,670 --> 00:00:50,820
Like when you click this button.

15
00:00:50,960 --> 00:00:53,090
Hey we're going to send your survey out.

16
00:00:53,240 --> 00:00:56,140
So I'm going to give it the text of send survey.

17
00:00:56,450 --> 00:01:00,370
Hopefully that's going to make it reasonably clear to the users that yeah this is really it.

18
00:01:00,380 --> 00:01:06,040
We're now going to kick your e-mail out to everyone that you designated inside the recipient list.

19
00:01:06,350 --> 00:01:11,960
Now right after the text of send Servais let's also put a little icon on here just for a nice smooth

20
00:01:12,620 --> 00:01:15,560
nice design elements.

21
00:01:15,650 --> 00:01:20,270
We're going to give it a class name of material icons and right right of course is going to make the

22
00:01:20,270 --> 00:01:22,470
icon appear to the right hand side the button.

23
00:01:23,820 --> 00:01:25,040
Close off the tag.

24
00:01:25,280 --> 00:01:29,880
And I'm going to give it an icon name of e-mail which is going to make it appear as just kind of like

25
00:01:29,880 --> 00:01:34,100
a nice little e-mail looking thing you'll see what the icon looks like in just a second.

26
00:01:34,110 --> 00:01:42,290
Now for the button tag itself we're going to give it a class name of green beauty and flat and right.

27
00:01:42,300 --> 00:01:46,090
And I bet you can guess what each one of those do make it green.

28
00:01:46,200 --> 00:01:50,160
Give it the flat design and pull the button to the right hand side of the screen.

29
00:01:50,670 --> 00:01:54,090
So let's say this and see what the button looks like just kind of verify we're going down the right

30
00:01:54,090 --> 00:01:55,060
path here.

31
00:01:55,410 --> 00:02:02,580
When we reload we get kicked back over to the initial form let's put in our dummy inputs really quick

32
00:02:03,750 --> 00:02:05,170
and OK so sensitive.

33
00:02:05,190 --> 00:02:06,870
Yeah that's looking pretty reasonable.

34
00:02:06,870 --> 00:02:11,400
You know I am noticing however that we've got white text on this form on these buttons but then black

35
00:02:11,400 --> 00:02:16,610
on this one maybe looks kind of consolidate our coloring scheme here.

36
00:02:16,620 --> 00:02:20,930
We're kind of going a little bit haywire between the two forms.

37
00:02:20,940 --> 00:02:22,690
So on the yellow button.

38
00:02:22,770 --> 00:02:24,050
Let's replace that dark.

39
00:02:24,060 --> 00:02:27,000
Three are dark and three are it's not dark at all.

40
00:02:27,000 --> 00:02:32,820
Let's just give it a white text class name and let's get the other button a white text class names.

41
00:02:32,820 --> 00:02:34,440
Well let's see what this looks like.

42
00:02:34,590 --> 00:02:39,450
Now the yellow might be a little bit too yellow so maybe we had that Darkon on there for a reason.

43
00:02:39,660 --> 00:02:41,200
Let's check it out really quick.

44
00:02:44,520 --> 00:02:45,370
Next.

45
00:02:45,620 --> 00:02:46,010
OK.

46
00:02:46,020 --> 00:02:47,670
So that's a little bit too yellow.

47
00:02:47,670 --> 00:02:50,950
Yeah let's bring back the dark and three.

48
00:02:50,970 --> 00:02:52,390
So dark and three.

49
00:02:52,860 --> 00:02:53,130
OK.

50
00:02:53,160 --> 00:02:54,540
And I'm not going to check it out.

51
00:02:54,540 --> 00:02:56,510
I'm just going to have that wrong button.

52
00:02:56,510 --> 00:02:58,830
We want it on the yellow one right here.

53
00:02:58,830 --> 00:03:00,550
So dark in theory.

54
00:03:00,570 --> 00:03:04,170
So again I'm not going to check it out per se I'm just going to assume yes we'll probably look pretty

55
00:03:04,170 --> 00:03:07,720
reasonable and definitely consistent with the last page that we had as well.

56
00:03:08,100 --> 00:03:08,350
OK.

57
00:03:08,370 --> 00:03:11,590
So now back on track we've got a button being displayed to the user.

58
00:03:11,610 --> 00:03:15,600
And now we want to make sure that whenever a user clicks on this thing it actually like does something

59
00:03:15,600 --> 00:03:16,100
for us.

60
00:03:16,110 --> 00:03:16,380
Right.

61
00:03:16,380 --> 00:03:21,560
We want to make sure that's actually kind of like submit a survey or sends it out or something.

62
00:03:21,610 --> 00:03:23,130
You know who knows what that step really is.

63
00:03:23,130 --> 00:03:28,560
But we really want to kind of finalize this process and say it's time to actually make use of these

64
00:03:28,790 --> 00:03:30,700
this new form inputs.

65
00:03:30,810 --> 00:03:37,470
So remember with redux any time we want to make any type of change to how our applications data is structured

66
00:03:37,470 --> 00:03:40,880
whatsoever we're always talking about an actual creator.

67
00:03:40,920 --> 00:03:46,320
And so when we think about sending a survey here or creating a survey we are talking about changing

68
00:03:46,320 --> 00:03:48,960
the state or the data inside of our application.

69
00:03:49,200 --> 00:03:54,870
And so I'm immediately thinking to myself this is going to be tied to an actual creator because we want

70
00:03:54,870 --> 00:03:59,180
to change the data inside of our app now.

71
00:03:59,210 --> 00:04:03,120
Right now I don't really want to think a lot about what this action is going to do.

72
00:04:03,120 --> 00:04:08,280
I just want to kind of create a scaffold for an action creator and hook it up to this component and

73
00:04:08,280 --> 00:04:12,630
then we'll come back and think a little bit about exactly what we need to do inside that action creator.

74
00:04:12,750 --> 00:04:17,310
So yeah maybe you can accept that we're somehow creating a survey it's going to change our data.

75
00:04:17,340 --> 00:04:18,420
We don't really know how.

76
00:04:18,480 --> 00:04:22,440
But let's just kind of like put the action creator together and then we'll come back and figure out

77
00:04:22,440 --> 00:04:24,930
what actually needs to happen inside of there.

78
00:04:24,930 --> 00:04:30,280
So remember how we handle action creators inside of our client as sarcy actions directory.

79
00:04:30,360 --> 00:04:35,970
We find the index dodgiest file and then inside if you're scrolling down to the bottom and we're going

80
00:04:35,970 --> 00:04:40,440
to create our new action creator which again don't know what it's going to do yet it's going to put

81
00:04:40,440 --> 00:04:41,510
it together.

82
00:04:41,940 --> 00:04:49,050
So I'm going to export Konst and we'll get the name of how about something like create survey and save

83
00:04:49,050 --> 00:04:54,090
survey maybe submit survey maybe that will be the best one submit survey to make sure it's really clear

84
00:04:54,090 --> 00:04:57,090
that we are submitting a new survey for creation.

85
00:04:57,090 --> 00:04:59,120
So submit survey.

86
00:04:59,820 --> 00:05:04,260
I'm going to assume that's action creators going to be called with all the different values out of our

87
00:05:04,260 --> 00:05:05,550
form.

88
00:05:05,610 --> 00:05:08,220
I don't receive that as an argument called values.

89
00:05:08,700 --> 00:05:12,480
And then right now I don't really want to do anything with this whatsoever.

90
00:05:12,480 --> 00:05:18,100
However for redux to work correctly it's always going to expect us to return in action or extend me

91
00:05:18,180 --> 00:05:22,110
a object which is an action with a tight property.

92
00:05:22,110 --> 00:05:26,880
So again I don't have any preferences on what the thing is doing but just to make sure that redux doesn't

93
00:05:26,880 --> 00:05:33,360
crash I'm going to return an object with a type of submit survey like so.

94
00:05:33,360 --> 00:05:34,620
All right.

95
00:05:34,710 --> 00:05:36,450
So not doing anything with this right now.

96
00:05:36,480 --> 00:05:42,060
I just want to make sure that redux doesn't attempt to throw an error on us so we've now got our action

97
00:05:42,100 --> 00:05:43,050
creator put together.

98
00:05:43,120 --> 00:05:47,500
Let's flip back over to our survey form review component.

99
00:05:47,500 --> 00:05:52,660
We're going to import that our actions object at the top and then wire up to our component with the

100
00:05:52,660 --> 00:05:53,730
connect helper.

101
00:05:54,070 --> 00:05:57,280
So we'll say imports star as actions.

102
00:05:57,290 --> 00:06:03,520
The words just give me all my different auction creators from up one directory that takes me to components

103
00:06:04,090 --> 00:06:10,730
up another directory that takes me to source into actions and that's all we really need.

104
00:06:11,790 --> 00:06:16,860
OK so now the very last step down at the bottom will you will find our next statement.

105
00:06:16,990 --> 00:06:23,410
And then as the second argument will pass in our list of actions and then finally on our submit button

106
00:06:23,500 --> 00:06:28,930
right here we're going to add on in on click handler to make sure that new action creator is called

107
00:06:29,140 --> 00:06:31,540
with all of our different form inputs.

108
00:06:31,540 --> 00:06:38,420
So whenever a user clicks this thing called the action creator which we called members submit survey

109
00:06:40,460 --> 00:06:50,200
with our different form values which were passed into this component under the prompt name of form values.

110
00:06:50,200 --> 00:06:55,330
Now if we just leave our coding here just looking like this right here the instant that this component

111
00:06:55,330 --> 00:07:00,490
is rendered and the button tagged right here is inters executed by our javascript interpreter.

112
00:07:00,700 --> 00:07:05,110
If I leave this statement just like this right here submit survey will be called instantly.

113
00:07:05,140 --> 00:07:07,840
Because look at it it looks like a function call.

114
00:07:07,840 --> 00:07:12,910
So in order for this thing to be kind of delayed in execution in order to say don't execute this function

115
00:07:12,970 --> 00:07:17,820
until the user actually clicks on it we're going to wrap this with an arrow function like so.

116
00:07:18,160 --> 00:07:18,650
OK.

117
00:07:19,960 --> 00:07:24,940
Now one last thing a little bit of bookkeeping just to make sure we don't forget to do this very last

118
00:07:24,940 --> 00:07:30,550
critical step we are making use of the Smith survey action Creator that is being passed in as a prop

119
00:07:30,550 --> 00:07:35,450
to our component because we just wired all of our different action creators up in the K'NEX statement.

120
00:07:35,680 --> 00:07:40,480
So don't forget we need to make sure that we receive this as a prop into this component.

121
00:07:40,780 --> 00:07:46,480
It's going to scroll back up to the argument list right here and I'll make sure that I receive this

122
00:07:46,540 --> 00:07:52,950
as a prop called submit survey like so OK.

123
00:07:53,350 --> 00:07:55,400
So I think that we're finally ready to test this out.

124
00:07:55,480 --> 00:07:58,370
Now again I don't really expect anything to happen per se.

125
00:07:58,410 --> 00:08:03,040
We are not doing any large statements we're not actually creating any surveys really nothing whatsoever.

126
00:08:03,040 --> 00:08:08,600
But I just want to test it out and see that we're kind of at least somewhat going down the right path.

127
00:08:08,680 --> 00:08:10,330
So I'm back at our surveys.

128
00:08:10,330 --> 00:08:14,230
New It looks like my browser already automatically refresh.

129
00:08:14,440 --> 00:08:18,830
Put in my dummy data will hit next.

130
00:08:19,010 --> 00:08:20,940
My button click it.

131
00:08:21,050 --> 00:08:24,680
Yup nothing happens but at the end of the day that's actually kind of good because it means I'm not

132
00:08:24,680 --> 00:08:26,340
getting any error messages.

133
00:08:26,720 --> 00:08:27,220
OK.

134
00:08:27,320 --> 00:08:30,440
So we've got our button here put together.

135
00:08:30,440 --> 00:08:32,370
I think that we're going down the right path.

136
00:08:32,430 --> 00:08:36,140
There's just a couple of issues I want to point out to you right now to kind of give us a little bit

137
00:08:36,140 --> 00:08:40,880
of direction as we start to move forward from putting spun of course when we click on the button.

138
00:08:40,910 --> 00:08:45,200
We want to actually somehow save this to our back and server right like that totally makes sense.

139
00:08:45,200 --> 00:08:47,380
I want to save this to our server in some fashion.

140
00:08:47,390 --> 00:08:50,690
I want to send this e-mail out to all of our different users.

141
00:08:50,690 --> 00:08:56,440
So obviously we need to figure out what really truly happens when we click on send survey right here.

142
00:08:56,660 --> 00:09:01,280
But we don't only want to somehow create the survey we also want to make sure that whenever a user clicks

143
00:09:01,280 --> 00:09:06,710
on this button we actually also kick them back over toward dashboard route because obviously we don't

144
00:09:06,710 --> 00:09:10,310
want them to click the button and just kind of like sit here staring at the screen.

145
00:09:10,310 --> 00:09:15,440
We want to say oh OK we get it we are going to send your survey now and we want to kick our user back

146
00:09:15,440 --> 00:09:18,400
over to the dashboard wrapped finally.

147
00:09:18,500 --> 00:09:19,670
So that's kind of item too.

148
00:09:19,670 --> 00:09:26,390
Finally there's one third thing I want to point out to you right now if I go back and I hit cancel and

149
00:09:26,390 --> 00:09:31,040
then I click on the Add button down here again you'll notice that all of our different form inputs are

150
00:09:31,040 --> 00:09:33,260
still visible on the screen.

151
00:09:33,260 --> 00:09:36,250
Now maybe that's kind of like a neat feature for our user.

152
00:09:36,280 --> 00:09:41,620
You know because maybe they accidentally click cancel and they want to go back and it's like oh look

153
00:09:41,630 --> 00:09:43,160
all my work did not get dumped.

154
00:09:43,160 --> 00:09:44,900
It's all still here it's ready to be sent out.

155
00:09:44,900 --> 00:09:49,660
So kind of a neat feature but really I feel like that's kind of unexpected behavior.

156
00:09:49,880 --> 00:09:54,140
I mean if the user clicks cancel it means they want to say I don't want to do a survey at all.

157
00:09:54,140 --> 00:09:55,350
Just cancel it.

158
00:09:55,520 --> 00:09:56,140
Forget it.

159
00:09:56,150 --> 00:09:57,390
I don't want to deal with this.

160
00:09:57,560 --> 00:10:01,320
So when they click on out again it's just a little bit disconcerting.

161
00:10:01,340 --> 00:10:05,360
And I think that really we should make sure that we clear out all the different form inputs when the

162
00:10:05,360 --> 00:10:07,340
user comes back to the form.

163
00:10:07,350 --> 00:10:13,220
Remember all the different form values are only visible here because of that helper that we used inside

164
00:10:13,220 --> 00:10:15,470
of our survey form component.

165
00:10:15,470 --> 00:10:22,070
So here survey form G-S and at the very bottom where we wired up redux form we had said Do not destroy

166
00:10:22,070 --> 00:10:24,920
the form values whenever this component is unmounted.

167
00:10:24,920 --> 00:10:28,650
And so that's why all those values are being persisted right now he said very directly.

168
00:10:28,820 --> 00:10:32,670
Don't dump the form whenever we navigate away from this component.

169
00:10:32,690 --> 00:10:32,910
OK.

170
00:10:32,930 --> 00:10:38,330
So that's the three things really got to figure out what really happens when we submit the form how

171
00:10:38,340 --> 00:10:43,700
we navigate the user back to the dashboard and how we persist or me dump all these persisted values

172
00:10:43,940 --> 00:10:46,140
after user navigates away from the form.

173
00:10:46,160 --> 00:10:50,320
So let's start to think about how are going to tackle these three issues inside the next section.