1 00:00:00,320 --> 00:00:00,800 All right, guys. 2 00:00:00,800 --> 00:00:02,960 So now we're going to start on the pro file. 3 00:00:02,960 --> 00:00:10,220 So basically we want a page when we go to this profile link to display the user data, basically just 4 00:00:10,220 --> 00:00:11,930 our name and email. 5 00:00:11,930 --> 00:00:18,440 And we want a we want it in a form where we can submit and update that information. 6 00:00:18,440 --> 00:00:24,020 And then we also want to list on our profile all of the orders that we've made. 7 00:00:24,020 --> 00:00:30,500 So let's start off in in the users API slice, because that's where we're going to have our mutation 8 00:00:30,500 --> 00:00:32,270 to update the profile. 9 00:00:32,270 --> 00:00:33,590 And it's pretty simple. 10 00:00:33,590 --> 00:00:39,110 So we're going to go right under logout, which ends right here and we'll call this profile and it's 11 00:00:39,110 --> 00:00:40,400 going to be a mutation. 12 00:00:40,400 --> 00:00:41,660 So builder. 13 00:00:42,050 --> 00:00:44,360 Builder dot mutation. 14 00:00:45,650 --> 00:00:48,290 And it's going to take in an object. 15 00:00:48,770 --> 00:00:50,450 We're going to have a query. 16 00:00:50,980 --> 00:00:57,280 So the URL is going to be just users URL slash profile, but it's going to be a put request because 17 00:00:57,280 --> 00:00:58,930 it's going to be an update. 18 00:00:59,200 --> 00:00:59,620 Okay. 19 00:00:59,620 --> 00:01:03,670 And this is the this is going to take in data. 20 00:01:04,360 --> 00:01:10,270 So it's going to take in data method is going to be put and then we need to send the data in the body 21 00:01:10,300 --> 00:01:11,380 like that. 22 00:01:12,660 --> 00:01:14,670 And that should do it. 23 00:01:14,670 --> 00:01:15,150 Let's see. 24 00:01:15,150 --> 00:01:15,870 What did I. 25 00:01:17,780 --> 00:01:18,320 Um. 26 00:01:18,320 --> 00:01:20,300 Oh, we got to close this. 27 00:01:21,680 --> 00:01:22,400 There we go. 28 00:01:23,480 --> 00:01:26,650 So now we just want to export this. 29 00:01:26,660 --> 00:01:30,580 So let's say use profile. 30 00:01:30,590 --> 00:01:32,000 Oops, use. 31 00:01:32,890 --> 00:01:34,780 Profile mutation. 32 00:01:35,710 --> 00:01:36,310 Okay. 33 00:01:36,310 --> 00:01:43,690 And then we'll be able to use that in our profile screen, which is what we want to create next. 34 00:01:43,690 --> 00:01:44,950 So let's close that up. 35 00:01:44,950 --> 00:01:48,040 Let's go into our screens. 36 00:01:48,700 --> 00:01:52,990 And let's create profile screen dot js. 37 00:01:56,440 --> 00:01:58,420 Okay, so we have our profile screen. 38 00:01:58,420 --> 00:02:01,840 I'm just going to save it and create the route just so we can see it. 39 00:02:02,490 --> 00:02:07,890 So let's go to our front end source index and bring in. 40 00:02:09,669 --> 00:02:16,360 The profile screen, and then we're going to add that to the the routes where obviously you have to 41 00:02:16,360 --> 00:02:19,570 be registered to to see the profile. 42 00:02:19,570 --> 00:02:23,440 So now if I just click on profile, I should just see this text. 43 00:02:23,440 --> 00:02:29,650 So let's go back to the profile screen and let's bring in the stuff that we need. 44 00:02:30,510 --> 00:02:32,610 So I'm going to import. 45 00:02:33,380 --> 00:02:36,980 We're going to bring in use state and use effect. 46 00:02:38,470 --> 00:02:45,940 And then import a few things from React Bootstrap, such as table because I'm going to show the orders 47 00:02:45,940 --> 00:02:48,260 in the table form. 48 00:02:48,280 --> 00:02:50,050 Let's do button. 49 00:02:50,500 --> 00:02:53,020 And then I also want row and column. 50 00:02:53,020 --> 00:02:55,090 So row and call. 51 00:02:56,070 --> 00:02:56,670 Okay. 52 00:02:56,670 --> 00:03:04,320 And then we're also going to bring in the link container and the use dispatch and use selector because 53 00:03:04,320 --> 00:03:07,970 we need to to get the state and we need to dispatch actions. 54 00:03:07,980 --> 00:03:12,300 We're going to bring in the message component, the loader component. 55 00:03:12,330 --> 00:03:14,400 We're going to bring in toast. 56 00:03:14,760 --> 00:03:16,500 So import. 57 00:03:18,610 --> 00:03:20,380 Toast from React. 58 00:03:20,410 --> 00:03:20,680 Toast. 59 00:03:20,680 --> 00:03:21,540 Defy. 60 00:03:21,550 --> 00:03:26,400 And then let's bring in the use profile mutation that we just created. 61 00:03:26,410 --> 00:03:29,830 So use profile mutation. 62 00:03:30,280 --> 00:03:36,080 And we're also going to bring in set credentials because we're going to be able to update our. 63 00:03:36,900 --> 00:03:37,860 Our data. 64 00:03:38,010 --> 00:03:43,340 And if we do that, like if we update the email, we want to, we want to set the credentials. 65 00:03:43,350 --> 00:03:48,600 So let's import set credentials. 66 00:03:48,600 --> 00:03:50,640 And that's from the auth slice. 67 00:03:51,420 --> 00:03:51,840 Okay. 68 00:03:51,840 --> 00:03:57,210 Now down here in the profile screen, let's put our state at the top. 69 00:03:57,210 --> 00:04:00,720 So we have our name, our email. 70 00:04:01,740 --> 00:04:02,940 Password. 71 00:04:04,560 --> 00:04:10,620 And we're going to do confirm password as well because we'll be able to update our password. 72 00:04:10,620 --> 00:04:12,330 And then let's get. 73 00:04:14,320 --> 00:04:20,709 Yeah, I guess we could set the dispatch and then I want to get the user info so from the, from the 74 00:04:20,709 --> 00:04:21,339 auth state. 75 00:04:21,339 --> 00:04:30,940 So let's say const and we'll get user info and that's going to be from the state dot auth using use 76 00:04:30,940 --> 00:04:31,840 selector. 77 00:04:32,670 --> 00:04:36,840 Okay, Now in our use effect, let's say use effect. 78 00:04:37,920 --> 00:04:39,840 Let's pass in a function. 79 00:04:40,550 --> 00:04:42,680 And our dependencies. 80 00:04:43,540 --> 00:04:43,930 Okay. 81 00:04:43,930 --> 00:04:46,330 And what I want to do here is fill. 82 00:04:46,420 --> 00:04:50,950 So I want to fill the username. 83 00:04:51,100 --> 00:04:53,190 I'm sorry, the name and the email. 84 00:04:53,200 --> 00:04:55,180 So we'll go ahead and do that. 85 00:04:55,180 --> 00:05:00,310 And obviously user info is coming from our global state. 86 00:05:00,340 --> 00:05:02,710 Now we do have to add those as dependencies. 87 00:05:02,710 --> 00:05:08,380 So let's say user info, dot name and user info dot email. 88 00:05:09,380 --> 00:05:11,850 Okay, let's save and make sure we have no errors. 89 00:05:11,870 --> 00:05:12,500 Good. 90 00:05:13,210 --> 00:05:14,950 And then what else? 91 00:05:14,950 --> 00:05:17,950 We're going to have a submit handler, so we might as well just. 92 00:05:18,910 --> 00:05:19,870 Create that. 93 00:05:19,870 --> 00:05:21,760 For now, we'll say const. 94 00:05:22,970 --> 00:05:24,770 Submit handler. 95 00:05:25,990 --> 00:05:27,910 And for now, we're just going to. 96 00:05:29,010 --> 00:05:30,660 Do a console log. 97 00:05:33,480 --> 00:05:34,670 Console log. 98 00:05:34,770 --> 00:05:35,790 Submit. 99 00:05:40,660 --> 00:05:41,320 Okay. 100 00:05:42,200 --> 00:05:47,180 So in the output here, we're going to wrap everything in a row. 101 00:05:47,450 --> 00:05:49,130 So let's put a row. 102 00:05:51,320 --> 00:05:53,410 And we'll have a call. 103 00:05:53,420 --> 00:05:57,020 We're going to have a call with that takes up three spaces. 104 00:05:57,020 --> 00:05:59,990 And then we'll also have another call under that. 105 00:05:59,990 --> 00:06:01,550 That takes up nine. 106 00:06:01,550 --> 00:06:03,380 So let's do nine. 107 00:06:05,730 --> 00:06:06,240 All right. 108 00:06:06,240 --> 00:06:10,050 And then for now, we'll just say column. 109 00:06:11,370 --> 00:06:13,140 And column. 110 00:06:14,920 --> 00:06:15,730 Okay, good. 111 00:06:16,610 --> 00:06:23,810 So we'll work on the first column, which is going to be basically the form that that has all of our 112 00:06:23,810 --> 00:06:24,980 user data in it. 113 00:06:24,980 --> 00:06:27,780 And the big column is going to be the orders. 114 00:06:27,800 --> 00:06:34,580 So let's put an H2 here and then we'll have a form that is hooked to the submit handler. 115 00:06:36,180 --> 00:06:43,590 And in the form we're going to have form group, this is going to be for the the name. 116 00:06:43,590 --> 00:06:46,980 And I'm just going to also add a class name here. 117 00:06:47,130 --> 00:06:50,400 And I just want to add some margin on the top and bottom. 118 00:06:51,350 --> 00:06:53,540 And let's close the form group. 119 00:06:53,930 --> 00:06:54,470 Okay. 120 00:06:54,470 --> 00:06:59,420 And then inside that form group, we'll have the label for the name and then the form control, which 121 00:06:59,420 --> 00:07:06,740 will be the input type name, placeholder, enter, name, value name, and then an onchange, which 122 00:07:06,740 --> 00:07:09,020 will set the name in the state. 123 00:07:09,020 --> 00:07:12,040 And then we can end the form control. 124 00:07:12,050 --> 00:07:13,580 So let's take a look. 125 00:07:13,610 --> 00:07:14,120 There we go. 126 00:07:14,120 --> 00:07:17,930 And you can see John Doe has put in there because I'm logged in as John Doe. 127 00:07:17,960 --> 00:07:22,220 I got the user info from the state here and then the use effect. 128 00:07:22,220 --> 00:07:25,310 I said, if we have user info then fill the name. 129 00:07:25,640 --> 00:07:26,030 Okay? 130 00:07:26,030 --> 00:07:31,690 And that name is that in the state is hooked up to this form control or this input. 131 00:07:31,700 --> 00:07:34,700 So now I'm going to copy this form group. 132 00:07:35,930 --> 00:07:40,130 And let's go under that, paste that in and this is going to be for the email. 133 00:07:40,130 --> 00:07:42,740 So I'm going to change this to email. 134 00:07:43,970 --> 00:07:45,740 Let's say email. 135 00:07:46,590 --> 00:07:47,670 Address. 136 00:07:48,650 --> 00:07:49,550 Type. 137 00:07:49,700 --> 00:07:53,090 We'll change that to email and then let's say enter. 138 00:07:54,890 --> 00:07:56,000 Email. 139 00:07:56,510 --> 00:07:59,270 The value will be the email from the state. 140 00:08:00,380 --> 00:08:02,060 This is going to be set. 141 00:08:02,800 --> 00:08:03,700 Email. 142 00:08:03,970 --> 00:08:04,780 Save that. 143 00:08:04,780 --> 00:08:05,560 Let's check it out. 144 00:08:05,560 --> 00:08:06,430 There we go. 145 00:08:07,490 --> 00:08:12,830 Now we're going to have the password, so let's paste in another form group. 146 00:08:14,590 --> 00:08:16,210 It's going to be password. 147 00:08:20,050 --> 00:08:22,480 Password and type. 148 00:08:23,460 --> 00:08:24,690 Password. 149 00:08:25,880 --> 00:08:27,710 Enter password. 150 00:08:29,480 --> 00:08:31,940 And change that. 151 00:08:34,000 --> 00:08:36,940 And change this to set password. 152 00:08:38,940 --> 00:08:39,720 Okay. 153 00:08:42,650 --> 00:08:43,070 All right. 154 00:08:43,100 --> 00:08:44,630 Now for. 155 00:08:45,900 --> 00:08:47,520 Let's see for the next one. 156 00:08:47,520 --> 00:08:49,530 It's just going to be a confirm password. 157 00:08:49,530 --> 00:08:50,760 So I'm going to grab. 158 00:08:52,060 --> 00:08:53,170 That. 159 00:08:55,470 --> 00:08:56,340 Actually, you know what? 160 00:08:56,370 --> 00:08:58,140 We don't have to do. 161 00:09:01,380 --> 00:09:02,910 Yeah, I guess that's fine. 162 00:09:02,910 --> 00:09:03,750 That's fine. 163 00:09:05,310 --> 00:09:11,580 We're not pre-filling the password field, so we're just pre-filling the name and email that's going 164 00:09:11,580 --> 00:09:12,660 to be blank. 165 00:09:12,660 --> 00:09:17,970 But it is connected to the password state, which is just by default an empty string. 166 00:09:17,970 --> 00:09:23,160 So now under that form group, actually I'm going to copy the password one because this one's pretty 167 00:09:23,190 --> 00:09:23,970 similar. 168 00:09:23,970 --> 00:09:26,190 So this one we're going to call. 169 00:09:26,840 --> 00:09:28,730 Confirm password. 170 00:09:33,450 --> 00:09:39,300 So confirm password type is going to be password and then we'll say confirm. 171 00:09:42,260 --> 00:09:47,330 Change this to confirm and then set. 172 00:09:47,880 --> 00:09:49,620 Confirm password. 173 00:09:50,420 --> 00:09:53,300 Okay, now we just want the button to update. 174 00:09:53,300 --> 00:09:58,130 So let's put this right under the form group button. 175 00:09:58,940 --> 00:09:59,960 Update. 176 00:10:01,300 --> 00:10:04,840 And yeah type submit variant primary. 177 00:10:05,640 --> 00:10:06,960 Let's take a look. 178 00:10:07,170 --> 00:10:07,860 Cool. 179 00:10:09,380 --> 00:10:13,220 Now what I want to do is make this form work. 180 00:10:13,220 --> 00:10:18,650 So if we want to update something so we already have our mutation, we already I believe we brought 181 00:10:18,650 --> 00:10:19,070 it in. 182 00:10:19,100 --> 00:10:20,870 Yeah, we brought it in right here. 183 00:10:20,870 --> 00:10:27,590 So now we just want to get the function to call and then also the is loading. 184 00:10:27,590 --> 00:10:31,190 So let's do that right above the use effect. 185 00:10:31,190 --> 00:10:36,500 We'll say const and set that to use profile mutation. 186 00:10:37,580 --> 00:10:40,610 And let's call this, let's say update. 187 00:10:41,280 --> 00:10:42,420 Profile. 188 00:10:43,130 --> 00:10:46,400 And then we have our is loading. 189 00:10:47,530 --> 00:10:50,350 And I'm going to rename that to loading. 190 00:10:51,120 --> 00:10:52,950 Update profile. 191 00:10:55,210 --> 00:10:55,720 Okay. 192 00:10:55,720 --> 00:11:00,250 And then let's see what we want to do here next. 193 00:11:03,020 --> 00:11:03,950 Uh, yeah. 194 00:11:03,950 --> 00:11:06,860 So we might as well just move on to the submit handler. 195 00:11:06,860 --> 00:11:10,550 I don't think there's anything else that I want to add, actually, for the loading. 196 00:11:10,550 --> 00:11:12,650 Let's do that under the button. 197 00:11:14,150 --> 00:11:17,390 So right here, we're just going to say if. 198 00:11:18,260 --> 00:11:19,040 Loading. 199 00:11:19,080 --> 00:11:20,180 Update profile. 200 00:11:20,180 --> 00:11:21,590 Then show the loader. 201 00:11:21,860 --> 00:11:24,890 Other than that, we just want to do the submit handler. 202 00:11:25,010 --> 00:11:30,620 So first off, I want to check to see if the password matches the confirm password. 203 00:11:31,470 --> 00:11:36,510 So we'll do that and then we'll say, if it doesn't. 204 00:11:36,510 --> 00:11:38,880 If it doesn't, then we're going to just show the. 205 00:11:40,080 --> 00:11:41,100 Toast. 206 00:11:41,670 --> 00:11:44,990 And then what we'll want to do is a try. 207 00:11:45,030 --> 00:11:45,900 Catch. 208 00:11:47,310 --> 00:11:50,940 And let's go in the try and we'll say const. 209 00:11:51,640 --> 00:11:52,720 Raise. 210 00:11:52,720 --> 00:11:58,510 Set that to await update profile and we're going to pass in. 211 00:11:59,680 --> 00:12:01,870 Actually, we need to make this async. 212 00:12:05,130 --> 00:12:06,240 That you get rid of that. 213 00:12:06,240 --> 00:12:06,540 All right. 214 00:12:06,540 --> 00:12:14,940 So update profile is going to take in the the name, email and password. 215 00:12:14,940 --> 00:12:22,590 We're also going to pass in the ID, so underscore ID and we're going to set that to user info. 216 00:12:22,590 --> 00:12:24,660 Dot underscore ID. 217 00:12:29,060 --> 00:12:31,490 Yeah, that should work. 218 00:12:31,790 --> 00:12:32,180 All right. 219 00:12:32,180 --> 00:12:38,540 And then we also want to just unwrap so this this update profile, we just want to add on to that dot 220 00:12:38,570 --> 00:12:39,440 unwrap. 221 00:12:40,530 --> 00:12:47,780 Just like we've done with the other actions that we've brought in from APIs or API slices. 222 00:12:47,790 --> 00:12:50,130 And then let's do a toast error. 223 00:12:50,160 --> 00:12:52,230 So toast dot error. 224 00:12:52,900 --> 00:13:00,580 And here we're going to do error question mark, dot data dot message. 225 00:13:01,750 --> 00:13:04,420 Or just error. 226 00:13:05,760 --> 00:13:08,720 Not message, but just error dot error. 227 00:13:08,730 --> 00:13:12,210 And let's make this just error. 228 00:13:14,620 --> 00:13:16,570 So I think that should work. 229 00:13:17,530 --> 00:13:20,890 Was this rise is assigned but never used. 230 00:13:21,490 --> 00:13:22,510 Oh, that's right. 231 00:13:22,510 --> 00:13:26,170 So raise the reason we're putting this. 232 00:13:26,170 --> 00:13:32,410 So this will actually do the update but we're putting the updated data into Rez because then we want 233 00:13:32,410 --> 00:13:36,280 to set the credentials to that rez to that response. 234 00:13:36,280 --> 00:13:46,270 So let's say dispatch set credentials and then pass in rez and we'll do a success and say profile updated. 235 00:13:47,320 --> 00:13:49,930 All right, So let's see. 236 00:13:49,960 --> 00:13:52,330 Do I have a dependency issue here? 237 00:13:52,570 --> 00:13:53,350 Let me just. 238 00:13:54,270 --> 00:13:55,200 Let's take a look. 239 00:13:55,230 --> 00:13:56,610 Use effect. 240 00:13:58,740 --> 00:14:00,210 Oh, I think we should be good. 241 00:14:01,700 --> 00:14:02,270 React. 242 00:14:02,270 --> 00:14:05,930 Hook is missing a dependency user info. 243 00:14:07,590 --> 00:14:08,190 Um. 244 00:14:10,130 --> 00:14:11,270 Oh, because I said if. 245 00:14:11,300 --> 00:14:12,500 User info. 246 00:14:13,740 --> 00:14:14,920 You know, I guess. 247 00:14:16,130 --> 00:14:17,540 We can just add that. 248 00:14:19,470 --> 00:14:19,830 All right. 249 00:14:19,830 --> 00:14:21,150 So we should be good. 250 00:14:21,770 --> 00:14:23,310 So let's try to update this. 251 00:14:23,310 --> 00:14:26,990 So I'm going to change John Doe to, let's say, John. 252 00:14:28,310 --> 00:14:31,520 Smith And then click update. 253 00:14:32,120 --> 00:14:35,180 So I get profile updated successfully. 254 00:14:35,660 --> 00:14:38,780 I close that and notice up here in the header it says John Smith. 255 00:14:38,780 --> 00:14:45,380 So everything is changed and it just everything reacts to it, any component that uses that username. 256 00:14:46,610 --> 00:14:47,060 All right. 257 00:14:47,060 --> 00:14:52,970 So if I want to change the email, let's say we'll change it to John at Gmail. 258 00:14:54,670 --> 00:14:58,600 An update and that call set credentials. 259 00:14:58,600 --> 00:15:01,990 So now if I look in my local storage. 260 00:15:02,690 --> 00:15:05,390 It should have changed the email address. 261 00:15:05,390 --> 00:15:07,040 So user info. 262 00:15:07,070 --> 00:15:09,050 There it is, John at Gmail. 263 00:15:10,020 --> 00:15:10,320 All right. 264 00:15:10,320 --> 00:15:12,680 So things are working pretty smooth. 265 00:15:12,690 --> 00:15:16,890 So if I log out, I'll have to log back in with John at Gmail. 266 00:15:16,890 --> 00:15:18,160 We can try that. 267 00:15:18,180 --> 00:15:19,200 Let's log out. 268 00:15:19,500 --> 00:15:20,850 Let's say John. 269 00:15:20,850 --> 00:15:21,870 I'll try. 270 00:15:22,890 --> 00:15:25,410 Email, which is not shouldn't work. 271 00:15:27,290 --> 00:15:27,560 Yep. 272 00:15:27,560 --> 00:15:30,770 So that that doesn't work because I changed the email. 273 00:15:31,050 --> 00:15:33,830 I'll try gmail and that works. 274 00:15:35,130 --> 00:15:35,850 Awesome. 275 00:15:36,620 --> 00:15:43,100 So the next thing we want to do in the next video is get the orders, because I want to display the 276 00:15:43,100 --> 00:15:45,020 users orders on their profile.