Creating Login Dropdown

[00:00 - 00:14] Now that we are able to store the user token inside Redux store, let's show the users that they are logged in. So what we can do is we can create a drop-down menu where we can show the option to go to user dashboard and an option to log out.

[00:15 - 00:41] Inside components, so let me go to components. Here we can create a new file and let's call it userMenu.tsx. Let's create userMenu function, userMenu, and export it as well.

[00:42 - 01:06] Export default, userMenu. For this userMenu, we can use anti rather than building it from scratch. So what we can do is return and we can use drop-down component from anti. So if I write drop-down, it will be imported automatically.

[01:07 - 01:25] Now it takes a placement and we want to place it in the bottom. So we can call it bottom center. Now it takes a menu which can also be imported from anti. So what we can do is we can create a new variable menu.

[01:26 - 01:36] Yeah, and here we can use menu provided by anti. Inside we will use menu.item.

[01:37 - 01:57] So menu.item. And the first one will be the profile. So let's create profile and wrap it with a link because we want to send the user to the profile page. So let's and paste it here.

[01:58 - 02:09] We will send the user to the profile page. And let's import link from React out to DOM.

[02:10 - 02:30] We are seeing this error because we haven't provided an overly menu. So let's do it now and write the menu. And I know we don't have the profile page yet. So let's create it. Inside pages, let's create a new file and let's call it dashboard.tsex.

[02:31 - 02:44] Let's create dashboard function. And we will return H1 which will say dashboard.

[02:45 - 03:06] And finally, it will export default dashboard. To make it visible, we need to register it inside our app.tsex file. So let's go there and cut it, paste it, change this to profile.

[03:07 - 03:20] And the component will be dashboard and it will be imported automatically. Coming back to the user menu, let's create another menu item which will simply say log out.

[03:21 - 04:02] So what we can do is write menu.item and here we are not using link because we are going to use a function. So let's write a div which will say log out. Now inside the drop down, we can create a div. So let's make a div which will say menu. And let's also give it a class name. And the class name can be drop down because by default, the cursor position won 't be pointer.

[04:03 - 04:42] So let's do one thing. Let's write the style as well. Let's do it inside navigation.scisfile. And in the bottom, let me write drop down. And I just want to make cursor pointer and that's simply it. Now we need to make the user sign out. And to make them do so, we need to remove the user token from local storage and from Redux. What we can do is we can create a redu cer function inside user slice. So let me go to the user slice. And inside reducers, we can create a function.

[04:43 - 04:59] Let's call it sign out with capital O. And here we can use the state and we don 't need the action. So what this reducer function will do is it will make state dot user to null.

[05:00 - 05:41] And we also want to remove the token from the local storage. So we can use local storage dot remove item and we are going to remove the user. Now let's export this function from here. So what I'll do is export const sign out from user slice dot actions. Coming back to the user menu, let's create a function sign out. So let me make a function const sign out with a small O. And what this function will do is it will dispatch the sign out function from the reducer.

[05:42 - 07:15] And also push the user to the home page. So what we can do is use dispatch is equal to use dispatch. And to push the user to a different page, we need history. And we can use use history from react out to DOM. And it should be a const. Now inside the sign out function, we can dispatch sign out function from user slice. Also, if you want to push the user to the home page, so we will use history dot push and push them to the home page. Now this div can use that sign out function with the event on click. So when we click on that button, it will sign out the user. Now this user menu is something we will show instead of login. So if we go back to the navigation file, navigation, and here instead of login, we want to show that user menu, if the user is logged in. So what we can do is we can import the user. So here, let's use const user from use app selector from state and from state dot user. And it should be an equal to sign.

[07:16 - 08:16] Now what we want to do is we want to check if user is logged in, we don't want to show this login navigation. Instead, we want to show the user menu. So here, what I can do is I can say if user, then I want to show the user menu so I can copy it and paste it and rather than calling it login, I can use the user menu. And if the user is not logged in, I can simply use this link. So I'll simply cut it and paste it here. For mobile screen, we can check if the user is available. So in that case, rather than using the user menu, because our user menu has a dropdown and we are already using a slider for smaller screen. So we don't need to use the dropdown menu. So rather than that, what we can do is we can check if the user is logged in.

[08:17 - 09:12] In that case, we can use two navigations, one for the profile and another one for signing out . So let me copy it and paste it. Let's make it profile and right profile and second one for the logout. So rather than writing link, I can use a div, which we'll say sign out. And we also need to pass sign out inside a list item. So let me write this item. Let's copy it and paste it. And if the user is not logged in, we can simply use this link. And now that I see this link should be on bottom. And I can cut it. And for the second condition, I can paste it. And this will solve this issue.

[09:13 - 10:00] We also want to write the logout function here. So first of all, let me call it logout. And the logic is same for the navigation and for the user menu. So what I can do is I can copy this part because we already have dispatch inside navigation. And on top, here we have this dispatch, I can paste this. And on this div, I can use the on click function, which will use the sign out function. And we need to import sign out from user slice and use history from react out to DOM. This will take care of all the errors.

[10:01 - 10:20] Now it's time to see that in action. What we can do is check if the servers are running fine. Yes, they are. Now we can go to the browser. If you go to the login page and use a valid email ID, which is student@the rate test.com and the correct password.

[10:21 - 10:43] We see that our login has changed to a menu. And if we hover over it, it is using profile and logout. So if I click on profile, we can go to the dashboard and logout is log out. So let's also check it for smaller screens.

[10:44 - 11:34] Now if I and we see a little problem with the profile, maybe we haven't wrapped it inside list item. So what we can do is go back and yeah, we should wrap it inside list item. So let me write list item and cut it and paste it. Now if you go back to the browser again, everything is working fine. Now going back to the normal mode. And if I click on log out, we see login again and the drop down menu is gone as well.