1 00:00:00,320 --> 00:00:02,480 So now we want to be able to update users. 2 00:00:02,480 --> 00:00:06,530 We also want to be able to see their data on a new screen. 3 00:00:06,530 --> 00:00:10,190 So we're going to start off as usual in the slice. 4 00:00:10,190 --> 00:00:12,740 And there's two things we want to add here. 5 00:00:12,740 --> 00:00:14,360 There's a mutation and a query. 6 00:00:14,360 --> 00:00:17,990 The the query is to get the user details for the page. 7 00:00:17,990 --> 00:00:21,680 And then the the mutation is to update the user. 8 00:00:21,680 --> 00:00:27,680 So let's go right under the delete, which ends right here and let's say get user details. 9 00:00:28,490 --> 00:00:31,130 And this is going to be a query. 10 00:00:32,650 --> 00:00:36,670 So in here we're going to have a query with the user ID. 11 00:00:37,060 --> 00:00:43,000 The URL is that and then and it's a get request so we don't have to put that. 12 00:00:43,000 --> 00:00:48,720 And then let's say keep unused data for five. 13 00:00:48,730 --> 00:00:50,920 So that will get the user details. 14 00:00:50,920 --> 00:00:57,130 And I love how simple this is compared to not using Redux toolkit where it can get really messy. 15 00:00:57,430 --> 00:01:01,330 So let's also add the update. 16 00:01:02,460 --> 00:01:04,860 User mutation. 17 00:01:05,840 --> 00:01:07,670 So for that, we'll have a query. 18 00:01:07,670 --> 00:01:09,970 And let's see, this is going to take in. 19 00:01:09,980 --> 00:01:15,740 We don't need to pass the user ID and we're just going to pass in data because the data will have the 20 00:01:15,740 --> 00:01:16,490 user ID. 21 00:01:17,300 --> 00:01:23,720 I mean, you could do it either way and then the URL will be user's URL slash and then the data. 22 00:01:24,740 --> 00:01:26,660 Let's actually make this. 23 00:01:28,290 --> 00:01:31,140 User ID like that. 24 00:01:31,680 --> 00:01:32,130 Okay. 25 00:01:32,130 --> 00:01:37,170 And then the method is going to be put and then the body is going to have the data. 26 00:01:37,620 --> 00:01:45,240 And then underneath this we're going to say invalidate tags, user, just user. 27 00:01:46,360 --> 00:01:47,860 And that should do it now. 28 00:01:47,860 --> 00:01:50,080 We need to export both of these. 29 00:01:50,080 --> 00:01:59,290 So let's say use get user details query, and then we also want use update user mutation. 30 00:02:00,080 --> 00:02:02,660 So now we need to create a new screen. 31 00:02:02,660 --> 00:02:06,710 So in admin screens, admin create a new file. 32 00:02:06,710 --> 00:02:11,660 We'll call this user edit screen dot js. 33 00:02:12,980 --> 00:02:15,500 And then just to kind of get this. 34 00:02:16,530 --> 00:02:17,700 Get the route going. 35 00:02:17,730 --> 00:02:22,500 Let's just put that in there and then we'll go to our index and we'll bring that in. 36 00:02:22,650 --> 00:02:30,360 So import user edit screen, and then that's going to go in our admin routes. 37 00:02:31,330 --> 00:02:37,270 And the path is admin, user id, colon ID and then edit. 38 00:02:38,550 --> 00:02:45,180 So now if I go back to my user list here and I click on one of these edits. 39 00:02:46,380 --> 00:02:46,770 Okay. 40 00:02:46,770 --> 00:02:48,750 It should be taking me to. 41 00:02:48,750 --> 00:02:49,330 Let's see. 42 00:02:49,350 --> 00:02:49,860 Did I? 43 00:02:49,890 --> 00:02:50,520 Is that. 44 00:02:52,940 --> 00:02:53,510 Oh, I'm sorry. 45 00:02:53,510 --> 00:02:55,040 It should be user. 46 00:02:56,840 --> 00:02:58,370 User list. 47 00:03:00,050 --> 00:03:01,490 I'd edit. 48 00:03:02,080 --> 00:03:03,550 Just to kind of stay? 49 00:03:03,850 --> 00:03:08,620 Well, no, I guess I guess user would make more sense, right? 50 00:03:08,770 --> 00:03:10,150 And we do have product. 51 00:03:10,150 --> 00:03:11,500 Edit Yeah, let's do that. 52 00:03:11,500 --> 00:03:17,620 And then in the user list screen where we have the link. 53 00:03:18,990 --> 00:03:20,160 Let's see. 54 00:03:21,680 --> 00:03:22,240 Oh wait a minute. 55 00:03:22,250 --> 00:03:24,710 It is going to admin user. 56 00:03:25,670 --> 00:03:27,320 So why didn't that work? 57 00:03:27,350 --> 00:03:29,420 Why did it go to user list? 58 00:03:35,040 --> 00:03:35,820 Wait a minute. 59 00:03:36,730 --> 00:03:44,950 This is going to admin user and then the user ID, where is the user list coming in or am I just having 60 00:03:44,950 --> 00:03:46,450 a big brain fart? 61 00:03:47,700 --> 00:03:49,080 User list. 62 00:03:53,550 --> 00:03:53,850 Huh? 63 00:03:57,000 --> 00:03:57,930 I don't get it. 64 00:04:01,750 --> 00:04:02,200 Admin. 65 00:04:02,380 --> 00:04:03,840 Oh, never mind. 66 00:04:03,850 --> 00:04:07,690 It's going to it has the entire it has this route in it too. 67 00:04:07,690 --> 00:04:10,240 I must have screwed something up. 68 00:04:12,720 --> 00:04:14,280 Slash admin. 69 00:04:15,740 --> 00:04:16,279 Um. 70 00:04:18,680 --> 00:04:22,220 Oh, we need to put a slash here, I believe. 71 00:04:24,550 --> 00:04:28,840 I thought it would be smart enough to know that, but I guess not. 72 00:04:28,870 --> 00:04:29,690 There we go. 73 00:04:29,710 --> 00:04:32,440 All right, so now we're going to admin user. 74 00:04:32,830 --> 00:04:37,120 So now let's go back to our user edit screen. 75 00:04:37,120 --> 00:04:42,130 And I think what I'll do is just copy the product, edit screen and then just modify it. 76 00:04:43,950 --> 00:04:47,490 So first thing, the function name. 77 00:04:48,310 --> 00:04:50,050 Which is. 78 00:04:50,050 --> 00:04:51,160 Where is it? 79 00:04:53,900 --> 00:04:55,700 Whereas the function name. 80 00:04:58,440 --> 00:05:00,030 Right here, product edit screen. 81 00:05:00,030 --> 00:05:03,600 We're going to change that and that to user. 82 00:05:04,780 --> 00:05:06,070 Edit screen. 83 00:05:07,120 --> 00:05:12,130 And we can get rid of some stuff up here, like the upload file handler. 84 00:05:12,160 --> 00:05:13,300 Get rid of that. 85 00:05:14,260 --> 00:05:15,370 And. 86 00:05:16,410 --> 00:05:19,920 I guess we'll just start off start off up here with the imports. 87 00:05:19,920 --> 00:05:26,400 So most of the stuff we're going to need, we don't need stuff from products API slice, so we want 88 00:05:26,400 --> 00:05:35,310 to get it from users API slice and we're going to want the get user details so we can change this, 89 00:05:35,310 --> 00:05:41,520 get product to get user details query and then we want the update. 90 00:05:42,290 --> 00:05:43,670 User mutation. 91 00:05:43,670 --> 00:05:44,690 So get rid of that. 92 00:05:44,690 --> 00:05:49,640 And then this one we'll call update user mutation. 93 00:05:51,110 --> 00:05:51,560 All right. 94 00:05:51,560 --> 00:05:52,880 And then we'll move down here. 95 00:05:52,880 --> 00:06:01,070 So for the ID, that's going to be the user ID, get rid of that user and then for the state. 96 00:06:02,430 --> 00:06:03,220 Let's see. 97 00:06:03,240 --> 00:06:08,250 So for the state, we do want the name and then we want email. 98 00:06:08,370 --> 00:06:15,630 So let's change this price, set that to email, and that default is going to be just an empty string. 99 00:06:15,630 --> 00:06:21,300 And we also want, let's see, name email and then is admin. 100 00:06:22,490 --> 00:06:27,440 So is admin and then set ups. 101 00:06:29,010 --> 00:06:30,740 I do set. 102 00:06:32,860 --> 00:06:37,960 Is admin and the default for that is going to be false. 103 00:06:39,910 --> 00:06:40,270 Okay. 104 00:06:40,270 --> 00:06:43,330 And then the rest of this, we can get rid of the rest of the state. 105 00:06:44,600 --> 00:06:49,730 And then we want to get from the the get user details query. 106 00:06:49,730 --> 00:06:53,030 So this should be user and change this. 107 00:06:53,670 --> 00:06:56,280 To use her and then we have is loading error. 108 00:06:56,310 --> 00:06:58,350 Let's also get refetch. 109 00:07:00,670 --> 00:07:06,160 And let's see what else we need to we're bringing in, navigate, right, or use, navigate. 110 00:07:06,160 --> 00:07:09,370 So we need to initialize that or we already have that right here. 111 00:07:09,730 --> 00:07:10,440 All right. 112 00:07:10,450 --> 00:07:12,310 What else do we need here? 113 00:07:13,950 --> 00:07:15,410 Think that's. 114 00:07:16,760 --> 00:07:18,440 Pretty much it. 115 00:07:18,650 --> 00:07:21,650 Let's get rid of this product image thing. 116 00:07:23,360 --> 00:07:24,710 And. 117 00:07:27,380 --> 00:07:28,280 Um, let's see. 118 00:07:28,280 --> 00:07:29,900 Oh, they're right here. 119 00:07:29,930 --> 00:07:33,260 Let's change this to update user. 120 00:07:34,270 --> 00:07:38,110 Mutation and then change this to update user. 121 00:07:40,570 --> 00:07:44,440 And let's see, use effect. 122 00:07:45,370 --> 00:07:45,700 All right. 123 00:07:45,700 --> 00:07:52,360 So we're going to check to see if there's a user and we want to fill the form with the data if if there 124 00:07:52,360 --> 00:07:53,410 is a user. 125 00:07:53,410 --> 00:07:57,010 So change this to user dot name and then. 126 00:07:58,180 --> 00:07:59,950 Get rid of the rest of these. 127 00:07:59,980 --> 00:08:02,890 This one is going to be set email. 128 00:08:04,140 --> 00:08:05,490 To the. 129 00:08:06,460 --> 00:08:08,500 User dot email. 130 00:08:09,650 --> 00:08:12,740 And then this one will be set as admin. 131 00:08:14,720 --> 00:08:15,770 To. 132 00:08:17,050 --> 00:08:22,810 User is admin and then for a dependency, just pass in the user. 133 00:08:23,920 --> 00:08:27,130 Okay, then we have our submit handler, which for now. 134 00:08:27,860 --> 00:08:31,520 For now, we'll just get rid of all this and just do a console. 135 00:08:32,549 --> 00:08:34,620 Console log of submit. 136 00:08:35,620 --> 00:08:41,260 Okay, then we'll move down to the output and let's see, the link is going to the back link is going 137 00:08:41,260 --> 00:08:43,150 to go to our user list. 138 00:08:45,180 --> 00:08:46,800 And let's see. 139 00:08:46,830 --> 00:08:49,200 Right here we'll say Edit user. 140 00:08:50,130 --> 00:08:52,410 We have our loading update. 141 00:08:53,200 --> 00:08:54,820 And then R is loading. 142 00:08:54,820 --> 00:08:57,160 If there's an error, we'll show a message. 143 00:08:57,160 --> 00:08:58,900 And then we have our form. 144 00:08:58,900 --> 00:09:00,730 So we do have a name for the user. 145 00:09:00,730 --> 00:09:02,350 So this should be all set. 146 00:09:03,400 --> 00:09:05,890 The next one, we want to be the email. 147 00:09:05,890 --> 00:09:07,330 So let's change. 148 00:09:10,850 --> 00:09:12,560 All that to email. 149 00:09:13,830 --> 00:09:15,660 Except I'm going to make that uppercase. 150 00:09:15,660 --> 00:09:21,510 And then this e should be uppercase and the type, let's make that type of email. 151 00:09:21,660 --> 00:09:23,880 And then we just have the is admin. 152 00:09:23,880 --> 00:09:28,350 Now the is admin is a check, so I'm going to get rid of the rest of these. 153 00:09:30,080 --> 00:09:31,790 These other form groups. 154 00:09:33,890 --> 00:09:39,800 Down to the button and we want to add our is admin form group. 155 00:09:42,820 --> 00:09:43,060 Just. 156 00:09:44,170 --> 00:09:45,730 Make this nice and neat. 157 00:09:45,910 --> 00:09:46,300 All right. 158 00:09:46,300 --> 00:09:48,430 So this is going to be a check. 159 00:09:49,210 --> 00:09:50,890 I don't know why it does that. 160 00:09:52,200 --> 00:09:53,910 But say form check. 161 00:09:54,920 --> 00:09:56,960 So this is going to have a few. 162 00:09:59,800 --> 00:10:03,460 A few props, so type is going to be checkbox. 163 00:10:03,460 --> 00:10:05,620 And then we have a label. 164 00:10:06,170 --> 00:10:12,710 Which will say is admin checked is going to be set to whatever that state is is admin and on change 165 00:10:12,710 --> 00:10:17,830 it's going to set as admin and then we're going to end that form check. 166 00:10:19,770 --> 00:10:20,100 All right. 167 00:10:20,100 --> 00:10:22,230 So we should at least be able to see it. 168 00:10:22,230 --> 00:10:22,740 Let's see. 169 00:10:22,770 --> 00:10:24,500 Product ID is not defined. 170 00:10:24,510 --> 00:10:25,590 Where did I leave that? 171 00:10:25,590 --> 00:10:27,390 Let's search for product. 172 00:10:27,390 --> 00:10:29,550 So right here, get user details. 173 00:10:29,550 --> 00:10:30,120 Query. 174 00:10:30,120 --> 00:10:31,740 This should be the user ID. 175 00:10:34,850 --> 00:10:35,180 All right. 176 00:10:35,180 --> 00:10:36,650 So we should be good to see it. 177 00:10:36,650 --> 00:10:37,280 And there we go. 178 00:10:37,280 --> 00:10:38,810 Edit User John Smith. 179 00:10:38,810 --> 00:10:41,660 John at Gmail is admin is not checked. 180 00:10:41,660 --> 00:10:47,930 If I go and I look at and I edit admin, although I can't, I shouldn't be able to update this, but 181 00:10:47,930 --> 00:10:51,710 I can see the data and you can see admin is checked. 182 00:10:52,740 --> 00:10:59,970 All right, So now we just need to handle the actual update, which is going to be in the submit handler. 183 00:11:00,210 --> 00:11:05,580 So let's get rid of this console log and let's do a try catch. 184 00:11:07,970 --> 00:11:09,290 And in the try. 185 00:11:09,290 --> 00:11:10,820 We're going to await. 186 00:11:11,520 --> 00:11:13,470 On update user. 187 00:11:15,850 --> 00:11:17,560 Actually we can do that. 188 00:11:18,280 --> 00:11:24,670 So update user is going to take in the user ID, the name email and is admin and then we'll do a toast 189 00:11:24,720 --> 00:11:25,720 success. 190 00:11:25,750 --> 00:11:28,690 We'll do a refetch and then a navigate. 191 00:11:29,440 --> 00:11:34,780 Back to the user list and then we'll just have error down here. 192 00:11:34,780 --> 00:11:36,370 So toast dot error. 193 00:11:37,770 --> 00:11:40,410 And error. 194 00:11:47,390 --> 00:11:47,990 All right. 195 00:11:48,860 --> 00:11:50,540 So that should do it. 196 00:11:50,540 --> 00:11:51,830 Let's see what this warning is. 197 00:11:51,830 --> 00:11:54,170 Navigate is assigned but never used. 198 00:11:54,170 --> 00:11:55,280 It should be used. 199 00:11:55,280 --> 00:11:56,420 It's used right here. 200 00:11:58,190 --> 00:11:59,390 Or is that from before? 201 00:11:59,420 --> 00:12:00,440 I think that. 202 00:12:00,650 --> 00:12:02,180 Yeah, that's from before. 203 00:12:02,210 --> 00:12:03,700 All right, so let's try it out. 204 00:12:03,710 --> 00:12:08,570 So we'll change John Smith to John Doe. 205 00:12:10,480 --> 00:12:15,130 Okay, so we get our toast and it still says John Smith. 206 00:12:17,150 --> 00:12:18,860 Um, let's see. 207 00:12:19,160 --> 00:12:21,530 So if we look at our update. 208 00:12:22,520 --> 00:12:23,030 Gets. 209 00:12:23,030 --> 00:12:23,720 Oh, you know what? 210 00:12:23,720 --> 00:12:31,730 This data should not be destructured because we're sending in this object and then we're using data 211 00:12:31,730 --> 00:12:36,410 dot user ID, so this shouldn't be destructured. 212 00:12:36,410 --> 00:12:42,830 If we wanted to, we could destructure the user ID, But I just want to keep this as data because we're 213 00:12:42,830 --> 00:12:45,380 using it there and then we're sending it in the body. 214 00:12:47,390 --> 00:12:49,580 So, yeah, let's. 215 00:12:51,690 --> 00:12:52,950 Let's try that. 216 00:12:54,340 --> 00:12:55,720 So I'm just going to reload this. 217 00:12:55,720 --> 00:13:02,380 And then let's go to John Smith, change that to John Doe update. 218 00:13:04,650 --> 00:13:06,210 Still John Smith. 219 00:13:06,830 --> 00:13:09,320 Okay, so when I reload, it's John Doe. 220 00:13:09,320 --> 00:13:13,580 So it did actually work, but the UI didn't update for some reason. 221 00:13:16,210 --> 00:13:17,680 Might be users. 222 00:13:19,630 --> 00:13:22,090 I'm not really sure why this is happening. 223 00:13:24,700 --> 00:13:26,920 Because it didn't happen with products. 224 00:13:29,490 --> 00:13:30,360 There we go. 225 00:13:31,740 --> 00:13:33,270 I think that worked right. 226 00:13:34,560 --> 00:13:35,550 Smith. 227 00:13:39,250 --> 00:13:39,610 Yup. 228 00:13:39,700 --> 00:13:40,300 Okay. 229 00:13:40,300 --> 00:13:42,610 So it's users, not user. 230 00:13:45,060 --> 00:13:45,720 All right, good. 231 00:13:45,720 --> 00:13:47,040 So now we can delete. 232 00:13:47,070 --> 00:13:48,360 We can update. 233 00:13:49,330 --> 00:13:54,520 Now, we're not we're not going to make it so we can create a user because the user has to register. 234 00:13:54,520 --> 00:13:58,570 If you want to add that functionality on, you can certainly do that. 235 00:13:58,570 --> 00:14:05,350 And you have an example with products of how we can create, but I'm going to leave it as is. 236 00:14:05,350 --> 00:14:14,350 But the main functionality as far as the front shop and the admin area is done, we do have some other 237 00:14:14,350 --> 00:14:15,580 things I want to add. 238 00:14:15,580 --> 00:14:20,260 So for instance, I want to have reviews on the product pages. 239 00:14:20,260 --> 00:14:25,060 I want to be able to add reviews so users logged in, users can create a review. 240 00:14:25,060 --> 00:14:33,280 And I also want to add pagination because if we have, you know, 500 products I don't want to have 241 00:14:33,280 --> 00:14:35,770 I don't want to load 500 products at once. 242 00:14:35,770 --> 00:14:42,100 So we're going to have to work with the back end and front end to implement pagination. 243 00:14:42,100 --> 00:14:46,270 And then I also want to have a search box so we can filter out products. 244 00:14:46,270 --> 00:14:53,210 And then I also want to have a carousel at the top that will show the top, top rated products. 245 00:14:53,210 --> 00:14:56,030 So that's all going to be coming in the next section. 246 00:14:56,030 --> 00:14:57,260 And I will see you then.