All right, guys, so now we're getting into the admin stuff.
So the first thing I want to do is just like we created a private root component.
I want to create an admin root component that will only allow admins to see these pages.
So let's go into front end source components and let's create.
Let's see.
Should I just copy?
Yeah, we can just, we can just take our private root and we can copy that and then rename it.
And we're going to rename it to admin root.
Okay.
Now, the really the only thing we need to do is check to see if the user is admin.
So all this stuff is going to stay.
But where we're checking for user info, we also want to check we'll say and if user info dot is admin,
then we want to show the outlet.
So we'll save that.
And then the first admin screen I want to create is the list order screen.
So we'll, we'll get to, you know, creating that entire screen in the next video.
But for now, let's just create the page and the route and make sure that we can basically block it
except for admins.
Now I do want to rename this and this to admin.
And we'll save that.
Now let's create a screen.
And let's see, what are we going to call this?
We're going to call this order list.
Screen.
So order list.
Screen dot JS.
And for now, it really doesn't matter what we put in here.
We'll just keep that.
And then we want to create a route.
So we're going to go into our index.js and we want to bring in the admin route just like we did with
the private.
So we'll say import.
Admin route.
Why isn't it popping up?
Did I name it right.
Yeah.
Admin route.
So import admin route from.
Components admin route, and then we're going to have another area.
So just like we did here, I'll just.
I guess I'll just copy this, paste that in.
Now I'm going to change this to admin root.
And then anything we want for admins, any pages are going to go are going to go in here.
So what I'll do is get rid of all of these but one and let's change this one to it's going to be admin.
Slash order list.
That's going to be the the path.
And then we want to show the order list screen.
And we can auto import that with command.
I should be able to do that.
Okay.
So we brought that in.
All right.
Okay.
So I'm going to save that and then let's try this out.
So I'm logged in as John Smith right now and I'm going to go to slash admin.
Slash.
Order list.
And it just redirects me.
So let's log out and let's log in as admin at email or whatever your admin user is.
And then try to go to slash admin.
Slash.
Order list.
And there we go.
So only admin users can see this page.
Now, one thing I did want to do is for admin screens.
I'm going to actually put it in a subfolder called admin.
So in screens you don't have to do this, but I just want to keep them separate.
So I'm going to move orderless screen into the admin folder.
And then I'm going to say yes to update the imports.
So let's make sure.
In our where we have our roots in the index, make sure that it's being brought in from admin.
Now, the last thing I want to do in this video is I want to have a separate dropdown for admins that
should only be visible for admins so we can go to pages like the order list.
So let's go to our header.
So let's see if we can close back end up let's go to components and then header.
And I'm going to go down here.
Let's see.
So we have our user info.
So we'll just go right under this and we're going to check to see if the user info and if the user is
admin.
And then if that's true, then we're going to have another drop down.
Let's end that drop down.
And then inside that we'll have a link container that goes to let's not let's do the order list.
And then we'll have our dropdown item.
And yeah, that should do it.
So let's save that.
And now I'm able to see this because I am an admin.
Why is that selected?
Uh oh.
Is that because I'm on the page?
Yeah.
So when you're on the page, it's selected.
All right.
Now I just want to try to log out and log in as John and see if we want to make sure that we can't see
that that dropdown.
Oops, did I?
Oh yeah, it's Gmail because I changed it.
Okay.
So now I can't see the admin links and I can't access the order list even if I manually go to that page.
Okay, but I'm going to log back in as admin.
Because we're going to be working with this for a while.
And we might as well put the other pages there.
They're not going to work right now, but we can just put them.
So just grab this link container and copy it down twice.
So we're going to have orders.
Uh, let's see.
Should we do?
Let's do products first.
So the first one, I'm going to change that to products and it's going to be admin slash product list.
And then the last one.
Actually we'll do the middle one for the user.
It doesn't really matter, but I'm going to do the middle one for users, which will be user list.
So now we should have these three.
They're not these aren't going to work.
The products and users, they will soon.
But for now we just have our order list and that's what I want to work on next in the next video.