1
00:00:00,970 --> 00:00:06,480
Our blessing to do is log in form as show a spinner to our user so I'm sure that feels familiar and

2
00:00:06,500 --> 00:00:10,150
might feel like to do is even We're doing a lot of the same stuff twice over.

3
00:00:10,320 --> 00:00:15,190
But to be honest with you I'm really happy that we ended up rebuilding in log in form with redox.

4
00:00:15,210 --> 00:00:20,550
After doing three act it really helps you get a feel for how each library behaves.

5
00:00:20,550 --> 00:00:26,060
Anyways back to the task at hand showing a spinner on our logon form is going to be something would

6
00:00:26,070 --> 00:00:28,680
kind of cool you know deceptively simple.

7
00:00:28,680 --> 00:00:32,360
In other words we really don't need to over think the same.

8
00:00:33,120 --> 00:00:41,700
As soon as our logon user action creator is called We will want to dispatch an action that somehow says

9
00:00:41,700 --> 00:00:43,330
hey start spinner up please.

10
00:00:43,560 --> 00:00:50,950
And then whenever we see a success or failure type come along that means OK well the authentication

11
00:00:50,950 --> 00:00:53,670
Quest is complete we should resolve the spinner.

12
00:00:53,700 --> 00:00:57,590
Or C we should turn off that loading flag and not show the spinner anymore.

13
00:00:57,720 --> 00:01:05,130
So we're just going to depend upon the log in success log in user fail and a new action type that will

14
00:01:05,130 --> 00:01:10,010
dispatch called log in user to figure out when the spinner should be running.

15
00:01:10,020 --> 00:01:11,270
So let's give it a shot.

16
00:01:11,580 --> 00:01:20,770
We'll start off by defining a new type inside of our type's file so my type's file add on export Konst

17
00:01:21,340 --> 00:01:23,350
logon user.

18
00:01:24,460 --> 00:01:29,260
So if you're getting a reasonable sense of the different action types that it might create for any type

19
00:01:29,260 --> 00:01:35,080
of Ajax requests or any type of long or any requests that might fail or generally start off with just

20
00:01:35,260 --> 00:01:41,130
logging user or you know kind of whatever the very base action is where ever I'm about to start.

21
00:01:41,440 --> 00:01:48,940
And then for the success case and fail case I'll add on to additional types that just append success

22
00:01:49,090 --> 00:01:49,700
and fail.

23
00:01:49,750 --> 00:01:54,520
And so that makes that makes it really easy for me to understand like OK these are all related to logging

24
00:01:54,520 --> 00:01:58,410
in the user and the different states that are social with it.

25
00:01:58,590 --> 00:02:04,860
If I was can make any change here whatsoever I might do something like you know maybe start maybe.

26
00:02:04,990 --> 00:02:06,510
That definitely makes sense.

27
00:02:06,520 --> 00:02:10,390
It's really up to personal preference whether or not you can be really explicit about this first kind

28
00:02:10,390 --> 00:02:13,570
of starting action type you're so totally up to you.

29
00:02:13,570 --> 00:02:17,160
I could definitely see a case for putting on like log in user start there.

30
00:02:19,080 --> 00:02:19,460
All right.

31
00:02:19,460 --> 00:02:23,040
Back over my action creator here is logging user.

32
00:02:23,210 --> 00:02:30,550
I'm going to immediately dispatch an action of type log in user whenever this action crater's called

33
00:02:30,840 --> 00:02:32,550
will call dispatch.

34
00:02:33,390 --> 00:02:41,150
With an action of type in user now we still need to import this.

35
00:02:41,200 --> 00:02:43,390
We don't have the type inside this file just yet.

36
00:02:43,390 --> 00:02:49,810
So I will scroll back up to the top and I'll make sure that I also include this action type at the top

37
00:02:49,820 --> 00:02:51,370
in the import statement.

38
00:02:51,950 --> 00:02:54,970
OK so now this is really starting to meet our requirements.

39
00:02:54,970 --> 00:03:01,140
The instant that we try to log user in we're going to dispatch an action of type logon user.

40
00:03:01,390 --> 00:03:07,800
Then whenever the request succeeds or fails we will dispatch the success or fail actions.

41
00:03:07,810 --> 00:03:14,020
Well one thing I really want to point out in particular is that we are going to use this logon user

42
00:03:14,020 --> 00:03:15,720
typewrite here to start our spinner.

43
00:03:15,730 --> 00:03:20,860
And so you might be a little bit tempted to do something like you know an action of tide start spinner

44
00:03:20,860 --> 00:03:24,880
or something like that and I would really encourage you not to go down that path.

45
00:03:24,880 --> 00:03:31,840
The reason for which is that at some future point in time when you are coming back to this code after

46
00:03:31,840 --> 00:03:38,590
some long break or whatever it might be you see a action of type like start spinner when you don't quite

47
00:03:38,590 --> 00:03:40,820
know when that thing is going to be dispatched right.

48
00:03:40,840 --> 00:03:45,710
You don't really quite know by just looking at the actions name you know what it might do.

49
00:03:45,730 --> 00:03:49,780
You know you might you it gives you a reason or idea that's going to serve the spinner but you don't

50
00:03:49,780 --> 00:03:51,620
really know when it's going to be dispatched.

51
00:03:51,700 --> 00:03:53,840
So it's something like logging user it's very clear.

52
00:03:53,860 --> 00:04:00,010
OK this is going to dispatch whenever I'm about to log in the User very clear what it does is a little

53
00:04:00,010 --> 00:04:04,210
bit more of a mystery but I would rather have to figure that out than have to figure out when the thing

54
00:04:04,210 --> 00:04:06,660
gets called.

55
00:04:06,740 --> 00:04:09,440
All right so now we can flip over to our producer.

56
00:04:09,760 --> 00:04:16,580
I'm going to pull in my log in user type and then we'll add on another case statement to handle this

57
00:04:16,840 --> 00:04:17,570
type.

58
00:04:17,920 --> 00:04:30,260
So case log in user so now inside of here I want to take all of my existing state and I won't want to

59
00:04:30,260 --> 00:04:34,020
set the loading flag to true.

60
00:04:34,040 --> 00:04:35,290
So we don't have one just yet.

61
00:04:35,300 --> 00:04:37,030
Let's initialises property.

62
00:04:37,220 --> 00:04:40,310
Again we don't have to do this.

63
00:04:40,550 --> 00:04:44,240
I'm choosing to do it so that any engineer in the future is going to have a reasonable idea of what

64
00:04:44,240 --> 00:04:48,470
all the different pieces of state are inside this reducer.

65
00:04:48,480 --> 00:04:50,390
So now we've got logged in user loading.

66
00:04:50,390 --> 00:04:50,890
True.

67
00:04:51,050 --> 00:04:54,560
Another thing that I'm going to decide to put in here and this is kind of you know I'm just thinking

68
00:04:54,620 --> 00:04:58,140
ahead for my for my program for my app here.

69
00:04:58,160 --> 00:05:04,250
Chances are that whenever I start up the log in process if there's any existing error message I might

70
00:05:04,250 --> 00:05:05,870
want to zero that out as well.

71
00:05:05,900 --> 00:05:09,260
You know I might want to clear out the error message and this makes a lot of sense because if I attempt

72
00:05:09,260 --> 00:05:15,010
to log in once and I fail and then I'd say like you know change my password again and I hit log in again.

73
00:05:15,140 --> 00:05:17,190
I want the user to understand it like you.

74
00:05:17,240 --> 00:05:17,500
OK.

75
00:05:17,510 --> 00:05:20,220
Yes we understand that you are trying to log in again.

76
00:05:20,270 --> 00:05:24,330
We will clear that error message because otherwise you're going to think that your app is just you know

77
00:05:24,350 --> 00:05:25,900
doing nothing whatsoever.

78
00:05:27,820 --> 00:05:30,910
All right so now we're going to get this loading true flag.

79
00:05:31,240 --> 00:05:37,690
We will also make sure that we clear loading true whenever we hit the success case or the fail case.

80
00:05:37,690 --> 00:05:44,230
So whenever we hit success on a flip leading to false and whenever we hit the fail case I'm also going

81
00:05:44,230 --> 00:05:46,870
to change loading to false as well.

82
00:05:46,870 --> 00:05:50,530
Now this line right here is getting a little bit long so if you want to do some newline characters in

83
00:05:50,530 --> 00:05:51,460
here that's totally fine.

84
00:05:51,460 --> 00:05:53,990
I think I'm just going to let it kind of hang out for a little bit.

85
00:05:55,870 --> 00:05:56,270
OK.

86
00:05:56,300 --> 00:06:01,820
So we've got our loading flag right now and we are properly toggling it from true to false between all

87
00:06:01,820 --> 00:06:03,210
of our different states.

88
00:06:03,560 --> 00:06:05,820
Let's flip over to our blog and form.

89
00:06:05,870 --> 00:06:07,400
So here's my log in form.

90
00:06:07,400 --> 00:06:12,350
I'm now going to add that loading flag to my map state to prop's function and then we're going to place

91
00:06:12,350 --> 00:06:18,560
the button inside the log and form along with the spinner so I'll scroll down to the bottom find my

92
00:06:18,560 --> 00:06:23,520
map state to prop's here's where we put all of our properties off the Auth. state object.

93
00:06:23,650 --> 00:06:28,190
So also pulling this new loading flag that we're maintaining and I'll make sure I pass it down to the

94
00:06:28,190 --> 00:06:29,640
component as well.

95
00:06:31,700 --> 00:06:36,680
Next at the very top I will import my spinner for my common components.

96
00:06:36,710 --> 00:06:43,350
Remember this is one of those compounds that we've made and pulled through from project to project.

97
00:06:43,750 --> 00:06:47,100
And then inside of my render method I'm going to find the button.

98
00:06:47,120 --> 00:06:51,430
All right here it is right here and we want to move this button to a helper method where we're are going

99
00:06:51,430 --> 00:06:56,890
to say instead of always showing the button right here we will call the helper method and decide whether

100
00:06:56,890 --> 00:07:01,570
or not we want to show the button or the spinner depending on that loading flag.

101
00:07:01,950 --> 00:07:06,050
So this should feel pretty familiar because we did it once already in the Auth. project.

102
00:07:06,100 --> 00:07:11,020
So we'll say This rendered button we're going to take the same exact approach here and I'm going to

103
00:07:11,020 --> 00:07:12,720
cut this button tag right here.

104
00:07:12,790 --> 00:07:19,560
Let's cut it out and then we'll define render button as a helper method.

105
00:07:19,710 --> 00:07:21,510
So a rendered button.

106
00:07:22,230 --> 00:07:25,040
Then if this docked props start loading.

107
00:07:25,050 --> 00:07:34,240
So if we are loading return early and so a spinner and I wanted to be a size large Otherwise we can

108
00:07:34,240 --> 00:07:37,570
return that bit of button GSX that we just cut out.

109
00:07:38,080 --> 00:07:38,580
So there we go.

110
00:07:38,590 --> 00:07:40,480
I got my rendered button for loading.

111
00:07:40,510 --> 00:07:41,400
So the spinner.

112
00:07:41,410 --> 00:07:44,390
Otherwise show our button.

113
00:07:44,680 --> 00:07:45,120
Cool.

114
00:07:45,130 --> 00:07:46,300
I think we're all set.

115
00:07:46,300 --> 00:07:48,250
I think we're ready for a test in the simulator.

116
00:07:48,250 --> 00:07:56,810
I'll do my refresh now if I've put in test at test dot com and put in a bad password to start.

117
00:07:56,880 --> 00:08:02,490
So I'll put in a bad password we get the spinner we see authentication failed the password goes away

118
00:08:02,520 --> 00:08:06,930
because we want to clear that password out so the user kind of doesn't keep on just trying to like say

119
00:08:06,930 --> 00:08:11,900
oh maybe it was like you know that very classic you know password one oh that didn't work OK.

120
00:08:11,910 --> 00:08:12,990
Two three.

121
00:08:12,990 --> 00:08:16,710
You know what that type of kind of funky situation.

122
00:08:16,710 --> 00:08:18,710
So let's now log in appropriately.

123
00:08:18,710 --> 00:08:23,870
Now the instant that I attempt to log in here I'm going to expect to see the error message go away.

124
00:08:23,880 --> 00:08:28,620
I don't expect to see a spinner start up and then I'm going to expect to see this button come back when

125
00:08:28,620 --> 00:08:31,060
loading is all complete.

126
00:08:31,060 --> 00:08:31,570
There we go.

127
00:08:31,600 --> 00:08:33,670
Just all we expected.

128
00:08:33,670 --> 00:08:40,120
Now again this is a situation where we don't really have to flip the spinner back to a button that much.

129
00:08:40,120 --> 00:08:40,470
Right.

130
00:08:40,480 --> 00:08:45,730
Because in theory when the user loads or logs in successfully We're going to redirect them away from

131
00:08:45,730 --> 00:08:50,090
this form to some type of like you know logged in page inside our app.

132
00:08:50,260 --> 00:08:54,160
Nonetheless I think it's really good practice just to make sure that you can reset all of your form

133
00:08:54,160 --> 00:08:59,080
attributes before you know something it's a little messy or dirty.

134
00:08:59,080 --> 00:09:01,540
Speaking of which one more thing I want to point out here.

135
00:09:01,570 --> 00:09:06,880
Speaking of you know resetting form attributes I'm not going to do this because we're not going to really

136
00:09:06,880 --> 00:09:08,710
have a log out feature in this app.

137
00:09:08,710 --> 00:09:13,630
You know we covered it earlier in the authentication app so I've got a reasonable belief that you know

138
00:09:13,630 --> 00:09:16,780
how to put the log out functionality together yourself.

139
00:09:16,780 --> 00:09:18,040
But one thing I want to point out.

140
00:09:18,940 --> 00:09:24,020
Is that if for some reason we navigate away from the screen and then come back to it and we're going

141
00:09:24,020 --> 00:09:30,170
to be covering navigation here very shortly the values of these inputs are stored in the reducer right.

142
00:09:30,220 --> 00:09:31,440
That's where they are stored.

143
00:09:31,750 --> 00:09:38,350
So if I go away from this form and then come back to it those values are still going to be in the reducer.

144
00:09:38,350 --> 00:09:43,180
And so I would see if I came back to this form right here I would see an email and password still in

145
00:09:43,180 --> 00:09:46,220
the form which is really not expected behavior at all.

146
00:09:46,540 --> 00:09:52,320
So one way that I might choose to solve this is to flip over to my auth reducer and I could say I'm

147
00:09:52,330 --> 00:10:00,010
here hey whenever someone successfully logs in so I'm going to put some new new lines in here whenever

148
00:10:00,010 --> 00:10:01,840
someone successfully logs in.

149
00:10:01,870 --> 00:10:02,470
That's great.

150
00:10:02,470 --> 00:10:09,460
You know we've got their user user model now but I don't want to have like that stored or kind of cached

151
00:10:09,490 --> 00:10:16,990
email or password in the form anymore so I might choose to also reset the email and the password like

152
00:10:16,990 --> 00:10:17,530
so.

153
00:10:17,530 --> 00:10:21,450
So now someone navigates away from the form and comes back to it.

154
00:10:21,490 --> 00:10:24,730
They won't see their e-mail and password prefilled in there.

155
00:10:24,910 --> 00:10:30,550
Now the one thing I want to point out now is that if you look at the signature of this return statement

156
00:10:30,550 --> 00:10:35,810
right here we are essentially redefining every single property on our state objects.

157
00:10:35,820 --> 00:10:40,630
Right we've got like dot dot dot state which might have an air loading e-mail whatever has all that

158
00:10:40,630 --> 00:10:42,680
stuff on there but we're resetting all of that right here.

159
00:10:42,700 --> 00:10:46,110
So I think we might bill to actually clean this up a little bit.

160
00:10:46,120 --> 00:10:52,760
I'm going to remove all of those extra attributes.

161
00:10:53,270 --> 00:10:57,480
I'm going to condense down to just dot dot dot state and user.

162
00:10:57,500 --> 00:10:58,990
And then I will also spread it.

163
00:10:59,000 --> 00:11:00,790
Here's the tricky part.

164
00:11:00,920 --> 00:11:02,190
Initial State.

165
00:11:02,840 --> 00:11:06,230
So I'd say take all of our existing state you know whatever it might be.

166
00:11:06,230 --> 00:11:11,150
Who knows maybe we add in some additional properties in the future and we don't reflect them initial

167
00:11:11,150 --> 00:11:11,620
state.

168
00:11:11,630 --> 00:11:16,470
You know this initial dot dot state right here is just future proofing this for ourselves.

169
00:11:16,700 --> 00:11:19,110
Then reset all the state and order redo sir.

170
00:11:19,250 --> 00:11:22,060
And then on top of that throw in our user model as well.

171
00:11:22,140 --> 00:11:24,520
So let's see how this works now it will be our last test.

172
00:11:24,530 --> 00:11:30,700
I know this is turning into a long section but I really wanted to add in this last thing in here.

173
00:11:30,750 --> 00:11:34,790
So now if I do one two three I'm going to see my error message.

174
00:11:34,850 --> 00:11:41,040
But if I hit password when I logged in successfully perfect the form resets I go back to no spinner

175
00:11:41,060 --> 00:11:41,950
no error message.

176
00:11:41,960 --> 00:11:44,180
Everything is back to just very empty.

177
00:11:44,220 --> 00:11:47,690
And so if a user ever comes back to this form they're not going to see the proof.

178
00:11:47,760 --> 00:11:49,510
Pre-filled email and password.

179
00:11:49,790 --> 00:11:51,230
OK wriggling S..

180
00:11:51,250 --> 00:11:51,940
Let's see.

181
00:11:51,950 --> 00:11:53,240
I think we're all done here.

182
00:11:53,240 --> 00:11:54,440
Let's continue the next section.

183
00:11:54,440 --> 00:11:56,750
I think we're ready to move on to navigation