Okay.
What we'd like to do next is when a user does successfully log in, we'd like to replace what we have
in the navbar on the top right with a user menu that drops down, and they can do various account related
activities.
And that's what we'll take a look at now and what we'll use for this.
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
tiny bit verbose in the way that we use this.
So inside the components let's find the menu inside here which is in this list somewhere.
And here it is okay.
So I'll just select the menu.
And from here let's take a look at the different examples that they give us.
And it's actually the change transition one where if I click on dashboard then I can see a menu popping
up.
If we take a look at the code for this, then it is significant for what feels like pretty simple functionality.
So what I'm going to do is I'm just going to copy the code inside here in its entirety into my clipboard.
And just in case the documentation changes, then I'm going to create a snippet of this and attach it
as a resource to this lesson.
So if for whatever reason, what I'm highlighting here is unavailable, you'll have access to the same
code as a snippet just to save a bit of time, because typing all of this out will take some time.
And inside our solution, inside the app folder, inside the layout, let's create a new file and I'll
just call it User menu dot TSX.
Inside here I'll create the boilerplate and I'll replace the div or the return and paste in what I have
that I copied from the documentation.
So that includes all of the different elements that we need.
So I'm just going to use the add or missing import from the quick fix and see where we stand.
So we don't need react from react to use Usestate.
I'll remove that and I'll remove react from here as well.
And just directly import Usestate into here.
I feel that's just a bit cleaner, although it doesn't make any actual difference.
So what we have in here is we have some use states as we need to give our menu an anchor element for
it to attach onto.
And then we have our handleclick to set the anchor element and the handle close to close it when we're
no longer in the menu.
So then we've got our return, and we've got our button and controls to open and close the menu.
We don't actually need these Aria controls here, so I'm actually going to remove that.
And we don't need the IDE either to make this function.
So I'm going to clear that as well.
And what we're going to use inside here we're going to add some props so we can pass down the user object
to this.
So I'm going to specify type props equals and we'll specify user.
That is going to be a type of user.
And then add this to our props inside here.
So I'm going to say user and props.
And from this we can get hold of instead of dashboard we'll specify user dot email.
And let's take a look at what else we have inside here.
So we've got our anchor elements the open the onclose and the transitional component to fade.
And then we've got our different menu items.
So we'll take out the onClick events from our menu items.
And we'll give them a slightly different style so that we can see an icon and just make them look slightly
better than they were in the demo.
And to use an icon we can use inside a menu item, we can use a list item icon we get from UI material,
and then inside the list item icon we can use an icon.
And for this one I'll specify person from UI icons material, and below the icon we can have some list
item.
Text and inside the list item text.
We'll specify my profile.
We won't have this for some time.
We'll just have some kind of placeholder links, mostly for lists.
I'll do similar for the second one as well.
I'll take out my accounts and inside the menu item I'll just copy what I have for the list item icon
and the text and paste that inside.
Here, try and reformat things a little bit and instead of the person icon, we'll have a history icon
we get from icons material.
And we'll specify my orders for this.
And then below this menu item we'll just have a divider and make it self-closing.
And in the final menu item we'll just remove the onclick from this as well.
Remove logout.
Although that is what we're going to use it for.
But I'll copy the list item icon and the text and paste it in here.
And instead of the history icon, we can use a logout icon.
And we'll change the text here to log out.
So for the log out functionality then we're going to need to bring in our hook.
So let's head over to the account API once again.
Did we export this inside here.
Let's take a look.
And we did.
We have our use log out mutation.
So back in our user menu we can make use of that.
And just at the top I'll say const in square brackets.
Log out and say equals use log out mutation.
And for our menu item at the bottom here we can give this the onClick and just use Log Out.
So let's just go and take a look at how this looks before we get the functionality actually working
for this.
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,
because when we log in, we're not doing anything after we have logged in yet.
So I'm just going to specify const user equals and then just have email as test at test.com for all
the user objects.
And I am going to in place of the or below the icon button, I'll just check for the existence of user
which will exist because we've just created it.
I'll say user question mark, open parentheses, and then we'll use our user menu.
And I'll pass down the user equals user.
The temporary one I've just created there.
Then we'll add the other side of the ternary open parentheses.
And I'm going to take our list.
Cut it and put it inside here.
And I've got a problem with the user because it's missing the roles.
So I'll just go up and give our user object here, the roles property because we didn't make it optional,
and I'll just set it to an empty array.
So that will give us a temporary user to use.
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
our email address.
And if we click this we can see we've got access to the menu.
And if I do click the logout button, what we should see because that functionality should work right
now, is we should see the cookie being removed from our cookies area.
So if I do click logout, we see the request going to the API and we see the logout working as we'd
expect, it's removed the cookie from the cookies area.
So next we're going to take a look and see how we can actually log in to enable this.
What we see here and also persist our login.
So if we do refresh our browser we don't go back to where we were.
We retain our login based on a cookie being present in our browser.
And we'll take a look at that next.