Creating Add Role Endpoint
In this lesson, we're going to create an addRole endpoint
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:06] As discussed in the last lecture, let's create an endpoint for adding the rule. For this, we can go to the user's controller.
[00:07 - 00:13] And first of all, let's close everything. And now let's open user's controller.
[00:14 - 00:22] And here we can create a new endpoint. So below this, let's create an endpoint which will be authorized.
[00:23 - 00:36] So let's start with authorize. And below this, we will create our HTTP post method, which will be called add rule.
[00:37 - 00:48] And below this, let's start writing our method. So we will write public async task of action result.
[00:49 - 00:57] And you're not returning anything from here. But let's write add rule.
[00:58 - 01:02] And this will be called add rule. And it's not going to have any parameters.
[01:03 - 01:09] Since it's an authorized request, we can have access of the token. For this method, we will need a user.
[01:10 - 01:27] So here, let's use await usermanager.find by name async. And since it's an authorized request, let's pass user.identity.name.
[01:28 - 01:40] And below this, we will write await usermanager.add to role async. Inside, we will pass the user.
[01:41 - 01:53] And the second parameter will be the role, which is instructor role. And finally, we will return OK.
[01:54 - 02:11] Now, let's go back to the agent file and add this endpoint inside users. So inside users, let's mention that add role endpoint.
[02:12 - 02:17] It will be a post request. So we can write requests.post.
[02:18 - 02:26] And the endpoint is users/add role. And because it's a post request, we will pass an empty body.
[02:27 - 02:40] Since we are making our API calls from user slices, let's go back to the user slice and create a thunk function called add role. So now we can avoid some typing.
[02:41 - 02:51] I can simply copy this part and edit it to make the add role thunk function. So first of all, let's call it add role.
[02:52 - 02:56] And from this function, we are not returning anything. We can simply mention void.
[02:57 - 03:07] And since it has no parameters, I can get rid of this. Also it will be called user/add role.
[03:08 - 03:17] Since we don't pass anything, we will mention an underscore. And let's get rid of the return part because it's not returning anything.
[03:18 - 03:27] And here as well. And finally, we will call agent.users.add role.
[03:28 - 03:35] Now we can go to the dashboard page. And here we can check if the user has an instructor role.
[03:36 - 03:44] If they do, they will not show anything. Otherwise we can show a button which will ask user to become an instructor.
[03:45 - 03:56] So from state.user, we can also import user because from the user property, they will check if the user is an instructor or not. And we can do it inside the header.
[03:57 - 04:13] So below this, we can check if user.roles.includes the instructor property. In this case, we will show a button.
[04:14 - 04:25] So let's import button from and design. And this button will say become an instructor.
[04:26 - 04:36] And this button will have a type primary. And this will call a function.
[04:37 - 04:53] So let's create a function and let's call it become instructor. It's going to be an asynchronous function.
[04:54 - 05:14] And below this, we can await and dispatch the add role function that we created from user slice. And after that, we can also dispatch the fetch current user function.
[05:15 - 05:24] We are calling fetch current user function because now the rule of the user has been changed. So we want to show the updated properties to the client.
[05:25 - 05:44] And now we can add this function as an on click event to our button. So here we can mention on click and pass the become instructor function.
[05:45 - 06:03] Also since we have added something else in the dashboard header, I would like to make some changes inside dashboard styles. So inside dashboard dot SES, I would add justify content property and make it space between.
[06:04 - 06:18] Also for smaller screens, I would like to add a media query, which will be for the medium screen so I can write media only screen. This is going to be for BP medium, which is breakpoint medium.
[06:19 - 06:40] So inside I can mention max width of BP medium. And for medium screens or lower, I would write flex direction to be column.
[06:41 - 06:47] Let's go back to the dashboard file. And here we want to check if the role does not include an instructor.
[06:48 - 07:00] So I will use a bang operator in front of it because this should be available only if you're not an instructor. So we are checking if the user role does not include this instructor property.
[07:01 - 07:06] In that case, we are giving an option to become an instructor. Now let's go back to the browser.
[07:07 - 07:23] And since we are logged in as an instructor, we don't see that button. So let's log out and log in as a student.
[07:24 - 07:33] And now as you can see, we see a button which is asking us to become an instructor. And also right now, we don't have the instructor options inside the menu.
[07:34 - 07:39] Let's click on this button. And now we can check the menu.
[07:40 - 07:44] As you can see, we have the instructor option here. Things are working fine.
[07:45 - 07:48] And now let's start working on the instructor page from the next lesson.