1
00:00:00,630 --> 00:00:02,940
-: In the last section, we attempted to create an account

2
00:00:02,940 --> 00:00:05,640
but we, we didn't really see any AJAX requests

3
00:00:05,640 --> 00:00:07,080
come across the wire here.

4
00:00:07,080 --> 00:00:08,430
And if you were testing at home,

5
00:00:08,430 --> 00:00:11,430
you probably saw an error message that looks something like,

6
00:00:13,470 --> 00:00:16,230
'this.props.signupUser is not a function'.

7
00:00:16,230 --> 00:00:18,960
And so that means inside of handles Form Submit.

8
00:00:18,960 --> 00:00:21,330
We tried calling 'signupUser' right here,

9
00:00:21,330 --> 00:00:22,680
but we got a big error message saying,

10
00:00:22,680 --> 00:00:24,390
'Hey this thing isn't a function.'

11
00:00:24,390 --> 00:00:26,610
So I think that we made a little bit of a mistake,

12
00:00:26,610 --> 00:00:28,230
down at the very bottom of our file.

13
00:00:28,230 --> 00:00:30,810
At the very top, we imported our actions,

14
00:00:30,810 --> 00:00:32,220
but we never actually added them

15
00:00:32,220 --> 00:00:34,560
to our reduxForm helper here.

16
00:00:34,560 --> 00:00:37,050
So remember when we're using the reduxForm helper,

17
00:00:37,050 --> 00:00:40,500
we add our actions as the third argument.

18
00:00:40,500 --> 00:00:43,680
So let's now give this another shot inside the browser.

19
00:00:43,680 --> 00:00:46,473
I'm gonna say test123456,

20
00:00:47,490 --> 00:00:49,290
password and password,

21
00:00:49,290 --> 00:00:50,370
sign up.

22
00:00:50,370 --> 00:00:52,620
And it looks like we successfully made our request

23
00:00:52,620 --> 00:00:54,300
and got a token from our backend.

24
00:00:54,300 --> 00:00:55,140
Awesome.

25
00:00:55,140 --> 00:00:56,430
So this is looking pretty good.

26
00:00:56,430 --> 00:00:58,290
Let's do something a little funny now.

27
00:00:58,290 --> 00:01:00,840
And I just successfully made this account.

28
00:01:00,840 --> 00:01:01,673
Let's see what happens

29
00:01:01,673 --> 00:01:04,410
when I try to make another account again.

30
00:01:04,410 --> 00:01:07,470
Okay, so you'll see now I get a 422 error here,

31
00:01:07,470 --> 00:01:10,020
which means unprocessable entity, it means,

32
00:01:10,020 --> 00:01:11,940
hey the server got your request,

33
00:01:11,940 --> 00:01:14,160
but wasn't actually able to create a record,

34
00:01:14,160 --> 00:01:18,030
because the request that you made doesn't really make sense.

35
00:01:18,030 --> 00:01:19,710
So if we click on the request itself

36
00:01:19,710 --> 00:01:22,740
we get an error back that says email is already in use.

37
00:01:22,740 --> 00:01:24,870
Which is exactly what we would expect coming

38
00:01:24,870 --> 00:01:26,400
from our backend.

39
00:01:26,400 --> 00:01:27,390
So this is looking pretty good.

40
00:01:27,390 --> 00:01:29,130
We can now make use of this error message

41
00:01:29,130 --> 00:01:30,380
when it comes down to it.

42
00:01:33,480 --> 00:01:36,240
So I'm gonna flip back over to our action creator.

43
00:01:36,240 --> 00:01:38,340
We're definitely making the request successfully here.

44
00:01:38,340 --> 00:01:39,450
We're seeing it come across.

45
00:01:39,450 --> 00:01:42,510
So let's implement very similar and probably identical

46
00:01:42,510 --> 00:01:45,660
logic to our sign in helper.

47
00:01:45,660 --> 00:01:47,280
When the request is successful,

48
00:01:47,280 --> 00:01:51,810
we want to change our authenticated piece of state to true,

49
00:01:51,810 --> 00:01:53,580
we want to save our token,

50
00:01:53,580 --> 00:01:55,623
and we want to redirect our user.

51
00:01:57,060 --> 00:01:59,673
So in the .then case,

52
00:02:00,720 --> 00:02:02,673
we're gonna get a response back.

53
00:02:04,080 --> 00:02:06,330
And first I want to,

54
00:02:06,330 --> 00:02:07,950
let's just take the same order here.

55
00:02:07,950 --> 00:02:11,910
So the first thing I'm going to do is dispatch a new action.

56
00:02:11,910 --> 00:02:13,270
So I'll dispatch

57
00:02:14,520 --> 00:02:16,974
an action of type:

58
00:02:16,974 --> 00:02:17,940
AUTH_USER.

59
00:02:17,940 --> 00:02:20,640
So that's gonna flip my authenticated piece of state

60
00:02:20,640 --> 00:02:22,290
to true.

61
00:02:22,290 --> 00:02:24,633
I want to update my token,

62
00:02:25,650 --> 00:02:28,050
localStorage.set

63
00:02:28,050 --> 00:02:28,883
Item

64
00:02:28,883 --> 00:02:30,240
token,

65
00:02:30,240 --> 00:02:32,643
to response.data.token.

66
00:02:33,540 --> 00:02:36,060
And finally, I want to redirect my user.

67
00:02:36,060 --> 00:02:38,470
So again, I'll say browserHistory

68
00:02:39,667 --> 00:02:40,500
.push

69
00:02:42,000 --> 00:02:42,833
feature.

70
00:02:45,000 --> 00:02:47,100
Now we need to consider the fail case here.

71
00:02:47,100 --> 00:02:49,800
The case in which, hey, like you made the request

72
00:02:49,800 --> 00:02:51,630
but maybe the emails already in use,

73
00:02:51,630 --> 00:02:55,320
or who knows what else could have possibly gone wrong here.

74
00:02:55,320 --> 00:02:58,560
So we'll also add in our .catch case,

75
00:02:58,560 --> 00:03:01,260
where we will take our response.

76
00:03:01,260 --> 00:03:04,623
And in this case, we'll dispatch authError.

77
00:03:06,389 --> 00:03:08,190
Remember, authError is an action creator.

78
00:03:08,190 --> 00:03:10,050
All we do is we pass it a string

79
00:03:10,050 --> 00:03:11,820
and that's going to send

80
00:03:11,820 --> 00:03:15,210
an error message down to all of our different components.

81
00:03:15,210 --> 00:03:16,043
And so in this case,

82
00:03:16,043 --> 00:03:17,640
we want a very particular error message.

83
00:03:17,640 --> 00:03:19,560
We want the one coming off the response here.

84
00:03:19,560 --> 00:03:21,817
So let's say response

85
00:03:21,817 --> 00:03:22,650
.data

86
00:03:22,650 --> 00:03:23,483
.error.

87
00:03:26,220 --> 00:03:29,610
All right, let's kind of take this error handling logic

88
00:03:29,610 --> 00:03:31,410
all the way through to conclusion.

89
00:03:31,410 --> 00:03:34,050
If you recall, inside of our AUTH reducer,

90
00:03:34,050 --> 00:03:36,660
we are already picking up this AUTH_ERROR message

91
00:03:36,660 --> 00:03:37,493
right here.

92
00:03:37,493 --> 00:03:39,780
So error is action.payload.

93
00:03:39,780 --> 00:03:42,390
That means inside of our signup component,

94
00:03:42,390 --> 00:03:45,930
we should be able to very similar, in a very similar fashion

95
00:03:45,930 --> 00:03:47,400
to our sign-in component,

96
00:03:47,400 --> 00:03:50,070
we should be able to create a map state to,

97
00:03:50,070 --> 00:03:51,720
map state to props function,

98
00:03:51,720 --> 00:03:53,730
which is just gonna pull off that error message,

99
00:03:53,730 --> 00:03:56,253
and display it to the user if one exists.

100
00:03:57,510 --> 00:03:59,470
So we will create a new function

101
00:04:00,930 --> 00:04:01,763
mapStateToProps,

102
00:04:02,970 --> 00:04:05,250
it'll take our state.

103
00:04:05,250 --> 00:04:07,330
And then from here we will return

104
00:04:09,360 --> 00:04:11,430
an errorMessage,

105
00:04:11,430 --> 00:04:13,713
state.auth.error.

106
00:04:15,780 --> 00:04:18,540
Now inside of our component, or at least

107
00:04:18,540 --> 00:04:19,980
in the Redux Form helper,

108
00:04:19,980 --> 00:04:22,890
we'll make sure to add mapStateToProps.

109
00:04:22,890 --> 00:04:25,290
'Cause I've been forgetting this left and right.

110
00:04:26,130 --> 00:04:28,170
Now, inside of our actual component,

111
00:04:28,170 --> 00:04:30,540
we should have, have access to

112
00:04:30,540 --> 00:04:33,030
this piece of state or this prop, excuse me,

113
00:04:33,030 --> 00:04:35,403
called this.props.errorMessage.

114
00:04:36,420 --> 00:04:38,130
And so just right above the button

115
00:04:38,130 --> 00:04:40,410
I think would be a good place to show this.

116
00:04:40,410 --> 00:04:42,480
We're gonna follow a very same pattern that we used

117
00:04:42,480 --> 00:04:43,710
in the sign in component.

118
00:04:43,710 --> 00:04:45,450
And so right about the button I'll say

119
00:04:45,450 --> 00:04:47,580
this.render

120
00:04:47,580 --> 00:04:48,600
Alert,

121
00:04:48,600 --> 00:04:51,840
and make sure to invoke this helper.

122
00:04:51,840 --> 00:04:54,190
And then we'll add a little render helper here,

123
00:04:55,530 --> 00:04:56,850
renderAlert.

124
00:04:56,850 --> 00:04:59,073
And I'll say, if this.props.errorMessage,

125
00:05:01,860 --> 00:05:03,040
then return

126
00:05:04,770 --> 00:05:06,303
a div with className,

127
00:05:07,454 --> 00:05:09,120
alert

128
00:05:09,120 --> 00:05:10,293
alert-danger.

129
00:05:12,090 --> 00:05:14,460
And just identical to the sign in

130
00:05:14,460 --> 00:05:15,970
we'll add a strong tag

131
00:05:19,080 --> 00:05:21,903
that should say 'Oops!'

132
00:05:21,903 --> 00:05:24,503
And this.props.

133
00:05:24,503 --> 00:05:25,586
errorMessage.

134
00:05:27,360 --> 00:05:29,850
Cool. So let's save this and give this all a shot.

135
00:05:29,850 --> 00:05:31,800
So at this point in time, we've added in some

136
00:05:31,800 --> 00:05:34,440
handling for any errors coming from the back end.

137
00:05:34,440 --> 00:05:37,770
And if the create account request is successful

138
00:05:37,770 --> 00:05:40,590
we should also see a redirect

139
00:05:40,590 --> 00:05:43,863
over to the feature route that we've declared.

140
00:05:45,270 --> 00:05:46,773
So let's do a refresh.

141
00:05:48,030 --> 00:05:49,830
Looks like I probably have a typo somewhere.

142
00:05:49,830 --> 00:05:51,670
I'm gonna flip over to my console

143
00:05:53,400 --> 00:05:55,650
Scroll up, see the error, and it looks

144
00:05:55,650 --> 00:05:58,620
like I accidentally put an L instead of a semicolon.

145
00:05:58,620 --> 00:06:00,943
I'll tell you, talking and typing is

146
00:06:00,943 --> 00:06:03,120
harder than you might think it is.

147
00:06:03,120 --> 00:06:04,150
So inside of

148
00:06:05,490 --> 00:06:07,670
sign up component down at

149
00:06:07,670 --> 00:06:08,730
mapStateToProps,

150
00:06:08,730 --> 00:06:11,530
I've got an L here, I gonna replace it with a semicolon.

151
00:06:13,740 --> 00:06:15,450
And now it looks like the bundle is valid.

152
00:06:15,450 --> 00:06:17,800
So we can give this a shout out in the browser.

153
00:06:18,900 --> 00:06:19,733
So let's handle,

154
00:06:19,733 --> 00:06:21,180
let's see what the error case looks like first.

155
00:06:21,180 --> 00:06:23,160
I'm gonna put in password, or excuse me,

156
00:06:23,160 --> 00:06:25,260
a test123456.

157
00:06:25,260 --> 00:06:28,440
So I just created an account with this exact same email.

158
00:06:28,440 --> 00:06:30,780
So I'm going to expect to see a red error message here

159
00:06:30,780 --> 00:06:35,780
that says, 'Hey, sorry, but this email is already in use.'

160
00:06:35,790 --> 00:06:37,710
So I'll click oops or I'll click sign up

161
00:06:37,710 --> 00:06:39,450
and I see, 'Oops, email already in use.'

162
00:06:39,450 --> 00:06:40,503
That's perfect.

163
00:06:41,700 --> 00:06:43,140
I'm going to update the email.

164
00:06:43,140 --> 00:06:45,420
So I'm just gonna add in a seven now.

165
00:06:45,420 --> 00:06:47,460
I'll click sign up.

166
00:06:47,460 --> 00:06:49,980
It looks like the request was successfully made.

167
00:06:49,980 --> 00:06:51,810
and I got my redirect to feature.

168
00:06:51,810 --> 00:06:54,810
Now again, feature is not actually a route

169
00:06:54,810 --> 00:06:56,700
that we've defined just yet.

170
00:06:56,700 --> 00:06:58,710
So we'll need to take care of that.

171
00:06:58,710 --> 00:07:00,540
One thing that you might notice,

172
00:07:00,540 --> 00:07:01,500
inside of our application,

173
00:07:01,500 --> 00:07:03,120
is we're not really ever resetting

174
00:07:03,120 --> 00:07:05,310
these error messages though.

175
00:07:05,310 --> 00:07:06,930
We, whenever we get an error message,

176
00:07:06,930 --> 00:07:09,150
and we set it on our AUTH reducer,

177
00:07:09,150 --> 00:07:12,210
we never actually clear the error message out.

178
00:07:12,210 --> 00:07:14,190
So one way for us to kind of address that,

179
00:07:14,190 --> 00:07:15,510
kind of oddity,

180
00:07:15,510 --> 00:07:19,410
is if we go back over to our error AUTH reducer,

181
00:07:19,410 --> 00:07:22,470
we'll say that if a user successfully authenticates

182
00:07:22,470 --> 00:07:23,430
or logs out,

183
00:07:23,430 --> 00:07:26,430
we should really clear any outstanding errors.

184
00:07:26,430 --> 00:07:28,050
'Cause we're only really showing errors when

185
00:07:28,050 --> 00:07:31,560
a user fails to sign in or sign up right now.

186
00:07:31,560 --> 00:07:34,620
So whenever a user successfully signs in,

187
00:07:34,620 --> 00:07:36,930
we can just reset this error

188
00:07:36,930 --> 00:07:37,980
piece of state right here

189
00:07:37,980 --> 00:07:39,210
to empty string, which means,

190
00:07:39,210 --> 00:07:41,640
hey they don't really have an error at this point in time.

191
00:07:41,640 --> 00:07:42,690
Don't worry about it.

192
00:07:44,280 --> 00:07:46,980
Let's give this a shot out real quick in the browser.

193
00:07:46,980 --> 00:07:48,453
I'm gonna go back to sign up.

194
00:07:49,680 --> 00:07:54,210
I'm gonna create another account that's already been in use.

195
00:07:54,210 --> 00:07:55,890
I'm gonna click sign up.

196
00:07:55,890 --> 00:07:59,280
Okay. And then I'll make my email unique.

197
00:07:59,280 --> 00:08:00,660
I'll sign up again

198
00:08:00,660 --> 00:08:02,550
and we got the redirect to feature.

199
00:08:02,550 --> 00:08:04,830
And you'll also notice that the error message went away.

200
00:08:04,830 --> 00:08:07,530
Which is definitely the behavior that we would expect here.

201
00:08:07,530 --> 00:08:09,810
Keep in mind that when a user successfully signs in

202
00:08:09,810 --> 00:08:11,910
we don't really expect them to immediately come back

203
00:08:11,910 --> 00:08:13,950
to the sign up or sign in forms.

204
00:08:13,950 --> 00:08:15,930
But definitely I can imagine in the future

205
00:08:15,930 --> 00:08:19,110
perhaps some interesting series of clicks

206
00:08:19,110 --> 00:08:21,420
in which a user gets an error message here

207
00:08:21,420 --> 00:08:23,280
then somehow navigates back to the form

208
00:08:23,280 --> 00:08:25,590
and still sees the error message there from

209
00:08:25,590 --> 00:08:27,720
when they had initially tried to sign in or sign up.

210
00:08:27,720 --> 00:08:29,760
Which is really unexpected behavior.

211
00:08:29,760 --> 00:08:31,650
So this is a little bit more predictable

212
00:08:31,650 --> 00:08:33,303
probably what the user expects.

213
00:08:34,559 --> 00:08:36,809
So our application is looking fantastic now.

214
00:08:36,809 --> 00:08:38,610
I think one of the last things we need to do

215
00:08:38,610 --> 00:08:42,150
is actually implement this feature route right here.

216
00:08:42,150 --> 00:08:43,980
So at up to this point in time

217
00:08:43,980 --> 00:08:46,080
we've been using this kind of dummy route where

218
00:08:46,080 --> 00:08:48,120
feature has never been actually declared.

219
00:08:48,120 --> 00:08:48,990
Let's fix it up.

220
00:08:48,990 --> 00:08:53,130
So this feature actually maps to a usable route.

221
00:08:53,130 --> 00:08:55,530
Let's take care of that inside the next section.