1 00:00:00,140 --> 00:00:01,160 So our back end. 2 00:00:01,960 --> 00:00:02,530 We're all set. 3 00:00:02,560 --> 00:00:04,330 Now we're going to jump into the front end. 4 00:00:04,330 --> 00:00:10,750 And once again, we're going to go into slices and this time users API slice and we're going to create 5 00:00:10,750 --> 00:00:14,110 a get users mutation or sorry, get users query. 6 00:00:14,110 --> 00:00:20,080 So underneath profile, let's say get users and that's going to be a query. 7 00:00:21,660 --> 00:00:29,040 And we'll have query and the URL is just going to be user's URL method is get, although we don't need 8 00:00:29,040 --> 00:00:35,280 that because that's the default and we don't even need these these backticks since it's just user's 9 00:00:35,280 --> 00:00:36,870 URL, we can just do that. 10 00:00:36,870 --> 00:00:38,280 It's really up to you. 11 00:00:38,430 --> 00:00:46,890 And then we're going to also add in right here, provides tags and set that to users. 12 00:00:46,890 --> 00:00:54,030 And that's because if we don't do this, then we might have to reload after we delete the user to actually 13 00:00:54,030 --> 00:00:57,060 see it go away because that'll remove it from cache. 14 00:00:57,060 --> 00:01:04,379 And then we're also going to add in keep unused data for five seconds and that should do it. 15 00:01:04,379 --> 00:01:09,600 So let's export use, get user's query. 16 00:01:10,500 --> 00:01:12,420 And then we're going to have. 17 00:01:13,610 --> 00:01:14,900 A users list. 18 00:01:14,900 --> 00:01:21,410 So let's go into screen's admin and let's create a new screen called User. 19 00:01:22,960 --> 00:01:23,440 Yeah. 20 00:01:23,470 --> 00:01:24,220 User List. 21 00:01:24,220 --> 00:01:26,500 Screen Gsx. 22 00:01:28,120 --> 00:01:28,570 Okay. 23 00:01:28,570 --> 00:01:32,950 And then I'm actually going to copy. 24 00:01:32,950 --> 00:01:37,480 Well, actually, let's just get something in here first and then add the the root. 25 00:01:38,030 --> 00:01:39,170 So we'll add that. 26 00:01:39,170 --> 00:01:40,430 Go to Index.js. 27 00:01:40,460 --> 00:01:41,600 Bring in. 28 00:01:43,520 --> 00:01:49,670 Import user list screen, and then we'll add that to in our admin routes. 29 00:01:50,960 --> 00:01:51,620 Like that. 30 00:01:51,620 --> 00:01:57,320 And then we should be able to to go to users. 31 00:01:57,350 --> 00:01:57,860 Good. 32 00:01:59,690 --> 00:02:00,080 All right. 33 00:02:00,110 --> 00:02:06,760 Now I'm going to copy what we have in the order list screen because it's kind of similar. 34 00:02:06,770 --> 00:02:11,180 So we'll grab that and we'll paste that in here. 35 00:02:11,180 --> 00:02:16,370 And let's just change this and this to user. 36 00:02:17,620 --> 00:02:18,970 List screen. 37 00:02:19,770 --> 00:02:21,780 And then what we're going to bring in. 38 00:02:21,780 --> 00:02:24,030 So we do want link container. 39 00:02:24,390 --> 00:02:26,100 What else do we want here? 40 00:02:26,100 --> 00:02:27,510 Table and button. 41 00:02:28,750 --> 00:02:32,890 We want for we want the for trash. 42 00:02:32,890 --> 00:02:34,720 I don't think we need times. 43 00:02:35,750 --> 00:02:36,770 I don't think so. 44 00:02:36,770 --> 00:02:38,630 So let's do trash. 45 00:02:38,840 --> 00:02:42,410 Actually, we do, I think because we need to show off their admin or not. 46 00:02:42,410 --> 00:02:50,360 But we're going to have a delete button so we want for trash and let's do a edit. 47 00:02:51,120 --> 00:02:54,480 And for a check. 48 00:02:54,510 --> 00:02:56,270 I think those are the ones we need. 49 00:02:56,280 --> 00:03:02,040 And then we have our message, our loader now instead of get orders query, we want our get users query 50 00:03:02,040 --> 00:03:05,940 that we just created and that's in the users API slice. 51 00:03:07,910 --> 00:03:15,950 And then let's see right here we're going to get from user get user's query and we're going to get the 52 00:03:15,950 --> 00:03:20,180 data, which is going to be the users and is loading. 53 00:03:20,180 --> 00:03:22,280 I also want to get refetch. 54 00:03:23,560 --> 00:03:25,780 And is loading an error. 55 00:03:25,810 --> 00:03:26,340 Good. 56 00:03:26,350 --> 00:03:29,290 We're going to have a delete handler, so we might as well just. 57 00:03:30,050 --> 00:03:32,180 Create that real quick and just do a. 58 00:03:33,640 --> 00:03:35,440 Console log for now. 59 00:03:37,080 --> 00:03:37,530 Okay. 60 00:03:37,530 --> 00:03:40,650 And then here, let's change this to users. 61 00:03:41,790 --> 00:03:49,860 And let's see is loading so this stuff can stay the same table is going to be the same format for the 62 00:03:49,860 --> 00:03:50,430 fields, though. 63 00:03:50,430 --> 00:03:52,830 We're going to have ID name. 64 00:03:53,590 --> 00:03:54,550 Email. 65 00:03:56,770 --> 00:03:57,760 Admin. 66 00:03:59,820 --> 00:04:02,280 And that should be it. 67 00:04:02,280 --> 00:04:08,250 And we just want this empty, but we can get rid of those and then we're going to map through the users, 68 00:04:08,250 --> 00:04:09,420 not the orders. 69 00:04:09,420 --> 00:04:13,650 So users and then change this to user. 70 00:04:13,740 --> 00:04:17,610 And then in the table row, we'll have the. 71 00:04:19,310 --> 00:04:21,950 EHR user ID is the key. 72 00:04:22,130 --> 00:04:25,220 And then we'll have let's see, what was the first one? 73 00:04:25,220 --> 00:04:25,460 Yeah. 74 00:04:25,500 --> 00:04:29,030 ID So that needs to be user. 75 00:04:29,030 --> 00:04:32,150 And then we have the user name as the second one here. 76 00:04:32,150 --> 00:04:35,930 So let's say user dot name. 77 00:04:36,470 --> 00:04:43,700 Then we have the email and I actually want to have a link around a link so that we can click it and 78 00:04:43,700 --> 00:04:45,170 it will open the email client. 79 00:04:45,170 --> 00:04:53,840 So let's do an A tag here and we'll have it go to let's put in some curly braces and then in some backticks 80 00:04:53,870 --> 00:04:54,590 not quotes. 81 00:04:54,590 --> 00:04:58,340 Backticks we're going to put in a male too. 82 00:04:58,910 --> 00:05:01,070 So male to and then. 83 00:05:02,310 --> 00:05:09,600 We'll put in the user dot email and then for the text that will just be. 84 00:05:10,740 --> 00:05:13,170 User dot email as well. 85 00:05:14,250 --> 00:05:16,770 Okay now for the is admin. 86 00:05:18,360 --> 00:05:23,250 Actually the Is admin is going to be similar to this, so I'm going to get rid of the price one here. 87 00:05:24,140 --> 00:05:32,270 And then for this let's change order is paid to user dot is admin because we're going to check to see 88 00:05:32,510 --> 00:05:33,710 if it's admin. 89 00:05:33,710 --> 00:05:36,350 If so, then we're going to have a check. 90 00:05:36,380 --> 00:05:38,240 Actually, I'll just copy this. 91 00:05:38,570 --> 00:05:40,690 If so, then we're going to do for. 92 00:05:42,440 --> 00:05:45,500 Check and let's make the color green. 93 00:05:47,610 --> 00:05:48,570 Okay else. 94 00:05:48,570 --> 00:05:53,550 If it's not an admin, then we'll have an FA times color red, so we don't need to change that. 95 00:05:53,550 --> 00:05:57,630 And then let's get rid of this TD With the order delivered, we don't need that. 96 00:05:57,630 --> 00:06:02,190 And then the last one is the link container and that's going to go to. 97 00:06:02,950 --> 00:06:06,970 Let's see, that's going to go to admin slash user. 98 00:06:09,630 --> 00:06:12,570 And then Slack is going to go to the edit page. 99 00:06:12,570 --> 00:06:19,410 So in here we'll have the user dot underscore ID and then slash edit. 100 00:06:19,770 --> 00:06:23,100 That's not a working link right now, but it will be. 101 00:06:23,100 --> 00:06:25,860 And then the button, that stuff. 102 00:06:27,320 --> 00:06:28,910 The class that can stay the same. 103 00:06:28,910 --> 00:06:32,530 But I do want to have the the edit button here so far. 104 00:06:32,540 --> 00:06:33,170 Edit. 105 00:06:34,650 --> 00:06:39,780 And then underneath that we need the delete, which isn't going to be a link container. 106 00:06:39,780 --> 00:06:40,950 It's going to be a button. 107 00:06:40,950 --> 00:06:49,650 Let's do variant danger class name, BTN, SM on Click, we're going to call our on our delete handler 108 00:06:49,950 --> 00:06:53,580 and in the button we'll just have our trash icon. 109 00:06:53,760 --> 00:06:55,950 Except I want to make the color white. 110 00:06:55,950 --> 00:06:57,540 So let's say style. 111 00:06:58,420 --> 00:07:04,900 And we want double curly braces in here and then color and we'll set that to white. 112 00:07:04,930 --> 00:07:05,260 All right. 113 00:07:05,260 --> 00:07:08,230 So let's save that and we'll check it out. 114 00:07:09,370 --> 00:07:09,880 There we go. 115 00:07:09,880 --> 00:07:11,050 So we have our users. 116 00:07:11,050 --> 00:07:15,190 You can see the this one has a check because that's an admin. 117 00:07:15,490 --> 00:07:15,760 Okay. 118 00:07:15,760 --> 00:07:19,510 So in the next video we're going to do the delete so we can delete a user. 119 00:07:19,510 --> 00:07:23,950 And then in the one after that, we're going to make it so that we can edit the user data.