All right, we're almost done with register page.
The last thing that I want to do is to set up React to File library, which will provide some nice alerts
to the user.
Now, in a previous course iteration, we built it ourselves.
But this library, in my opinion, is way better approach because it just provides tons of options and
the end result is also way, way cleaner.
In order to get started, we want to install the package again.
In this case we're talking about the client and we want to import in the main JSX, the CSS and yes,
the naming is following.
Make sure you set up the same value, otherwise you'll get the bug.
And then we want to import the toast container from React to justify and we want to place it somewhere
in the root.
Now it doesn't really matter whether it's above or below the app.
And as far as the position, well, this just controls where that toast is going to be located.
So my preference is top center.
But of course, you can change this value as well.
And if you want to find out more info about the library and the options you have, please utilize this
u.r.l.
Now, since I already installed the package, I just want to navigate to main JS.
And you know what?
I'm just going to copy this import.
So again, we're looking for react toast, ify, then dist and then react toast ify with uppercase letters
and then dot cs.
So that's the import we want in the root.
So let me navigate to main JS and if we want to modify some classes later on, I suggest importing before
the index CSS.
Again, we're not going to do that in this particular project, but just in case you want to do it in
your own project.
So we're looking for React.
Those defy.
Then we want to go with forward slash dist.
And react and notice how it's suggesting lowercase.
No, that's not what we want.
So we want to go here with Justify, then Dot and then C SS and also we want to grab that container.
So we're going to go over here with import, then toast.
Container and this is coming from React Toasted File library.
Then right after the app, we're going to go with toast container.
Like I said, we're going to go with position and I'm going to set it as top center here.
Let's close it.
And now we want to navigate to a register and in order to start using.
The library.
We want to grab the toast import.
So not the uppercase, actually.
Lowercase.
From and testify.
Essentially, it's a function.
And we just need to provide what kind of toast it's going to be, whether it's going to be success,
whether it's going to be an error, and then what kind of message we want to display.
And let's start with location.
So I want to invoke this toast in two places.
I want to invoke it in the try and also in the catch.
So in the try one, I'll display that success message and then in the catch one, I'll display the error.
So first let's go with toast, then dot.
And if it's a success one we just type here success and we have a few options if you want.
You can of course access that success message, the one that we're sending back from the server.
Or we can simply hard code, which is going to be my approach.
So essentially I'm just going to say a registration successful.
Now if there is an error, I want to do the same thing.
However, we're going to replace the success with error.
So our toast is going to be a little bit different.
And this is the case where I will look for that error message.
However, I'll use the optional chaining because once in a while we might get the Axios error.
And of course in that case the message is not going to be present.
So what am I talking about?
Instead of error dot response dot, then data and then message, I'll actually set up the.
Optional chaining.
And that way if it's an Axios error, if it's the error that we're not getting back from our own server.
That way we won't trigger the error.
Everything else pretty much stays the same.
So now let's navigate again back to our browser here.
I'm going to go back to a register.
And first I guess we'll take a look at the error.
Why?
Because of course, this email is not unique.
Let's click it and notice now we have email already exists and this is the cool toast that we get from
React to Testify.
Again, if you want to modify how the toast looks like, how long it stays on the screen and all that,
of course, please just utilize their docs and also let me showcase the.
Success.
I'm going to go with Anna here.
And as far as the name, I'm also going to go with Anna.
Let's submit a notice.
Now we have registration successful and of course we navigate to a login page.
So this should do it for register page.
And like I mentioned before, a lot of this functionality is going to be pretty much the same in the
upcoming pages where we set up the actions.
So if you're somewhat iffy on the syntax, the more pages will set up, the more comfortable you're
going to get with this approach.