1
00:00:00,859 --> 00:00:01,692
-: In the last section

2
00:00:01,692 --> 00:00:05,070
we finished a short diversion onto the topic of cors.

3
00:00:05,070 --> 00:00:07,020
Remember, cors is something that occurs

4
00:00:07,020 --> 00:00:08,520
when an AJAX requests,

5
00:00:08,520 --> 00:00:10,122
in the browser specifically,

6
00:00:10,122 --> 00:00:13,490
makes a request to some different domain,

7
00:00:13,490 --> 00:00:15,150
port or sub domain.

8
00:00:15,150 --> 00:00:17,370
Some different API server out there.

9
00:00:17,370 --> 00:00:20,280
We ran into it specifically because our app here

10
00:00:20,280 --> 00:00:24,690
our JavaScript application, is running on localhost:8080

11
00:00:24,690 --> 00:00:26,910
but we're trying to access an API server

12
00:00:26,910 --> 00:00:28,800
on localhost:3090.

13
00:00:28,800 --> 00:00:30,330
And so we got a cors error.

14
00:00:30,330 --> 00:00:33,243
We fixed it by enabling cors on our API server.

15
00:00:34,290 --> 00:00:36,150
So that was a little bit of a diversion

16
00:00:36,150 --> 00:00:37,740
completely unrelated

17
00:00:37,740 --> 00:00:39,930
to our sign-in user action creator here.

18
00:00:39,930 --> 00:00:41,850
So now we're again, changing gears

19
00:00:41,850 --> 00:00:44,730
coming back to the sign-in user action creator.

20
00:00:44,730 --> 00:00:47,610
As a reminder, we're using redux thunk here.

21
00:00:47,610 --> 00:00:49,290
So we're gonna return a function,

22
00:00:49,290 --> 00:00:52,200
instead of an action because we're returning a function,

23
00:00:52,200 --> 00:00:54,330
we get access to the dispatch method

24
00:00:54,330 --> 00:00:58,710
and that allows us to make some asynchronous decision making

25
00:00:58,710 --> 00:01:02,370
or request or anything asynchronous inside of this function.

26
00:01:02,370 --> 00:01:03,990
And then at any point in time

27
00:01:03,990 --> 00:01:06,510
we can use this dispatch method to just go ahead

28
00:01:06,510 --> 00:01:07,950
and dispatch an action.

29
00:01:07,950 --> 00:01:10,503
Just as we usually would from an action creator.

30
00:01:11,730 --> 00:01:14,070
So going back to what we were working on before,

31
00:01:14,070 --> 00:01:16,260
we now need to handle these two different cases.

32
00:01:16,260 --> 00:01:19,500
We need to handle the case in which a request is successful

33
00:01:19,500 --> 00:01:22,080
and the case in which a request is failed

34
00:01:22,080 --> 00:01:24,930
or there's some sort of error attached to it.

35
00:01:24,930 --> 00:01:26,220
So we really need some sort of like,

36
00:01:26,220 --> 00:01:28,053
kind of if statement here, right?

37
00:01:29,130 --> 00:01:30,720
But we have an AJAX request

38
00:01:30,720 --> 00:01:32,700
which is asynchronous in nature.

39
00:01:32,700 --> 00:01:34,830
So rather than using an if statement

40
00:01:34,830 --> 00:01:37,500
we're gonna make use of a promise here.

41
00:01:37,500 --> 00:01:40,020
Remember, axios always returns a promise,

42
00:01:40,020 --> 00:01:42,360
whenever we make a request

43
00:01:42,360 --> 00:01:45,240
I'm gonna remove the semicolon on the end of the line here.

44
00:01:45,240 --> 00:01:46,590
And then on a new line

45
00:01:46,590 --> 00:01:51,090
I'm gonna add in a .then and a .catch.

46
00:01:51,090 --> 00:01:53,790
So these are two kind of constructs

47
00:01:53,790 --> 00:01:55,860
coming out of how a promises work.

48
00:01:55,860 --> 00:01:57,240
This is not necessarily related

49
00:01:57,240 --> 00:02:00,720
directly to axios, redux or react.

50
00:02:00,720 --> 00:02:03,450
These are just JavaScript promises.

51
00:02:03,450 --> 00:02:05,940
If you're not familiar with then or catch

52
00:02:05,940 --> 00:02:08,009
I recommend you do a little bit of research

53
00:02:08,009 --> 00:02:10,710
on your own to figure out exactly how they're working.

54
00:02:11,610 --> 00:02:15,420
So in the success case, which would be the .then,

55
00:02:15,420 --> 00:02:17,070
we want to basically

56
00:02:17,070 --> 00:02:18,720
take care of these three things right here.

57
00:02:18,720 --> 00:02:20,700
We want to update our state to indicate

58
00:02:20,700 --> 00:02:22,620
that the user is authenticated.

59
00:02:22,620 --> 00:02:26,220
We wanna save the token and we want to redirect our user

60
00:02:26,220 --> 00:02:28,833
to the route specifically feature.

61
00:02:30,510 --> 00:02:33,750
So when, when we hit this .then case

62
00:02:33,750 --> 00:02:36,630
it's gonna be called with our response from the API.

63
00:02:36,630 --> 00:02:38,670
And inside of here is where we'll take care

64
00:02:38,670 --> 00:02:40,440
of these three different cases

65
00:02:40,440 --> 00:02:42,210
or these three different actions we want to

66
00:02:42,210 --> 00:02:43,890
kind of accomplish.

67
00:02:43,890 --> 00:02:45,480
So gonna move our comment in there

68
00:02:45,480 --> 00:02:47,130
and then as long as we're doing it.

69
00:02:47,130 --> 00:02:50,580
I'll also move our comment for the fail case

70
00:02:50,580 --> 00:02:51,903
into the catch as well.

71
00:02:56,400 --> 00:02:59,100
So now when we make our request, if it's successful

72
00:02:59,100 --> 00:03:00,360
we're gonna hit the .then

73
00:03:00,360 --> 00:03:02,400
and we're gonna run this inner function.

74
00:03:02,400 --> 00:03:05,700
If our request fails, excuse me

75
00:03:05,700 --> 00:03:09,090
if our request fails, we're gonna hit the .catch case.

76
00:03:09,090 --> 00:03:11,430
So out of the success case here,

77
00:03:11,430 --> 00:03:12,263
out of the like

78
00:03:12,263 --> 00:03:14,220
the kind of the good things we wanna have happen ,

79
00:03:14,220 --> 00:03:16,500
let's take care of the bottom one first.

80
00:03:16,500 --> 00:03:19,293
We want to redirect our user to the route feature.

81
00:03:20,520 --> 00:03:21,870
So when I say redirect here

82
00:03:21,870 --> 00:03:25,170
I mean specifically redirect using react-router.

83
00:03:25,170 --> 00:03:26,010
We don't wanna like do

84
00:03:26,010 --> 00:03:28,500
a total reload of the page or anything like that.

85
00:03:28,500 --> 00:03:29,705
We wanna still do

86
00:03:29,705 --> 00:03:32,820
JavaScripts single page application navigation.

87
00:03:32,820 --> 00:03:34,830
So we want to swap out the views

88
00:03:34,830 --> 00:03:36,380
that are visible on the screen.

89
00:03:37,440 --> 00:03:38,370
All of the navigation

90
00:03:38,370 --> 00:03:39,240
that we've done inside of

91
00:03:39,240 --> 00:03:41,640
our react-router application so far

92
00:03:41,640 --> 00:03:43,770
has been done using the link tag.

93
00:03:43,770 --> 00:03:45,990
Remember the link tag? We've been using link

94
00:03:45,990 --> 00:03:48,120
which is a component from react-router,

95
00:03:48,120 --> 00:03:49,770
it produces an anchor tag

96
00:03:49,770 --> 00:03:51,510
and then when someone clicks on a link,

97
00:03:51,510 --> 00:03:53,043
they get navigated somewhere.

98
00:03:54,060 --> 00:03:56,490
And so this is something that's completely different

99
00:03:56,490 --> 00:03:57,840
or I shouldn't say completely different

100
00:03:57,840 --> 00:03:59,370
but a little bit different in nature.

101
00:03:59,370 --> 00:04:01,530
We still wanna navigate someone somewhere

102
00:04:01,530 --> 00:04:03,169
but we don't want to depend upon the user

103
00:04:03,169 --> 00:04:05,850
clicking a link to do it, right.

104
00:04:05,850 --> 00:04:07,980
Keep in mind that when a user is signing up

105
00:04:07,980 --> 00:04:11,130
or excuse me, signing in, we don't want them to, you know

106
00:04:11,130 --> 00:04:12,420
the instant they click a button

107
00:04:12,420 --> 00:04:13,860
we don't wanna navigate them somewhere.

108
00:04:13,860 --> 00:04:16,230
We want to wait for the request to finish

109
00:04:16,230 --> 00:04:17,730
and then navigate them.

110
00:04:17,730 --> 00:04:21,510
So this is what we would refer to as programmatic navigation

111
00:04:21,510 --> 00:04:24,570
or navigation that we are gonna trigger with our code

112
00:04:24,570 --> 00:04:27,933
as opposed to by a user kind of clicking on something.

113
00:04:29,490 --> 00:04:31,290
So to do programmatic navigation,

114
00:04:31,290 --> 00:04:35,430
react-router exposes a pretty simple little API.

115
00:04:35,430 --> 00:04:38,550
We're going to add an import statement at the top

116
00:04:38,550 --> 00:04:43,550
and we're going to import browserHistory from react-router.

117
00:04:45,090 --> 00:04:47,520
Remember, the purpose of browser history right here

118
00:04:47,520 --> 00:04:52,320
is to communicate information about the URL to react-router.

119
00:04:52,320 --> 00:04:54,150
We can also use browser history

120
00:04:54,150 --> 00:04:55,710
in kind of the reverse functionality.

121
00:04:55,710 --> 00:04:58,860
We can use it to make changes to the URL as well.

122
00:04:58,860 --> 00:05:00,960
And so that's exactly how we're going to do

123
00:05:00,960 --> 00:05:03,690
our programmatic navigation here.

124
00:05:03,690 --> 00:05:05,310
The very bottom of this function,

125
00:05:05,310 --> 00:05:07,740
I'm gonna add browserHistory.push,

126
00:05:12,270 --> 00:05:13,890
and we're gonna push the user straight

127
00:05:13,890 --> 00:05:17,130
to the feature endpoint.

128
00:05:17,130 --> 00:05:18,270
And so that's gonna accomplish

129
00:05:18,270 --> 00:05:20,940
this kind of step 3 thing right here.

130
00:05:20,940 --> 00:05:24,450
Whenever a user successfully submits an email and password

131
00:05:24,450 --> 00:05:27,000
and they are authenticated and we get a token back,

132
00:05:27,000 --> 00:05:29,550
we want to just push that user to feature,

133
00:05:29,550 --> 00:05:33,003
just send them off to the feature route.

134
00:05:33,870 --> 00:05:36,210
So let's give this a shot at in the browser.

135
00:05:36,210 --> 00:05:38,400
I'm gonna flip back over to Chrome.

136
00:05:38,400 --> 00:05:40,083
I'm gonna refresh the page.

137
00:05:41,760 --> 00:05:46,650
I'm gonna enter an email and password that I know worked

138
00:05:46,650 --> 00:05:49,440
because we set these up in the last section.

139
00:05:49,440 --> 00:05:52,680
I'll sign in and you'll notice

140
00:05:52,680 --> 00:05:55,740
that we don't quite have anything popping up just yet.

141
00:05:55,740 --> 00:05:58,050
Let's take a look at our...

142
00:05:58,050 --> 00:06:00,510
Looks like our bundle is still valid.

143
00:06:00,510 --> 00:06:01,590
Ah, there it is.

144
00:06:01,590 --> 00:06:03,000
You know what, I'm not gonna lie,

145
00:06:03,000 --> 00:06:05,220
I did this several times in a row now.

146
00:06:05,220 --> 00:06:09,060
BrowserHistory, not browerHistory (chuckles)

147
00:06:09,060 --> 00:06:09,893
Okay!

148
00:06:09,893 --> 00:06:10,911
BrowserHistory

149
00:06:10,911 --> 00:06:12,720
BrowserHistory.push feature.

150
00:06:12,720 --> 00:06:14,490
Let's give this another shot.

151
00:06:14,490 --> 00:06:15,670
I'm gonna refresh again

152
00:06:20,610 --> 00:06:23,340
And, alright, so you'll notice that

153
00:06:23,340 --> 00:06:26,040
the URL in fact did update to feature

154
00:06:26,040 --> 00:06:28,710
and it only did so when the request was complete.

155
00:06:28,710 --> 00:06:30,480
Let's try this again.

156
00:06:30,480 --> 00:06:32,850
But this time, instead of putting,

157
00:06:32,850 --> 00:06:35,190
I need to manually go back to sign in for the route.

158
00:06:35,190 --> 00:06:37,470
So I'm gonna go back to sign in.

159
00:06:37,470 --> 00:06:38,730
There we go.

160
00:06:38,730 --> 00:06:41,763
But this time I'm gonna put in a bad password.

161
00:06:44,340 --> 00:06:47,820
And so now we got an error back from our API

162
00:06:47,820 --> 00:06:49,740
which means we've did not hit the then case.

163
00:06:49,740 --> 00:06:51,510
We hit the catch case instead.

164
00:06:51,510 --> 00:06:55,260
So we didn't hit that browserHistory push.

165
00:06:55,260 --> 00:06:58,320
We instead hit our catch case right here.

166
00:06:58,320 --> 00:06:59,153
So this is looking good.

167
00:06:59,153 --> 00:07:01,050
We're definitely going down the right road.

168
00:07:01,050 --> 00:07:02,310
Let's continue the next section

169
00:07:02,310 --> 00:07:04,320
where we will start working on the other two things

170
00:07:04,320 --> 00:07:06,720
we need to do, which is to update our state

171
00:07:06,720 --> 00:07:10,020
and save the JWT token that we get from the back end.

172
00:07:10,020 --> 00:07:10,970
I'll see you there.