Creating Instructor Page

[00:00 - 00:21] Now that we have given an option to iusers to become an instructor, let's start working on the instructor page. So inside client and inside pages, let's create a new file and let's call it instructor page.

[00:22 - 01:02] So let's write the function and return h1 which will say instructor page for now and also export it. So in this page, I'm thinking of keeping the unpublished courses on the left and on right, we can give a button which will give an option to create a new course.

[01:03 - 01:19] So first of all, let's register this page inside app.tsx file. So I can copy this and here its path will be / instructor.

[01:20 - 01:29] And here we will mention the instructor page. Coming back to the instructor page and it should be instructor page, not pages.

[01:30 - 01:43] So let's rename it and let's update this import as well. Now inside the return statement, let's clear this.

[01:44 - 01:55] Let's start with a div with the class name instructor. Now we can keep the courses on the left and the button on the right.

[01:56 - 02:17] So let's create two divs, instructor left and instructor right. So I can copy it and now and here I can write instructor left and let's create another div which will be called instructor right.

[02:18 - 02:25] Now we need to show the courses made by the user. So we can create a new endpoint inside users controller.

[02:26 - 02:37] So let's go to users controller. So here we can create a new authorized course.

[02:38 - 02:42] So here let's write authorize. And this will be a get request.

[02:43 - 02:58] So let's write HTTP get and we can give it a name unpublished courses. Now let's start writing a method.

[02:59 - 03:17] From this method, we will return a list of course. So let's write list of course and this will be called unpublished courses.

[03:18 - 03:48] So let's import list using system collections generic and inside we can create a new variable called courses. This will be equal to context dot courses where X dot instructor is equal to user dot identity dot name.

[03:49 - 03:57] And since we are comparing it, we need to put two is equal to science here. We are doing this because our username is unique.

[03:58 - 04:09] So we can assure that return courses will be only made by this particular user. And now I'm trying to show only the unpublished courses, but right now we don't have published property inside our course model.

[04:10 - 04:21] So we need to add the published property inside the cost model with default property being false. So first of all, let's go to our course model.

[04:22 - 04:38] And here we need to add a published property. So here we can add Julian and this property will be called published and the default value will be false.

[04:39 - 04:53] Since we are here, we can add a default image link because I'm not adding any image uploading service inside this course. So first of all, let's go to image and add this default property.

[04:54 - 05:02] Now our course creation field won't have an option to add an image. Whenever we'll create a new course, this image will be automatically added to it.

[05:03 - 05:09] So please copy the image link and make it default. Now let's go back to the user's controller.

[05:10 - 05:15] And here we will add another condition. And now we want to check only the courses which are unpublished.

[05:16 - 05:36] So here we can add another condition which will check dot where x dot published is equal to false. And let's make it x and like this.

[05:37 - 05:43] Now finally, we can make it a list. So let's write dot to list.

[05:44 - 05:55] And finally, we can return courses. Now that we have the published property, so we only want to return published courses.

[05:56 - 06:02] We don't want our users to see the unpublished courses as well. So inside courses with category specification file.

[06:03 - 06:19] So let's search for courses with categories specification. And here we can add another and property and we want to only send the courses where x dot published is equal to true.

[06:20 - 06:32] And now that we have added a new property inside course model, we need to create a new migration. And also we are only returning the courses which are published and we don't have published property inside courses.

[06:33 - 06:44] So what we can do is we can drop the database and create a new migration. So let's open the terminal and here let's go back to the root level and clear this.

[06:45 - 07:01] First of all, let's drop our database. So dotnet EF database drop and our starter project is API and the store context is located in our infrastructure project.

[07:02 - 07:06] And let's press Y. And now we can create a new migration.

[07:07 - 07:24] So here let's clear it once again and write dotnet EF migrations add and let's name it published property added. So let's write publish property added.

[07:25 - 07:36] And again our starter project is API and the project is infrastructure. Now our seeded database.

[07:37 - 07:48] So courses dot Jason file. Let's open courses dot Jason and here we want to add published property to be true so that these courses are also returned.

[07:49 - 08:05] So what we can do is we can select any property and press command D or control D and here let's go down. Let's write published and make it true and add a comma after that.

[08:06 - 08:15] So let's make sure that everyone has published property. So looks like we have published property in all our courses.

[08:16 - 08:33] Let's go back to the API project now and restart our server. And looks like everything is working as expected.

[08:34 - 08:52] So let's open database and let's see if our courses have the published property . So show table and let's check the published property and here we see one which means it's true.

[08:53 - 09:05] Let's close the terminal now and now that we have created the end point, let's register it inside agent file. So let's open agent dot TS and inside users.

[09:06 - 09:33] Let's create another end point which will be called unpublished courses and this will be a get request. So let's write requests dot get and here the end point is users slash unpublished courses.

[09:34 - 09:45] And from this method, we are expecting array of course. So let's write course and mention an array.

[09:46 - 09:53] Now that we have registered our end point, we can create a function inside users slice. So let's make it clean first of all.

[09:54 - 10:11] Let's close everything and open users slice. So here, let's duplicate the above function and paste it so that we can edit it to make a new end point and let's call it get unpublished courses.

[10:12 - 10:26] So let's call it get unpublished courses and the same thing here as well. So let's copy it and instead of add role, we can paste this.

[10:27 - 10:45] So from this method, we are expecting area of course. So let's write that here and here we are calling users dot unpublished courses and also we are returning it.

[10:46 - 11:07] So let's write return and inside our state, let's add another property which will be called unpublished courses so we can go here and write unpublished courses. And this will be again an area of course.

[11:08 - 11:19] So let's copy it from here and let's give it a default value of an empty array. Let's add an extra reducer now.

[11:20 - 11:37] So inside the extra reducers, we will write another add case. So let's copy this add case and paste it and this will be for get unpublished courses dot fulfilled.

[11:38 - 11:46] And here we don't need all this. We simply want state dot unpublished courses to be equal to action dot payload.

[11:47 - 11:56] So we need action here. So here let's make it equal to action dot payload.

[11:57 - 12:05] And now that we have the unpublished courses, let's import it inside the instructor page. So let's go to our instructor page.

[12:06 - 12:23] And here let's import unpublished courses from use app selector from state. And here we will write state dot user.

[12:24 - 12:41] And although we are calling unpublished courses property here, we haven't actually called the get unpublished courses function. So let's create a user effect hook.

[12:42 - 12:52] And here we will need the dispatch functions. So let's also import dispatch, which will be equal to use app dispatch.

[12:53 - 13:04] And inside we can dispatch the get unpublished courses function. And also let's pass dispatch as a dependency.

[13:05 - 13:21] Now inside the instructor left div, let's create another div with class name instructor left header. And here we can check if we have unpublished courses.

[13:22 - 13:41] So what we can do is we can check the length of it. So if unpublished courses dot length is more than zero, in this case, we can show a heading which will say my unpublished courses.

[13:42 - 13:55] Otherwise it will say create a new course. And below this heading, we can show the causes if there are.

[13:56 - 14:10] So below this div, we can create another div with class name instructor left causes. So let's write instructor left courses.

[14:11 - 14:19] And here we can map over the unpublished courses. So let's write unpublished courses dot map.

[14:20 - 14:25] And the individual cause will be simply called cause. And we will also write our index.

[14:26 - 14:42] Let's give cause property of course, and index will be of type number. And from the map, we will return a link.

[14:43 - 14:49] So let's import link. And for the link, we will pass key.

[14:50 - 15:02] So the key will be equal to the index. So we are returning a link because this will redirect the user to complete this course by adding sections and lectures.

[15:03 - 15:11] And from here, we can display the unpublished courses in a card. So inside, let's import card.

[15:12 - 15:19] And now let's add some properties. first of all, this card should be hoverable. And let's give it a width of 240 pixels.

[15:20 - 15:30] So let's write style with width 240. And this card will have an image, which will be the image of the course.

[15:31 - 15:38] So what we can do is we can add cover property. And this cover property will take the image tag.

[15:39 - 15:52] So let's write image. And the source of this image will be course.image.

[15:53 - 16:01] And the alternate tag will be the title. So let's write course.title.

[16:02 - 16:07] And below this image, we also want to show some properties. So that can be added through the meta component.

[16:08 - 16:17] So let's import meta. And here we can mention the title, which will be course.title.

[16:18 - 16:25] And the description, the description will be shown below this title. So below, we can show the subtitle.

[16:26 - 16:35] So let's write course.subtitle. And inside the instructor, right there, we can use a button with type primary.

[16:36 - 16:43] So let's import button. And let's give it a type primary.

[16:44 - 16:54] Let's close this and again. And this button will say new course.

[16:55 - 17:04] Now clicking on this button, user will go to a new page where they can make a new course. So let's create a function called make cause.

[17:05 - 17:13] So here, let's create a new function. Let's call it make cause.

[17:14 - 17:17] And here we will push the user to the course page. So we need history.

[17:18 - 17:29] So let's make history here, which will be equal to use history. It's imported.

[17:30 - 17:43] And here, let's use history dot push and we will push the user to instructor slash course page, which we haven't created. But after this, we will.

[17:44 - 17:56] And now finally, we can pass this function to our button. So here, let's use the on click event and pass this make cause function.

[17:57 - 18:11] And also our link tag is giving us an error because we don't have the two property. So here, we can send the user to a page where they will be able to create sections and lectures.

[18:12 - 18:22] So inside to let's send the user back to slash course ID slash lectures. We haven't created it yet, but I think that will be the better solution.

[18:23 - 18:33] So here, let's write course ID, which will be dynamic. And after that, slash lectures.

[18:34 - 18:45] So this will be the page for creating lectures and sections. And this page, instructor slash course will be responsible for adding the cost properties, such as the title subtitle description, price and so on.

[18:46 - 18:53] And this page will be responsible for creating the sections and the lectures. And finally, we have to add styles to it.

[18:54 - 18:59] So I have given you an instructor page. So you can copy the styles and paste it.

[19:00 - 19:27] If you have copied it, go to SAS and inside pages, create a new file and call it underscore instructor dot SSS paste the file with the code and import it inside main file. So here we can do that.

[19:28 - 19:36] So here, let's mention pages slash instructor. We can finally go to the browser now and see how the page looks like.

[19:37 - 19:46] So right now, we are not instructors because we have dropped the database. So we'll have to go back to our profile and become an instructor.

[19:47 - 19:55] Now we can see the option and go to the instructor page. Right now we don't have any cause with our username.

[19:56 - 20:02] So we can't see any unpublished cause. Let's start working on the create cause page so that we can create course in the next lesson.