Okay.
And before we set up register functionality on the front end, let's quickly recall the request we're
going to be working with.
So the URL is going to be auth and register the method is post.
And this is the data we want to send in the body.
So name, email, password, last name and location.
If we're successful, we're going to get back the message.
If not, we're going to get back the error response.
All right.
So now let's complete our register user functionality.
And before we continue, let me just mention a few things.
First of all, during this video, we will implement form data which is not React router thing.
Essentially it's an API, it's a JavaScript API, and if you're not familiar with it or you just want
to learn more about this API, you can utilize one of these links over here.
So this one is going to be just the straight up JavaScript setup.
So Vanilla JS And this video will showcase how to use form data API in React.
Now if you're watching this, I suggest starting with the JS Nuggets because in there we'll pretty much
start everything from scratch and when it comes to react, it already assumes that you are familiar
with the basics.
And second, I believe for the last time, since I know that some people probably find this annoying,
I will remove both collections because remember, when it comes to our users, when we are registering
the user, we can only use the unique email and I don't want to keep changing that value over there.
Of course I will eventually create more users with the front end, but not for now.
I just want to use my default value, so hopefully that is clear.
And effectively what's super super awesome when we use React router Dom and when we use more specifically
in action, we have access to request and I showcase that.
Of course we're getting the giant object and essentially we can just destructure the request property
out of that object right now, what's even more interesting on that request property, if we take a
look all the way here in the prototype, we'll find form data.
Again, this is JavaScript API and React router simply makes it available to us.
That's it.
You can use form data on your own if you want to.
So let's say if you want to submit the form, you can use the form data API and essentially it's an
interface which nicely collects all the input values.
And sets them equal to the name.
That's why it was super, super important when we were setting up the inputs to have the name.
And as far as the values, yes, they need to match.
Exactly.
So for example, our server is looking for last name.
So if this is going to be lowercase, then it's not going to work.
And if you have this, if you have inputs with the name, you'll nicely be able to collect all of the
values.
So let's start over here.
Remember, it's an object and in there we have specific property and the name is a request.
So that's the one we want to destructure.
And if we want to get all of the form values, basically it's going to be an object with key value pairs.
We want to set up here a variable.
Let's go with form data and let's go with Await.
So yes, you do need to use Await.
That's the syntax that they're looking for request and then form data, which is a function.
Now.
It won't get you an object.
This line of code, basically, it will get you form data.
And you know what?
I do want to showcase that.
So let me go here with form data.
Again, let me refresh.
Let's submit and check it out.
So that's the interface.
And don't be surprised.
Yes, I know it looks empty and all that, but actually it has a bunch of properties and methods that
we can use.
Now, what we are looking for, well, I honestly just want to get all of the input values and the fastest
way.
How we can do that is essentially in the following way where I go with const data.
So I'm going to come up with some kind of variable and there is in a JavaScript, a object from entries
method and we just pass in form data.
Now if this looks super funky to you, if you don't understand.
Pretty much every smallest detail.
I don't suggest worrying about it because every time you want to get the form values, this is the functionality
you'll run.
So essentially this just provides the interface again, because React Router provides that for us.
An object form entry is just turns array of arrays into an object.
So long story short, if I go here with data and since I have all the default values already in place
and since I have the name attributes on my input, check it out.
Now I have my object, so this is what I'm going to send back to my server.
Now, one important thing to keep in mind, you won't be able to test the server errors.
As far as the empty values.
Why?
Well, because remember, we were setting up the required.
Correct.
So since the required attribute is already sitting there, we won't be able to test for the 400 errors
as far as the empty values.
But of course we'll be able to test the wrong ones.
For example, the password as well as the unique email.
Hopefully that is clear.
And as a side note, if you're looking at it and you're like, well, how do we make sure that the values
are there?
Right?
How do we make sure that we're not sending empty values?
Because usually when you have controlled input, that's the approach you would take.
You would set up some kind of condition where you would make sure that the values are not empty and
in their docs.
This is the approach that they suggest, meaning using the server to check those values, which of course
is our case.
Remember, we have very extensive validation layer for pretty much any request that is coming in with
some data.
That's number one.
And second, they suggest using the required attribute.
So between those two, you don't technically need to set up the JavaScript functionality on a front
end where you're checking for empty values.
Hopefully this answers the question and then we want to make the request.
Now, for now, I'll just leave this.
Now, remember, this is the object.
And remember, those are the values that the post request is looking for the auth register.
So since we'll have some asynchronous functionality, we right away want to place this in, try and
catch.
So in the try block we will make a request back to our server.
If everything is correct, we'll actually navigate to a login one.
And if there is an error for now, we'll just return the error.
Like I said, we can return pretty much anything we want from this action and also we will log it.
So let's try it out.
Now notice here, I don't need to set it equal to any kind of variable.
Why?
Well, because when we register, I mean, I'm not going to use that value here on the front end since
I'm just getting message back.
Hey, you were successful and all that stuff.
So just nicely display that message.
But as far as the value, the user value, well, I'm not really looking for it on the front end, so
we don't need to assign it to a variable.
Then we go with custom fetch.
We want to go with post.
Remember, that's the request.
And as a side note, if you're iffy on this.
Again, let's navigate quickly back to our server and let's look at the routes.
Correct.
So we're looking for auth router.
Notice this was a post request and it's going to a register.
That's why we're making this request right now.
So let's go here with forward slash auth, forward slash register and then if we want to pass in the
data.
Well, we can set up here an object if you want, or we can directly pass in a data since at the end
of the day it is the object.
Only in this case it has all of the input values as well.
So this is what we're sending and we'll nicely see that if we take a look at the network tab and as
far as the return, you know what?
Let me move this up and let me make sure that we are on the same page since we have this try and catch
unless you have return all the way here in the bottom, you need to make sure that you return from both
of them because of course this is going to run if we're successful and if we have an error, of course
we also need to provide that return.
So therefore you'll see the syntax where I go with this return error.
And yes, this is valid.
And again, we want to have two returns unless you set up one at the very end of the try and catch.
Otherwise again you'll have the same bug like I showcased before.
And for now we'll go here with return null on the top so we won't change that.
And then let's also log the error.
Which eventually, as a side note, is going to be our toast.
So let's just refresh over here.
Let's start from the scratch.
And right away, you know what showcase what request we're making.
So I'm going to navigate to a network tab and I'm going to click on Fetch.
Then let's submit a notice.
So we made a request to a register.
Check it out.
So this was a post request, This was the URL.
So yeah, it starts with our front end localhost.
But keep in mind that we have that proxy in place.
Correct.
This was the payload.
So this is what I'm sending to a server.
And of course, if everything was correct, if I go to my database, I should have that new user over
here And notice.
So it's John over here, just like we did when we were setting up everything with the Thunder client.
So again, the idea doesn't change.
The only difference is that now we're using the action from React Router Dom.
We nicely grab all of the input values and then we make a request.
We send the data and if everything is correct for now, we just return null.
And if we have some kind of error, then of course we just log it and then return the error because
it's a must from the action one.
And before we check the error responses.
Now let's make things more interesting.
So if we're successful, if we can nicely register the user, do you think there's a point for the user
to stay on the register page?
Not really.
Correct.
And we can actually navigate the user away from the register page by using redirect.
Now, please keep in mind that during the project we'll use other ways of.
Programmatically navigating the user to a different page.
And when it comes to redirect.
If you take a look at the React router Dom docs, they suggest only using this in the action.
So there are other ways how we can programmatically redirect the user and for example, we'll use them
in the component.
So this one is only for the action.
So like I said, we can return anything from the action and in this case I want to go redirect.
It's a function and it's looking for the URL.
So once I've registered the user where I want the user to navigate well, I'm going to go to a login
one.
Correct.
Let's save it here.
And you know what?
Let's test out right away the error response.
Now how do I know that I'm going to get the error?
Well, because.
The email is not going to be unique.
Correct.
So I'm going to be looking for John Gmail and check it out.
Now I have 400.
So this is the bad response coming from my server.
And when it comes to Axios, again, it gives you this giant object.
And if we want to see our response, the one that we set up in the previous videos, we need to look
for response.
Then data and notice this message Email already exists.
So in the upcoming videos we'll set up a toast where we'll display this message.
I'm just showing you the structure that you're going to get back.
Now, what else can we check?
Well, first of all, let me change it to Peter.
And then also the name and let's make the password shorter.
So I'm just going to remove some characters.
Let's send it here.
Same deal.
If I take a look at the console, I'll have 400.
Now, of course, the error message is going to be different, Correct.
Again, take a look at the response.
Take a look at the data.
And now we have password.
Must be at least eight characters long.
So we can clearly see that our validation layer works.
So now let's try that redirect.
I'm going to basically provide all of the correct values.
Let me go with the password.
That's long enough.
This is going to be a unique email.
This is going to be the name.
So if we're successful, we should end up on a login page and we do notice.
We made a request.
It was successful request.
Registered 201.
These are the values that we sent in our object.
And this was the response.
So we have this user created and since.
We didn't have the error.
We nicely went with return redirect and we programmatically sent the user to a login page.