1
00:00:00,020 --> 00:00:02,680
All right, we're almost done with register page.

2
00:00:02,690 --> 00:00:10,850
The last thing that I want to do is to set up React to File library, which will provide some nice alerts

3
00:00:10,850 --> 00:00:12,000
to the user.

4
00:00:12,020 --> 00:00:15,260
Now, in a previous course iteration, we built it ourselves.

5
00:00:15,260 --> 00:00:22,550
But this library, in my opinion, is way better approach because it just provides tons of options and

6
00:00:22,550 --> 00:00:25,220
the end result is also way, way cleaner.

7
00:00:25,550 --> 00:00:29,150
In order to get started, we want to install the package again.

8
00:00:29,210 --> 00:00:37,070
In this case we're talking about the client and we want to import in the main JSX, the CSS and yes,

9
00:00:37,070 --> 00:00:38,420
the naming is following.

10
00:00:38,420 --> 00:00:43,400
Make sure you set up the same value, otherwise you'll get the bug.

11
00:00:43,400 --> 00:00:49,460
And then we want to import the toast container from React to justify and we want to place it somewhere

12
00:00:49,460 --> 00:00:49,930
in the root.

13
00:00:49,940 --> 00:00:53,180
Now it doesn't really matter whether it's above or below the app.

14
00:00:54,020 --> 00:00:59,060
And as far as the position, well, this just controls where that toast is going to be located.

15
00:00:59,060 --> 00:01:00,830
So my preference is top center.

16
00:01:00,830 --> 00:01:02,870
But of course, you can change this value as well.

17
00:01:02,870 --> 00:01:08,360
And if you want to find out more info about the library and the options you have, please utilize this

18
00:01:08,420 --> 00:01:09,720
u.r.l.

19
00:01:09,770 --> 00:01:15,420
Now, since I already installed the package, I just want to navigate to main JS.

20
00:01:16,190 --> 00:01:17,440
And you know what?

21
00:01:17,450 --> 00:01:19,490
I'm just going to copy this import.

22
00:01:19,820 --> 00:01:28,280
So again, we're looking for react toast, ify, then dist and then react toast ify with uppercase letters

23
00:01:28,280 --> 00:01:29,870
and then dot cs.

24
00:01:29,870 --> 00:01:32,120
So that's the import we want in the root.

25
00:01:32,120 --> 00:01:42,890
So let me navigate to main JS and if we want to modify some classes later on, I suggest importing before

26
00:01:42,890 --> 00:01:44,300
the index CSS.

27
00:01:44,330 --> 00:01:49,790
Again, we're not going to do that in this particular project, but just in case you want to do it in

28
00:01:49,790 --> 00:01:50,540
your own project.

29
00:01:50,540 --> 00:01:52,760
So we're looking for React.

30
00:01:53,820 --> 00:01:54,620
Those defy.

31
00:01:56,570 --> 00:01:59,120
Then we want to go with forward slash dist.

32
00:02:00,050 --> 00:02:03,590
And react and notice how it's suggesting lowercase.

33
00:02:03,590 --> 00:02:05,180
No, that's not what we want.

34
00:02:05,210 --> 00:02:12,590
So we want to go here with Justify, then Dot and then C SS and also we want to grab that container.

35
00:02:12,590 --> 00:02:16,340
So we're going to go over here with import, then toast.

36
00:02:17,690 --> 00:02:22,520
Container and this is coming from React Toasted File library.

37
00:02:22,900 --> 00:02:26,240
Then right after the app, we're going to go with toast container.

38
00:02:26,390 --> 00:02:31,270
Like I said, we're going to go with position and I'm going to set it as top center here.

39
00:02:31,280 --> 00:02:32,480
Let's close it.

40
00:02:33,550 --> 00:02:38,650
And now we want to navigate to a register and in order to start using.

41
00:02:39,400 --> 00:02:40,150
The library.

42
00:02:40,150 --> 00:02:43,480
We want to grab the toast import.

43
00:02:43,480 --> 00:02:45,820
So not the uppercase, actually.

44
00:02:45,820 --> 00:02:46,660
Lowercase.

45
00:02:47,530 --> 00:02:49,720
From and testify.

46
00:02:50,020 --> 00:02:52,210
Essentially, it's a function.

47
00:02:53,070 --> 00:02:58,590
And we just need to provide what kind of toast it's going to be, whether it's going to be success,

48
00:02:58,620 --> 00:03:03,890
whether it's going to be an error, and then what kind of message we want to display.

49
00:03:03,900 --> 00:03:05,550
And let's start with location.

50
00:03:05,550 --> 00:03:09,030
So I want to invoke this toast in two places.

51
00:03:09,360 --> 00:03:12,540
I want to invoke it in the try and also in the catch.

52
00:03:12,540 --> 00:03:19,350
So in the try one, I'll display that success message and then in the catch one, I'll display the error.

53
00:03:19,350 --> 00:03:22,200
So first let's go with toast, then dot.

54
00:03:22,200 --> 00:03:28,620
And if it's a success one we just type here success and we have a few options if you want.

55
00:03:28,650 --> 00:03:34,500
You can of course access that success message, the one that we're sending back from the server.

56
00:03:34,500 --> 00:03:38,070
Or we can simply hard code, which is going to be my approach.

57
00:03:38,070 --> 00:03:41,760
So essentially I'm just going to say a registration successful.

58
00:03:41,880 --> 00:03:45,780
Now if there is an error, I want to do the same thing.

59
00:03:45,780 --> 00:03:50,790
However, we're going to replace the success with error.

60
00:03:50,880 --> 00:03:54,880
So our toast is going to be a little bit different.

61
00:03:54,880 --> 00:03:58,510
And this is the case where I will look for that error message.

62
00:03:58,510 --> 00:04:04,210
However, I'll use the optional chaining because once in a while we might get the Axios error.

63
00:04:04,210 --> 00:04:08,410
And of course in that case the message is not going to be present.

64
00:04:08,410 --> 00:04:09,640
So what am I talking about?

65
00:04:09,640 --> 00:04:15,460
Instead of error dot response dot, then data and then message, I'll actually set up the.

66
00:04:16,440 --> 00:04:17,640
Optional chaining.

67
00:04:17,640 --> 00:04:24,510
And that way if it's an Axios error, if it's the error that we're not getting back from our own server.

68
00:04:24,690 --> 00:04:27,120
That way we won't trigger the error.

69
00:04:27,240 --> 00:04:29,340
Everything else pretty much stays the same.

70
00:04:29,340 --> 00:04:33,390
So now let's navigate again back to our browser here.

71
00:04:33,750 --> 00:04:36,120
I'm going to go back to a register.

72
00:04:36,120 --> 00:04:38,270
And first I guess we'll take a look at the error.

73
00:04:38,280 --> 00:04:38,760
Why?

74
00:04:38,970 --> 00:04:41,700
Because of course, this email is not unique.

75
00:04:41,730 --> 00:04:49,200
Let's click it and notice now we have email already exists and this is the cool toast that we get from

76
00:04:49,200 --> 00:04:50,370
React to Testify.

77
00:04:50,610 --> 00:04:56,160
Again, if you want to modify how the toast looks like, how long it stays on the screen and all that,

78
00:04:56,280 --> 00:05:01,740
of course, please just utilize their docs and also let me showcase the.

79
00:05:02,600 --> 00:05:03,710
Success.

80
00:05:03,720 --> 00:05:05,270
I'm going to go with Anna here.

81
00:05:06,130 --> 00:05:09,290
And as far as the name, I'm also going to go with Anna.

82
00:05:09,310 --> 00:05:11,230
Let's submit a notice.

83
00:05:11,230 --> 00:05:16,210
Now we have registration successful and of course we navigate to a login page.

84
00:05:16,210 --> 00:05:19,150
So this should do it for register page.

85
00:05:19,150 --> 00:05:26,260
And like I mentioned before, a lot of this functionality is going to be pretty much the same in the

86
00:05:26,260 --> 00:05:30,370
upcoming pages where we set up the actions.

87
00:05:30,370 --> 00:05:38,110
So if you're somewhat iffy on the syntax, the more pages will set up, the more comfortable you're

88
00:05:38,110 --> 00:05:40,060
going to get with this approach.