WEBVTT 00:00.020 --> 00:00.320 Okay. 00:00.320 --> 00:05.090 What we'd like to do next is when a user does successfully log in, we'd like to replace what we have 00:05.090 --> 00:11.120 in the navbar on the top right with a user menu that drops down, and they can do various account related 00:11.120 --> 00:12.080 activities. 00:12.080 --> 00:15.410 And that's what we'll take a look at now and what we'll use for this. 00:15.410 --> 00:22.280 Let's just go to my UI and take a look at the docs, because we're going to use a menu, but it's a 00:22.280 --> 00:26.090 tiny bit verbose in the way that we use this. 00:26.090 --> 00:35.930 So inside the components let's find the menu inside here which is in this list somewhere. 00:35.930 --> 00:37.850 And here it is okay. 00:37.850 --> 00:39.770 So I'll just select the menu. 00:39.770 --> 00:43.760 And from here let's take a look at the different examples that they give us. 00:43.760 --> 00:50.270 And it's actually the change transition one where if I click on dashboard then I can see a menu popping 00:50.270 --> 00:50.810 up. 00:50.810 --> 00:59.450 If we take a look at the code for this, then it is significant for what feels like pretty simple functionality. 00:59.450 --> 01:04.670 So what I'm going to do is I'm just going to copy the code inside here in its entirety into my clipboard. 01:04.670 --> 01:13.040 And just in case the documentation changes, then I'm going to create a snippet of this and attach it 01:13.040 --> 01:15.560 as a resource to this lesson. 01:15.710 --> 01:20.360 So if for whatever reason, what I'm highlighting here is unavailable, you'll have access to the same 01:20.360 --> 01:25.970 code as a snippet just to save a bit of time, because typing all of this out will take some time. 01:25.970 --> 01:34.130 And inside our solution, inside the app folder, inside the layout, let's create a new file and I'll 01:34.130 --> 01:38.960 just call it User menu dot TSX. 01:39.410 --> 01:48.530 Inside here I'll create the boilerplate and I'll replace the div or the return and paste in what I have 01:48.680 --> 01:50.750 that I copied from the documentation. 01:50.750 --> 01:53.840 So that includes all of the different elements that we need. 01:53.870 --> 02:00.560 So I'm just going to use the add or missing import from the quick fix and see where we stand. 02:00.980 --> 02:03.530 So we don't need react from react to use Usestate. 02:03.530 --> 02:06.590 I'll remove that and I'll remove react from here as well. 02:06.590 --> 02:09.980 And just directly import Usestate into here. 02:10.280 --> 02:14.360 I feel that's just a bit cleaner, although it doesn't make any actual difference. 02:14.360 --> 02:20.090 So what we have in here is we have some use states as we need to give our menu an anchor element for 02:20.090 --> 02:21.620 it to attach onto. 02:21.650 --> 02:27.860 And then we have our handleclick to set the anchor element and the handle close to close it when we're 02:27.860 --> 02:29.540 no longer in the menu. 02:30.500 --> 02:36.020 So then we've got our return, and we've got our button and controls to open and close the menu. 02:36.050 --> 02:41.540 We don't actually need these Aria controls here, so I'm actually going to remove that. 02:41.540 --> 02:45.290 And we don't need the IDE either to make this function. 02:45.290 --> 02:47.540 So I'm going to clear that as well. 02:47.540 --> 02:53.120 And what we're going to use inside here we're going to add some props so we can pass down the user object 02:53.150 --> 02:53.660 to this. 02:53.660 --> 02:57.920 So I'm going to specify type props equals and we'll specify user. 02:57.920 --> 03:00.590 That is going to be a type of user. 03:00.650 --> 03:04.060 And then add this to our props inside here. 03:04.060 --> 03:06.580 So I'm going to say user and props. 03:06.580 --> 03:13.060 And from this we can get hold of instead of dashboard we'll specify user dot email. 03:13.060 --> 03:16.480 And let's take a look at what else we have inside here. 03:16.480 --> 03:22.780 So we've got our anchor elements the open the onclose and the transitional component to fade. 03:22.780 --> 03:25.570 And then we've got our different menu items. 03:25.630 --> 03:29.200 So we'll take out the onClick events from our menu items. 03:29.200 --> 03:34.840 And we'll give them a slightly different style so that we can see an icon and just make them look slightly 03:34.840 --> 03:37.360 better than they were in the demo. 03:37.450 --> 03:46.240 And to use an icon we can use inside a menu item, we can use a list item icon we get from UI material, 03:46.240 --> 03:50.680 and then inside the list item icon we can use an icon. 03:50.680 --> 03:59.470 And for this one I'll specify person from UI icons material, and below the icon we can have some list 04:00.070 --> 04:01.330 item. 04:03.090 --> 04:08.250 Text and inside the list item text. 04:08.340 --> 04:10.260 We'll specify my profile. 04:10.260 --> 04:13.050 We won't have this for some time. 04:13.050 --> 04:17.790 We'll just have some kind of placeholder links, mostly for lists. 04:17.850 --> 04:20.640 I'll do similar for the second one as well. 04:20.640 --> 04:28.560 I'll take out my accounts and inside the menu item I'll just copy what I have for the list item icon 04:28.560 --> 04:30.540 and the text and paste that inside. 04:30.540 --> 04:36.810 Here, try and reformat things a little bit and instead of the person icon, we'll have a history icon 04:36.810 --> 04:39.060 we get from icons material. 04:39.300 --> 04:42.990 And we'll specify my orders for this. 04:44.970 --> 04:51.600 And then below this menu item we'll just have a divider and make it self-closing. 04:52.770 --> 04:57.630 And in the final menu item we'll just remove the onclick from this as well. 04:57.630 --> 04:59.040 Remove logout. 04:59.070 --> 05:01.500 Although that is what we're going to use it for. 05:01.530 --> 05:06.820 But I'll copy the list item icon and the text and paste it in here. 05:06.850 --> 05:11.110 And instead of the history icon, we can use a logout icon. 05:11.560 --> 05:16.090 And we'll change the text here to log out. 05:16.120 --> 05:21.910 So for the log out functionality then we're going to need to bring in our hook. 05:21.910 --> 05:24.490 So let's head over to the account API once again. 05:24.520 --> 05:27.370 Did we export this inside here. 05:27.580 --> 05:28.810 Let's take a look. 05:28.840 --> 05:29.770 And we did. 05:29.770 --> 05:31.990 We have our use log out mutation. 05:31.990 --> 05:35.620 So back in our user menu we can make use of that. 05:36.310 --> 05:39.640 And just at the top I'll say const in square brackets. 05:39.670 --> 05:45.760 Log out and say equals use log out mutation. 05:47.290 --> 05:55.270 And for our menu item at the bottom here we can give this the onClick and just use Log Out. 05:55.300 --> 06:00.490 So let's just go and take a look at how this looks before we get the functionality actually working 06:00.490 --> 06:01.000 for this. 06:01.000 --> 06:06.430 So this is going to be part of our navbar, and we don't have a way really to get hold of our user yet, 06:06.430 --> 06:10.690 because when we log in, we're not doing anything after we have logged in yet. 06:10.690 --> 06:21.880 So I'm just going to specify const user equals and then just have email as test at test.com for all 06:21.880 --> 06:22.960 the user objects. 06:22.960 --> 06:32.590 And I am going to in place of the or below the icon button, I'll just check for the existence of user 06:32.590 --> 06:35.110 which will exist because we've just created it. 06:35.140 --> 06:40.750 I'll say user question mark, open parentheses, and then we'll use our user menu. 06:41.140 --> 06:43.900 And I'll pass down the user equals user. 06:43.930 --> 06:46.000 The temporary one I've just created there. 06:46.000 --> 06:49.000 Then we'll add the other side of the ternary open parentheses. 06:49.000 --> 06:51.010 And I'm going to take our list. 06:52.150 --> 06:55.300 Cut it and put it inside here. 06:56.020 --> 06:59.920 And I've got a problem with the user because it's missing the roles. 06:59.920 --> 07:06.730 So I'll just go up and give our user object here, the roles property because we didn't make it optional, 07:06.730 --> 07:09.160 and I'll just set it to an empty array. 07:09.160 --> 07:13.000 So that will give us a temporary user to use. 07:13.000 --> 07:18.910 And if we go and take a look and see how this looks in our browser, then what we can see is we've got 07:18.910 --> 07:20.380 our email address. 07:20.380 --> 07:23.560 And if we click this we can see we've got access to the menu. 07:23.590 --> 07:28.960 And if I do click the logout button, what we should see because that functionality should work right 07:28.960 --> 07:34.120 now, is we should see the cookie being removed from our cookies area. 07:34.120 --> 07:40.600 So if I do click logout, we see the request going to the API and we see the logout working as we'd 07:40.600 --> 07:44.020 expect, it's removed the cookie from the cookies area. 07:45.010 --> 07:51.010 So next we're going to take a look and see how we can actually log in to enable this. 07:51.010 --> 07:53.770 What we see here and also persist our login. 07:53.770 --> 07:57.280 So if we do refresh our browser we don't go back to where we were. 07:57.280 --> 08:01.600 We retain our login based on a cookie being present in our browser. 08:01.600 --> 08:03.520 And we'll take a look at that next.