1
00:00:00,170 --> 00:00:00,500
Okay.

2
00:00:00,530 --> 00:00:06,500
And before we set up register functionality on the front end, let's quickly recall the request we're

3
00:00:06,500 --> 00:00:08,029
going to be working with.

4
00:00:08,060 --> 00:00:14,570
So the URL is going to be auth and register the method is post.

5
00:00:15,330 --> 00:00:18,740
And this is the data we want to send in the body.

6
00:00:18,750 --> 00:00:22,050
So name, email, password, last name and location.

7
00:00:22,050 --> 00:00:25,560
If we're successful, we're going to get back the message.

8
00:00:25,560 --> 00:00:29,250
If not, we're going to get back the error response.

9
00:00:29,340 --> 00:00:29,760
All right.

10
00:00:29,760 --> 00:00:33,720
So now let's complete our register user functionality.

11
00:00:33,930 --> 00:00:36,870
And before we continue, let me just mention a few things.

12
00:00:36,870 --> 00:00:44,460
First of all, during this video, we will implement form data which is not React router thing.

13
00:00:44,580 --> 00:00:51,180
Essentially it's an API, it's a JavaScript API, and if you're not familiar with it or you just want

14
00:00:51,180 --> 00:00:56,460
to learn more about this API, you can utilize one of these links over here.

15
00:00:56,460 --> 00:01:01,320
So this one is going to be just the straight up JavaScript setup.

16
00:01:01,320 --> 00:01:06,390
So Vanilla JS And this video will showcase how to use form data API in React.

17
00:01:06,420 --> 00:01:12,720
Now if you're watching this, I suggest starting with the JS Nuggets because in there we'll pretty much

18
00:01:12,720 --> 00:01:18,880
start everything from scratch and when it comes to react, it already assumes that you are familiar

19
00:01:18,880 --> 00:01:20,200
with the basics.

20
00:01:20,200 --> 00:01:25,900
And second, I believe for the last time, since I know that some people probably find this annoying,

21
00:01:25,900 --> 00:01:33,640
I will remove both collections because remember, when it comes to our users, when we are registering

22
00:01:33,640 --> 00:01:40,900
the user, we can only use the unique email and I don't want to keep changing that value over there.

23
00:01:41,350 --> 00:01:46,720
Of course I will eventually create more users with the front end, but not for now.

24
00:01:46,720 --> 00:01:50,800
I just want to use my default value, so hopefully that is clear.

25
00:01:51,360 --> 00:01:57,930
And effectively what's super super awesome when we use React router Dom and when we use more specifically

26
00:01:57,930 --> 00:02:01,530
in action, we have access to request and I showcase that.

27
00:02:01,560 --> 00:02:08,100
Of course we're getting the giant object and essentially we can just destructure the request property

28
00:02:08,130 --> 00:02:16,170
out of that object right now, what's even more interesting on that request property, if we take a

29
00:02:16,170 --> 00:02:21,600
look all the way here in the prototype, we'll find form data.

30
00:02:21,660 --> 00:02:27,330
Again, this is JavaScript API and React router simply makes it available to us.

31
00:02:27,330 --> 00:02:28,080
That's it.

32
00:02:28,080 --> 00:02:31,500
You can use form data on your own if you want to.

33
00:02:31,530 --> 00:02:37,860
So let's say if you want to submit the form, you can use the form data API and essentially it's an

34
00:02:37,860 --> 00:02:43,860
interface which nicely collects all the input values.

35
00:02:44,450 --> 00:02:46,690
And sets them equal to the name.

36
00:02:46,700 --> 00:02:53,000
That's why it was super, super important when we were setting up the inputs to have the name.

37
00:02:53,420 --> 00:02:56,060
And as far as the values, yes, they need to match.

38
00:02:56,090 --> 00:02:56,900
Exactly.

39
00:02:56,900 --> 00:03:00,440
So for example, our server is looking for last name.

40
00:03:00,710 --> 00:03:04,160
So if this is going to be lowercase, then it's not going to work.

41
00:03:04,580 --> 00:03:11,390
And if you have this, if you have inputs with the name, you'll nicely be able to collect all of the

42
00:03:11,390 --> 00:03:12,140
values.

43
00:03:12,140 --> 00:03:13,730
So let's start over here.

44
00:03:13,850 --> 00:03:18,950
Remember, it's an object and in there we have specific property and the name is a request.

45
00:03:18,950 --> 00:03:21,500
So that's the one we want to destructure.

46
00:03:22,040 --> 00:03:27,770
And if we want to get all of the form values, basically it's going to be an object with key value pairs.

47
00:03:27,770 --> 00:03:31,700
We want to set up here a variable.

48
00:03:31,730 --> 00:03:35,180
Let's go with form data and let's go with Await.

49
00:03:35,180 --> 00:03:37,490
So yes, you do need to use Await.

50
00:03:37,520 --> 00:03:43,600
That's the syntax that they're looking for request and then form data, which is a function.

51
00:03:43,610 --> 00:03:44,550
Now.

52
00:03:44,990 --> 00:03:46,750
It won't get you an object.

53
00:03:46,790 --> 00:03:50,330
This line of code, basically, it will get you form data.

54
00:03:50,330 --> 00:03:51,440
And you know what?

55
00:03:51,680 --> 00:03:53,240
I do want to showcase that.

56
00:03:53,240 --> 00:03:55,520
So let me go here with form data.

57
00:03:55,550 --> 00:03:57,110
Again, let me refresh.

58
00:03:58,100 --> 00:03:59,360
Let's submit and check it out.

59
00:03:59,360 --> 00:04:00,740
So that's the interface.

60
00:04:00,740 --> 00:04:01,700
And don't be surprised.

61
00:04:01,700 --> 00:04:06,860
Yes, I know it looks empty and all that, but actually it has a bunch of properties and methods that

62
00:04:06,860 --> 00:04:07,580
we can use.

63
00:04:07,610 --> 00:04:14,780
Now, what we are looking for, well, I honestly just want to get all of the input values and the fastest

64
00:04:14,780 --> 00:04:14,960
way.

65
00:04:14,960 --> 00:04:20,750
How we can do that is essentially in the following way where I go with const data.

66
00:04:20,750 --> 00:04:27,470
So I'm going to come up with some kind of variable and there is in a JavaScript, a object from entries

67
00:04:27,470 --> 00:04:30,610
method and we just pass in form data.

68
00:04:30,620 --> 00:04:35,540
Now if this looks super funky to you, if you don't understand.

69
00:04:35,570 --> 00:04:38,420
Pretty much every smallest detail.

70
00:04:38,630 --> 00:04:45,800
I don't suggest worrying about it because every time you want to get the form values, this is the functionality

71
00:04:45,830 --> 00:04:46,580
you'll run.

72
00:04:46,580 --> 00:04:54,440
So essentially this just provides the interface again, because React Router provides that for us.

73
00:04:54,440 --> 00:04:59,790
An object form entry is just turns array of arrays into an object.

74
00:04:59,790 --> 00:05:06,720
So long story short, if I go here with data and since I have all the default values already in place

75
00:05:06,720 --> 00:05:12,630
and since I have the name attributes on my input, check it out.

76
00:05:12,660 --> 00:05:18,210
Now I have my object, so this is what I'm going to send back to my server.

77
00:05:18,240 --> 00:05:25,740
Now, one important thing to keep in mind, you won't be able to test the server errors.

78
00:05:26,410 --> 00:05:28,420
As far as the empty values.

79
00:05:28,750 --> 00:05:29,490
Why?

80
00:05:29,500 --> 00:05:32,740
Well, because remember, we were setting up the required.

81
00:05:32,770 --> 00:05:33,550
Correct.

82
00:05:33,670 --> 00:05:41,380
So since the required attribute is already sitting there, we won't be able to test for the 400 errors

83
00:05:41,380 --> 00:05:43,930
as far as the empty values.

84
00:05:43,930 --> 00:05:46,540
But of course we'll be able to test the wrong ones.

85
00:05:46,540 --> 00:05:50,100
For example, the password as well as the unique email.

86
00:05:50,110 --> 00:05:51,520
Hopefully that is clear.

87
00:05:51,730 --> 00:05:58,780
And as a side note, if you're looking at it and you're like, well, how do we make sure that the values

88
00:05:58,870 --> 00:06:00,400
are there?

89
00:06:00,400 --> 00:06:01,060
Right?

90
00:06:01,060 --> 00:06:03,760
How do we make sure that we're not sending empty values?

91
00:06:03,760 --> 00:06:07,900
Because usually when you have controlled input, that's the approach you would take.

92
00:06:07,930 --> 00:06:14,800
You would set up some kind of condition where you would make sure that the values are not empty and

93
00:06:14,800 --> 00:06:15,760
in their docs.

94
00:06:15,790 --> 00:06:22,960
This is the approach that they suggest, meaning using the server to check those values, which of course

95
00:06:22,960 --> 00:06:23,590
is our case.

96
00:06:23,590 --> 00:06:31,640
Remember, we have very extensive validation layer for pretty much any request that is coming in with

97
00:06:31,640 --> 00:06:32,150
some data.

98
00:06:32,180 --> 00:06:33,140
That's number one.

99
00:06:33,140 --> 00:06:37,370
And second, they suggest using the required attribute.

100
00:06:37,370 --> 00:06:44,480
So between those two, you don't technically need to set up the JavaScript functionality on a front

101
00:06:44,480 --> 00:06:47,340
end where you're checking for empty values.

102
00:06:47,360 --> 00:06:51,830
Hopefully this answers the question and then we want to make the request.

103
00:06:52,310 --> 00:06:54,800
Now, for now, I'll just leave this.

104
00:06:54,830 --> 00:06:57,170
Now, remember, this is the object.

105
00:06:57,170 --> 00:07:03,790
And remember, those are the values that the post request is looking for the auth register.

106
00:07:03,800 --> 00:07:09,260
So since we'll have some asynchronous functionality, we right away want to place this in, try and

107
00:07:09,260 --> 00:07:09,850
catch.

108
00:07:09,860 --> 00:07:14,660
So in the try block we will make a request back to our server.

109
00:07:15,230 --> 00:07:18,980
If everything is correct, we'll actually navigate to a login one.

110
00:07:19,160 --> 00:07:23,660
And if there is an error for now, we'll just return the error.

111
00:07:23,690 --> 00:07:29,270
Like I said, we can return pretty much anything we want from this action and also we will log it.

112
00:07:29,300 --> 00:07:30,740
So let's try it out.

113
00:07:30,770 --> 00:07:35,180
Now notice here, I don't need to set it equal to any kind of variable.

114
00:07:35,210 --> 00:07:35,700
Why?

115
00:07:35,720 --> 00:07:40,910
Well, because when we register, I mean, I'm not going to use that value here on the front end since

116
00:07:40,910 --> 00:07:42,230
I'm just getting message back.

117
00:07:42,230 --> 00:07:44,630
Hey, you were successful and all that stuff.

118
00:07:44,630 --> 00:07:47,120
So just nicely display that message.

119
00:07:47,120 --> 00:07:53,750
But as far as the value, the user value, well, I'm not really looking for it on the front end, so

120
00:07:53,750 --> 00:07:56,240
we don't need to assign it to a variable.

121
00:07:56,330 --> 00:07:58,700
Then we go with custom fetch.

122
00:07:58,820 --> 00:08:00,500
We want to go with post.

123
00:08:00,590 --> 00:08:02,000
Remember, that's the request.

124
00:08:02,000 --> 00:08:04,340
And as a side note, if you're iffy on this.

125
00:08:05,300 --> 00:08:10,880
Again, let's navigate quickly back to our server and let's look at the routes.

126
00:08:10,880 --> 00:08:11,570
Correct.

127
00:08:11,600 --> 00:08:13,790
So we're looking for auth router.

128
00:08:14,150 --> 00:08:18,080
Notice this was a post request and it's going to a register.

129
00:08:18,110 --> 00:08:20,420
That's why we're making this request right now.

130
00:08:20,510 --> 00:08:27,110
So let's go here with forward slash auth, forward slash register and then if we want to pass in the

131
00:08:27,110 --> 00:08:27,770
data.

132
00:08:28,420 --> 00:08:34,360
Well, we can set up here an object if you want, or we can directly pass in a data since at the end

133
00:08:34,360 --> 00:08:36,580
of the day it is the object.

134
00:08:36,610 --> 00:08:40,720
Only in this case it has all of the input values as well.

135
00:08:40,720 --> 00:08:46,780
So this is what we're sending and we'll nicely see that if we take a look at the network tab and as

136
00:08:46,780 --> 00:08:48,070
far as the return, you know what?

137
00:08:48,070 --> 00:08:54,880
Let me move this up and let me make sure that we are on the same page since we have this try and catch

138
00:08:54,910 --> 00:09:01,600
unless you have return all the way here in the bottom, you need to make sure that you return from both

139
00:09:01,600 --> 00:09:07,270
of them because of course this is going to run if we're successful and if we have an error, of course

140
00:09:07,270 --> 00:09:09,490
we also need to provide that return.

141
00:09:09,490 --> 00:09:13,600
So therefore you'll see the syntax where I go with this return error.

142
00:09:13,600 --> 00:09:14,890
And yes, this is valid.

143
00:09:14,890 --> 00:09:21,580
And again, we want to have two returns unless you set up one at the very end of the try and catch.

144
00:09:21,610 --> 00:09:26,050
Otherwise again you'll have the same bug like I showcased before.

145
00:09:26,260 --> 00:09:31,730
And for now we'll go here with return null on the top so we won't change that.

146
00:09:31,910 --> 00:09:34,880
And then let's also log the error.

147
00:09:35,480 --> 00:09:39,590
Which eventually, as a side note, is going to be our toast.

148
00:09:39,680 --> 00:09:42,520
So let's just refresh over here.

149
00:09:42,530 --> 00:09:44,360
Let's start from the scratch.

150
00:09:44,720 --> 00:09:49,850
And right away, you know what showcase what request we're making.

151
00:09:49,850 --> 00:09:55,340
So I'm going to navigate to a network tab and I'm going to click on Fetch.

152
00:09:55,580 --> 00:09:57,560
Then let's submit a notice.

153
00:09:57,560 --> 00:10:01,820
So we made a request to a register.

154
00:10:02,360 --> 00:10:02,900
Check it out.

155
00:10:02,900 --> 00:10:05,780
So this was a post request, This was the URL.

156
00:10:05,780 --> 00:10:10,280
So yeah, it starts with our front end localhost.

157
00:10:10,280 --> 00:10:12,830
But keep in mind that we have that proxy in place.

158
00:10:12,830 --> 00:10:13,430
Correct.

159
00:10:14,120 --> 00:10:15,300
This was the payload.

160
00:10:15,320 --> 00:10:18,920
So this is what I'm sending to a server.

161
00:10:18,920 --> 00:10:27,080
And of course, if everything was correct, if I go to my database, I should have that new user over

162
00:10:27,080 --> 00:10:28,610
here And notice.

163
00:10:28,610 --> 00:10:37,070
So it's John over here, just like we did when we were setting up everything with the Thunder client.

164
00:10:37,250 --> 00:10:40,010
So again, the idea doesn't change.

165
00:10:40,040 --> 00:10:44,690
The only difference is that now we're using the action from React Router Dom.

166
00:10:44,960 --> 00:10:51,680
We nicely grab all of the input values and then we make a request.

167
00:10:51,710 --> 00:10:56,180
We send the data and if everything is correct for now, we just return null.

168
00:10:56,810 --> 00:11:02,480
And if we have some kind of error, then of course we just log it and then return the error because

169
00:11:02,480 --> 00:11:05,000
it's a must from the action one.

170
00:11:05,180 --> 00:11:07,520
And before we check the error responses.

171
00:11:07,550 --> 00:11:09,780
Now let's make things more interesting.

172
00:11:09,800 --> 00:11:17,160
So if we're successful, if we can nicely register the user, do you think there's a point for the user

173
00:11:17,280 --> 00:11:20,040
to stay on the register page?

174
00:11:20,370 --> 00:11:21,360
Not really.

175
00:11:21,360 --> 00:11:21,960
Correct.

176
00:11:21,960 --> 00:11:28,770
And we can actually navigate the user away from the register page by using redirect.

177
00:11:28,800 --> 00:11:34,560
Now, please keep in mind that during the project we'll use other ways of.

178
00:11:34,970 --> 00:11:39,320
Programmatically navigating the user to a different page.

179
00:11:39,320 --> 00:11:41,750
And when it comes to redirect.

180
00:11:41,780 --> 00:11:49,160
If you take a look at the React router Dom docs, they suggest only using this in the action.

181
00:11:49,280 --> 00:11:55,700
So there are other ways how we can programmatically redirect the user and for example, we'll use them

182
00:11:55,700 --> 00:11:56,900
in the component.

183
00:11:56,900 --> 00:11:59,230
So this one is only for the action.

184
00:11:59,240 --> 00:12:05,690
So like I said, we can return anything from the action and in this case I want to go redirect.

185
00:12:05,720 --> 00:12:09,320
It's a function and it's looking for the URL.

186
00:12:09,620 --> 00:12:16,760
So once I've registered the user where I want the user to navigate well, I'm going to go to a login

187
00:12:16,760 --> 00:12:17,120
one.

188
00:12:17,120 --> 00:12:17,630
Correct.

189
00:12:17,660 --> 00:12:19,070
Let's save it here.

190
00:12:19,400 --> 00:12:20,750
And you know what?

191
00:12:20,750 --> 00:12:23,980
Let's test out right away the error response.

192
00:12:23,990 --> 00:12:26,310
Now how do I know that I'm going to get the error?

193
00:12:26,330 --> 00:12:27,200
Well, because.

194
00:12:27,990 --> 00:12:30,710
The email is not going to be unique.

195
00:12:30,720 --> 00:12:31,230
Correct.

196
00:12:31,230 --> 00:12:34,310
So I'm going to be looking for John Gmail and check it out.

197
00:12:34,320 --> 00:12:35,610
Now I have 400.

198
00:12:35,610 --> 00:12:38,370
So this is the bad response coming from my server.

199
00:12:38,370 --> 00:12:43,560
And when it comes to Axios, again, it gives you this giant object.

200
00:12:43,560 --> 00:12:49,950
And if we want to see our response, the one that we set up in the previous videos, we need to look

201
00:12:49,950 --> 00:12:51,810
for response.

202
00:12:51,840 --> 00:12:57,240
Then data and notice this message Email already exists.

203
00:12:57,450 --> 00:13:04,020
So in the upcoming videos we'll set up a toast where we'll display this message.

204
00:13:04,020 --> 00:13:07,050
I'm just showing you the structure that you're going to get back.

205
00:13:07,110 --> 00:13:09,210
Now, what else can we check?

206
00:13:09,210 --> 00:13:12,420
Well, first of all, let me change it to Peter.

207
00:13:13,140 --> 00:13:18,350
And then also the name and let's make the password shorter.

208
00:13:18,360 --> 00:13:21,620
So I'm just going to remove some characters.

209
00:13:21,630 --> 00:13:22,790
Let's send it here.

210
00:13:22,800 --> 00:13:23,700
Same deal.

211
00:13:23,700 --> 00:13:26,880
If I take a look at the console, I'll have 400.

212
00:13:26,910 --> 00:13:30,150
Now, of course, the error message is going to be different, Correct.

213
00:13:30,150 --> 00:13:32,250
Again, take a look at the response.

214
00:13:32,370 --> 00:13:33,480
Take a look at the data.

215
00:13:33,480 --> 00:13:34,650
And now we have password.

216
00:13:34,650 --> 00:13:37,290
Must be at least eight characters long.

217
00:13:37,290 --> 00:13:41,490
So we can clearly see that our validation layer works.

218
00:13:41,490 --> 00:13:43,530
So now let's try that redirect.

219
00:13:43,530 --> 00:13:47,130
I'm going to basically provide all of the correct values.

220
00:13:48,110 --> 00:13:50,060
Let me go with the password.

221
00:13:50,060 --> 00:13:51,200
That's long enough.

222
00:13:51,320 --> 00:13:53,390
This is going to be a unique email.

223
00:13:53,420 --> 00:13:54,710
This is going to be the name.

224
00:13:54,710 --> 00:14:01,670
So if we're successful, we should end up on a login page and we do notice.

225
00:14:02,450 --> 00:14:03,920
We made a request.

226
00:14:03,950 --> 00:14:05,990
It was successful request.

227
00:14:06,080 --> 00:14:07,730
Registered 201.

228
00:14:07,760 --> 00:14:11,180
These are the values that we sent in our object.

229
00:14:11,180 --> 00:14:12,770
And this was the response.

230
00:14:12,770 --> 00:14:16,760
So we have this user created and since.

231
00:14:17,450 --> 00:14:18,800
We didn't have the error.

232
00:14:18,830 --> 00:14:27,710
We nicely went with return redirect and we programmatically sent the user to a login page.