1 00:00:00,230 --> 00:00:03,170 All right, guys, so now we're getting into the admin stuff. 2 00:00:03,170 --> 00:00:07,670 So the first thing I want to do is just like we created a private root component. 3 00:00:07,670 --> 00:00:13,310 I want to create an admin root component that will only allow admins to see these pages. 4 00:00:13,310 --> 00:00:20,150 So let's go into front end source components and let's create. 5 00:00:20,510 --> 00:00:21,020 Let's see. 6 00:00:21,050 --> 00:00:22,160 Should I just copy? 7 00:00:22,160 --> 00:00:29,240 Yeah, we can just, we can just take our private root and we can copy that and then rename it. 8 00:00:30,970 --> 00:00:34,330 And we're going to rename it to admin root. 9 00:00:37,670 --> 00:00:38,120 Okay. 10 00:00:38,150 --> 00:00:43,430 Now, the really the only thing we need to do is check to see if the user is admin. 11 00:00:43,430 --> 00:00:45,850 So all this stuff is going to stay. 12 00:00:45,860 --> 00:00:56,990 But where we're checking for user info, we also want to check we'll say and if user info dot is admin, 13 00:00:57,500 --> 00:00:59,180 then we want to show the outlet. 14 00:00:59,180 --> 00:01:00,860 So we'll save that. 15 00:01:02,540 --> 00:01:08,510 And then the first admin screen I want to create is the list order screen. 16 00:01:08,510 --> 00:01:13,430 So we'll, we'll get to, you know, creating that entire screen in the next video. 17 00:01:13,430 --> 00:01:19,340 But for now, let's just create the page and the route and make sure that we can basically block it 18 00:01:20,120 --> 00:01:21,620 except for admins. 19 00:01:21,650 --> 00:01:25,190 Now I do want to rename this and this to admin. 20 00:01:26,310 --> 00:01:27,480 And we'll save that. 21 00:01:27,480 --> 00:01:29,520 Now let's create a screen. 22 00:01:31,170 --> 00:01:33,090 And let's see, what are we going to call this? 23 00:01:33,090 --> 00:01:34,740 We're going to call this order list. 24 00:01:34,740 --> 00:01:35,400 Screen. 25 00:01:35,400 --> 00:01:37,050 So order list. 26 00:01:37,050 --> 00:01:39,090 Screen dot JS. 27 00:01:41,570 --> 00:01:44,930 And for now, it really doesn't matter what we put in here. 28 00:01:44,930 --> 00:01:46,220 We'll just keep that. 29 00:01:47,060 --> 00:01:50,130 And then we want to create a route. 30 00:01:50,150 --> 00:01:56,180 So we're going to go into our index.js and we want to bring in the admin route just like we did with 31 00:01:56,180 --> 00:01:57,110 the private. 32 00:01:57,140 --> 00:01:59,270 So we'll say import. 33 00:02:00,560 --> 00:02:02,630 Admin route. 34 00:02:05,090 --> 00:02:06,260 Why isn't it popping up? 35 00:02:07,680 --> 00:02:08,520 Did I name it right. 36 00:02:08,520 --> 00:02:08,789 Yeah. 37 00:02:08,820 --> 00:02:09,840 Admin route. 38 00:02:09,840 --> 00:02:12,660 So import admin route from. 39 00:02:14,020 --> 00:02:17,890 Components admin route, and then we're going to have another area. 40 00:02:18,760 --> 00:02:21,550 So just like we did here, I'll just. 41 00:02:21,550 --> 00:02:25,000 I guess I'll just copy this, paste that in. 42 00:02:25,000 --> 00:02:28,120 Now I'm going to change this to admin root. 43 00:02:29,420 --> 00:02:34,880 And then anything we want for admins, any pages are going to go are going to go in here. 44 00:02:36,730 --> 00:02:44,200 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. 45 00:02:44,750 --> 00:02:48,320 Slash order list. 46 00:02:48,350 --> 00:02:50,450 That's going to be the the path. 47 00:02:50,450 --> 00:02:54,050 And then we want to show the order list screen. 48 00:02:56,660 --> 00:02:59,860 And we can auto import that with command. 49 00:02:59,900 --> 00:03:01,640 I should be able to do that. 50 00:03:04,120 --> 00:03:04,510 Okay. 51 00:03:04,510 --> 00:03:05,860 So we brought that in. 52 00:03:07,510 --> 00:03:08,050 All right. 53 00:03:11,540 --> 00:03:11,810 Okay. 54 00:03:11,810 --> 00:03:16,430 So I'm going to save that and then let's try this out. 55 00:03:16,430 --> 00:03:20,240 So I'm logged in as John Smith right now and I'm going to go to slash admin. 56 00:03:20,240 --> 00:03:21,290 Slash. 57 00:03:22,340 --> 00:03:23,720 Order list. 58 00:03:24,570 --> 00:03:26,330 And it just redirects me. 59 00:03:26,340 --> 00:03:35,490 So let's log out and let's log in as admin at email or whatever your admin user is. 60 00:03:36,730 --> 00:03:39,220 And then try to go to slash admin. 61 00:03:39,220 --> 00:03:40,270 Slash. 62 00:03:41,080 --> 00:03:42,340 Order list. 63 00:03:42,990 --> 00:03:43,800 And there we go. 64 00:03:43,800 --> 00:03:46,860 So only admin users can see this page. 65 00:03:46,890 --> 00:03:50,040 Now, one thing I did want to do is for admin screens. 66 00:03:50,040 --> 00:03:53,250 I'm going to actually put it in a subfolder called admin. 67 00:03:53,250 --> 00:03:57,660 So in screens you don't have to do this, but I just want to keep them separate. 68 00:03:57,660 --> 00:04:03,420 So I'm going to move orderless screen into the admin folder. 69 00:04:04,170 --> 00:04:07,410 And then I'm going to say yes to update the imports. 70 00:04:08,330 --> 00:04:10,190 So let's make sure. 71 00:04:11,910 --> 00:04:18,060 In our where we have our roots in the index, make sure that it's being brought in from admin. 72 00:04:19,600 --> 00:04:26,530 Now, the last thing I want to do in this video is I want to have a separate dropdown for admins that 73 00:04:26,530 --> 00:04:30,880 should only be visible for admins so we can go to pages like the order list. 74 00:04:30,910 --> 00:04:32,650 So let's go to our header. 75 00:04:33,900 --> 00:04:38,910 So let's see if we can close back end up let's go to components and then header. 76 00:04:40,320 --> 00:04:42,390 And I'm going to go down here. 77 00:04:42,390 --> 00:04:43,440 Let's see. 78 00:04:45,020 --> 00:04:47,600 So we have our user info. 79 00:04:49,040 --> 00:04:58,010 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 80 00:04:58,040 --> 00:04:58,880 admin. 81 00:04:58,880 --> 00:05:03,650 And then if that's true, then we're going to have another drop down. 82 00:05:05,210 --> 00:05:06,920 Let's end that drop down. 83 00:05:08,350 --> 00:05:14,980 And then inside that we'll have a link container that goes to let's not let's do the order list. 84 00:05:18,430 --> 00:05:20,950 And then we'll have our dropdown item. 85 00:05:22,030 --> 00:05:23,770 And yeah, that should do it. 86 00:05:23,770 --> 00:05:25,540 So let's save that. 87 00:05:25,540 --> 00:05:29,560 And now I'm able to see this because I am an admin. 88 00:05:32,080 --> 00:05:33,790 Why is that selected? 89 00:05:36,400 --> 00:05:37,560 Uh oh. 90 00:05:37,570 --> 00:05:39,340 Is that because I'm on the page? 91 00:05:40,390 --> 00:05:41,050 Yeah. 92 00:05:41,050 --> 00:05:43,540 So when you're on the page, it's selected. 93 00:05:45,410 --> 00:05:45,740 All right. 94 00:05:45,770 --> 00:05:51,860 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 95 00:05:51,860 --> 00:05:54,200 that that dropdown. 96 00:05:57,670 --> 00:05:58,480 Oops, did I? 97 00:05:58,630 --> 00:06:00,820 Oh yeah, it's Gmail because I changed it. 98 00:06:02,290 --> 00:06:02,620 Okay. 99 00:06:02,620 --> 00:06:10,000 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. 100 00:06:10,910 --> 00:06:13,340 Okay, but I'm going to log back in as admin. 101 00:06:14,130 --> 00:06:16,830 Because we're going to be working with this for a while. 102 00:06:19,700 --> 00:06:22,700 And we might as well put the other pages there. 103 00:06:22,730 --> 00:06:25,220 They're not going to work right now, but we can just put them. 104 00:06:25,220 --> 00:06:29,630 So just grab this link container and copy it down twice. 105 00:06:29,630 --> 00:06:31,850 So we're going to have orders. 106 00:06:32,840 --> 00:06:33,410 Uh, let's see. 107 00:06:33,440 --> 00:06:34,550 Should we do? 108 00:06:34,910 --> 00:06:36,920 Let's do products first. 109 00:06:36,920 --> 00:06:44,990 So the first one, I'm going to change that to products and it's going to be admin slash product list. 110 00:06:46,160 --> 00:06:47,990 And then the last one. 111 00:06:50,390 --> 00:06:52,280 Actually we'll do the middle one for the user. 112 00:06:52,280 --> 00:06:57,440 It doesn't really matter, but I'm going to do the middle one for users, which will be user list. 113 00:07:00,630 --> 00:07:02,760 So now we should have these three. 114 00:07:02,790 --> 00:07:04,250 They're not these aren't going to work. 115 00:07:04,260 --> 00:07:06,330 The products and users, they will soon. 116 00:07:06,330 --> 00:07:12,300 But for now we just have our order list and that's what I want to work on next in the next video.