1
00:00:00,140 --> 00:00:00,590
Okay.

2
00:00:00,800 --> 00:00:06,740
Before we set up admin page, let's also quickly recall the request we're going to be working with.

3
00:00:06,770 --> 00:00:13,760
So the URL is going to be forward slash users forward slash admin and forward slash app stats.

4
00:00:14,030 --> 00:00:16,100
It's going to be a get request.

5
00:00:16,219 --> 00:00:24,980
But most important thing we need to remember is the fact that only the users whose role is admin in

6
00:00:24,980 --> 00:00:28,970
my case it's only John can access this route.

7
00:00:29,000 --> 00:00:37,280
Now if that's the case, we're going to get info on all the users currently we have in the application

8
00:00:37,280 --> 00:00:40,250
as well as how many jobs they have created.

9
00:00:40,280 --> 00:00:41,900
Now, if.

10
00:00:42,400 --> 00:00:47,650
The user is not admin, then of course we're going to get back the error response.

11
00:00:47,680 --> 00:00:48,070
All right.

12
00:00:48,070 --> 00:00:53,090
And once we have delete functionality in place, now let's work on the admin page.

13
00:00:53,150 --> 00:00:57,790
Now honestly, the actual page is pretty straightforward.

14
00:00:57,820 --> 00:01:05,770
The one thing we need to remember though is the fact that admin page is only accessible to a user whose

15
00:01:05,770 --> 00:01:07,030
role is admin.

16
00:01:07,030 --> 00:01:10,180
And therefore when we set up the loader if.

17
00:01:10,750 --> 00:01:12,270
We get some kind of error.

18
00:01:12,280 --> 00:01:15,740
Essentially, we'll redirect the user back to the dashboard.

19
00:01:15,760 --> 00:01:19,270
Now, if we're successful, then remember we access two things.

20
00:01:19,270 --> 00:01:21,550
We access users and jobs.

21
00:01:21,550 --> 00:01:23,560
That's what we return from the controller.

22
00:01:23,560 --> 00:01:26,400
And of course, eventually we will render it.

23
00:01:26,410 --> 00:01:33,640
And also we want to add some functionality in the nav bar where if the user is not an admin, well,

24
00:01:33,640 --> 00:01:39,190
we don't even display the page because at the moment if we navigate notice, all the users are going

25
00:01:39,190 --> 00:01:42,220
to have this admin link correct.

26
00:01:42,370 --> 00:01:49,900
And of course there's no need to showcase the link to admin page if the user is not an admin.

27
00:01:50,440 --> 00:01:55,180
So let's just navigate to the page and let's start setting everything up again.

28
00:01:55,180 --> 00:01:57,760
I'm going to right away grab all of these imports.

29
00:01:58,600 --> 00:02:00,760
So I'm looking for the admin one.

30
00:02:01,520 --> 00:02:02,030
And you know what?

31
00:02:02,030 --> 00:02:06,720
I think I'm just going to set everything up and then I'll set up the import for the loader.

32
00:02:06,740 --> 00:02:09,650
Hopefully it's clear that, of course, we always want to do that.

33
00:02:09,680 --> 00:02:16,250
Now, as far as the logic, let's just start over here by setting up that loader export.

34
00:02:16,800 --> 00:02:18,240
Const loader.

35
00:02:18,480 --> 00:02:22,410
Yes, it's going to be async, just like always.

36
00:02:23,090 --> 00:02:26,560
As far as the logic we're going to go here with, try and catch.

37
00:02:26,740 --> 00:02:29,410
Yes, we're looking for a response in this case.

38
00:02:29,420 --> 00:02:32,860
So I'm just going to name this response and then await.

39
00:02:32,950 --> 00:02:37,210
Then we want to go with custom fetch and it's a get request.

40
00:02:37,210 --> 00:02:40,140
And then remember, the URL is following.

41
00:02:40,150 --> 00:02:45,760
We want to go over here with users, then admin and then app.

42
00:02:46,310 --> 00:02:47,200
And stats.

43
00:02:47,780 --> 00:02:51,810
Now, if we're successful, then we want to return the data.

44
00:02:51,830 --> 00:02:57,110
So remember, there is a data property in there, and that's what I want to return.

45
00:02:57,110 --> 00:03:00,110
And like I said, if we have an error.

46
00:03:00,830 --> 00:03:07,970
I just want to showcase that user cannot access the specific page and I also want to navigate away.

47
00:03:07,970 --> 00:03:13,100
So as far as the message I'm going to go, you are not authorized to view this page.

48
00:03:13,100 --> 00:03:20,030
And right after that I want to go with the return redirect and I want to redirect the user back.

49
00:03:20,740 --> 00:03:22,450
To a dashboard page.

50
00:03:22,630 --> 00:03:27,640
And of course, since our job is our index one, technically you can say that we're going to navigate

51
00:03:27,640 --> 00:03:29,930
back to add job page.

52
00:03:29,950 --> 00:03:35,800
Now, inside of the component, I want to grab two of those things users and jobs.

53
00:03:35,800 --> 00:03:38,680
That's what I'm sending back from the controller.

54
00:03:39,010 --> 00:03:46,900
Let's invoke here, use loader data and for now, let's return a wrapper and let's place the heading

55
00:03:46,900 --> 00:03:48,920
one with a text inside of it.

56
00:03:48,940 --> 00:03:51,760
So we're going to go here with admin page.

57
00:03:51,850 --> 00:03:54,550
Then we're going to save it and.

58
00:03:55,310 --> 00:03:58,520
Of course, at the very end we want to navigate to App JS.

59
00:03:58,790 --> 00:04:02,180
We already have the import for the admin page.

60
00:04:02,270 --> 00:04:05,090
What we're looking for of course, is the loader.

61
00:04:06,130 --> 00:04:08,740
So we're going to go here with Loader and then.

62
00:04:09,820 --> 00:04:12,970
We want to go with admin loader.

63
00:04:13,810 --> 00:04:15,730
Let's remove this.

64
00:04:16,240 --> 00:04:19,390
And also we want to change the page.

65
00:04:19,570 --> 00:04:22,480
So this will be our admin page.

66
00:04:22,720 --> 00:04:24,940
Then let's find our instance.

67
00:04:25,670 --> 00:04:26,720
Let's keep on scrolling.

68
00:04:26,720 --> 00:04:27,950
It's right over here.

69
00:04:29,340 --> 00:04:32,700
And let's set it equal to an admin loader.

70
00:04:32,730 --> 00:04:34,820
Now let me navigate to a browser.

71
00:04:34,830 --> 00:04:36,140
Let me refresh.

72
00:04:36,150 --> 00:04:39,480
If everything is correct, I'm going to see the text.

73
00:04:40,240 --> 00:04:45,520
And of course that is because user John in this case is the admin.

74
00:04:45,520 --> 00:04:47,160
So that's my first user.

75
00:04:47,170 --> 00:04:49,270
However, if I'm going to log out.

76
00:04:50,180 --> 00:04:52,790
And log back in as Peter.

77
00:04:53,980 --> 00:04:58,860
If I try to navigate to an admin notice, I'm going to right away have this.

78
00:04:58,870 --> 00:05:04,630
You are not authorized to view this page and as you can see, the error is 403.

79
00:05:04,990 --> 00:05:12,490
And lastly, in this video I want to remove the link from the nav links if the user is not admin.

80
00:05:12,490 --> 00:05:16,210
So now let's navigate to our components.

81
00:05:17,080 --> 00:05:20,860
More specifically, we're looking for the nav links one.

82
00:05:21,010 --> 00:05:27,310
And remember, when we're iterating over, we're grabbing text path and icon and also.

83
00:05:28,000 --> 00:05:30,900
We set up over here to use dashboard context.

84
00:05:30,910 --> 00:05:36,370
So pretty much when we log in, we make a request to find out more info about the user.

85
00:05:36,370 --> 00:05:40,630
And of course we're passing this down in the dashboard layout page.

86
00:05:40,630 --> 00:05:41,170
Correct.

87
00:05:41,170 --> 00:05:43,240
So now I want to access this user.

88
00:05:43,240 --> 00:05:47,170
And more specifically, I'm looking for the role I'll say over here role.

89
00:05:47,170 --> 00:05:50,230
So I'm destructuring out of the user.

90
00:05:50,380 --> 00:05:57,100
And as far as the logic I'm going to go with if path is equal to admin, but the role is not equal to

91
00:05:57,100 --> 00:06:05,950
admin, I'll simply return and essentially as a result we won't display the admin link if the user is

92
00:06:05,950 --> 00:06:06,790
not admin.

93
00:06:06,790 --> 00:06:13,540
So we're going to go here with an operator and we'll say role is not equal to admin.

94
00:06:13,540 --> 00:06:21,130
Then we basically want to return and as a result notice for Peter we cannot see this admin link now

95
00:06:21,130 --> 00:06:21,790
of course.

96
00:06:22,500 --> 00:06:27,350
You can make an argument that, well, technically we can navigate using the URL, correct.

97
00:06:27,360 --> 00:06:29,340
So I can go with dashboard and admin.

98
00:06:29,340 --> 00:06:36,990
But again, please keep in mind that since we have a loader in place, we still make a request and if

99
00:06:36,990 --> 00:06:42,000
the server responds with error, then we right away navigate to add job page.