Okay.
Before we set up admin page, let's also quickly recall the request we're going to be working with.
So the URL is going to be forward slash users forward slash admin and forward slash app stats.
It's going to be a get request.
But most important thing we need to remember is the fact that only the users whose role is admin in
my case it's only John can access this route.
Now if that's the case, we're going to get info on all the users currently we have in the application
as well as how many jobs they have created.
Now, if.
The user is not admin, then of course we're going to get back the error response.
All right.
And once we have delete functionality in place, now let's work on the admin page.
Now honestly, the actual page is pretty straightforward.
The one thing we need to remember though is the fact that admin page is only accessible to a user whose
role is admin.
And therefore when we set up the loader if.
We get some kind of error.
Essentially, we'll redirect the user back to the dashboard.
Now, if we're successful, then remember we access two things.
We access users and jobs.
That's what we return from the controller.
And of course, eventually we will render it.
And also we want to add some functionality in the nav bar where if the user is not an admin, well,
we don't even display the page because at the moment if we navigate notice, all the users are going
to have this admin link correct.
And of course there's no need to showcase the link to admin page if the user is not an admin.
So let's just navigate to the page and let's start setting everything up again.
I'm going to right away grab all of these imports.
So I'm looking for the admin one.
And you know what?
I think I'm just going to set everything up and then I'll set up the import for the loader.
Hopefully it's clear that, of course, we always want to do that.
Now, as far as the logic, let's just start over here by setting up that loader export.
Const loader.
Yes, it's going to be async, just like always.
As far as the logic we're going to go here with, try and catch.
Yes, we're looking for a response in this case.
So I'm just going to name this response and then await.
Then we want to go with custom fetch and it's a get request.
And then remember, the URL is following.
We want to go over here with users, then admin and then app.
And stats.
Now, if we're successful, then we want to return the data.
So remember, there is a data property in there, and that's what I want to return.
And like I said, if we have an error.
I just want to showcase that user cannot access the specific page and I also want to navigate away.
So as far as the message I'm going to go, you are not authorized to view this page.
And right after that I want to go with the return redirect and I want to redirect the user back.
To a dashboard page.
And of course, since our job is our index one, technically you can say that we're going to navigate
back to add job page.
Now, inside of the component, I want to grab two of those things users and jobs.
That's what I'm sending back from the controller.
Let's invoke here, use loader data and for now, let's return a wrapper and let's place the heading
one with a text inside of it.
So we're going to go here with admin page.
Then we're going to save it and.
Of course, at the very end we want to navigate to App JS.
We already have the import for the admin page.
What we're looking for of course, is the loader.
So we're going to go here with Loader and then.
We want to go with admin loader.
Let's remove this.
And also we want to change the page.
So this will be our admin page.
Then let's find our instance.
Let's keep on scrolling.
It's right over here.
And let's set it equal to an admin loader.
Now let me navigate to a browser.
Let me refresh.
If everything is correct, I'm going to see the text.
And of course that is because user John in this case is the admin.
So that's my first user.
However, if I'm going to log out.
And log back in as Peter.
If I try to navigate to an admin notice, I'm going to right away have this.
You are not authorized to view this page and as you can see, the error is 403.
And lastly, in this video I want to remove the link from the nav links if the user is not admin.
So now let's navigate to our components.
More specifically, we're looking for the nav links one.
And remember, when we're iterating over, we're grabbing text path and icon and also.
We set up over here to use dashboard context.
So pretty much when we log in, we make a request to find out more info about the user.
And of course we're passing this down in the dashboard layout page.
Correct.
So now I want to access this user.
And more specifically, I'm looking for the role I'll say over here role.
So I'm destructuring out of the user.
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
admin, I'll simply return and essentially as a result we won't display the admin link if the user is
not admin.
So we're going to go here with an operator and we'll say role is not equal to admin.
Then we basically want to return and as a result notice for Peter we cannot see this admin link now
of course.
You can make an argument that, well, technically we can navigate using the URL, correct.
So I can go with dashboard and admin.
But again, please keep in mind that since we have a loader in place, we still make a request and if
the server responds with error, then we right away navigate to add job page.