Displaying User Courses

[00:00 - 00:11] Now that we are returning all the courses purchased by the user on signing in and with get current user endpoint, let's start displaying them inside the dashboard page. I'm not trying to make anything fancy.

[00:12 - 00:19] We can simply use the show courses component that we created. So what we can do is first of all open the dashboard page.

[00:20 - 00:37] So let's open client, SRC and pages and we can click on dashboard and rather than returning the H1 tag, we can start with a dashboard div. So like dashboard class name.

[00:38 - 01:01] And on top, I want to display my courses. So let me create another class name, which will be dashboard underscore header and inside there will be an H1 tag, which will say my courses and now below this we can display our courses.

[01:02 - 01:13] So here let's write another class dashboard underscore courses. Inside this we will use row from Andy.

[01:14 - 01:27] So let me write row and let's import it. This can have a gutter, which will be 48 and 32.

[01:28 - 01:31] I have computed them already. So just don't worry about the numbers.

[01:32 - 01:45] Now if you remember show courses component takes course prop and courses loaded prop to pass the course prop. We will need user courses, which is a list of all the courses purchased by the user.

[01:46 - 02:04] So what we can do is on top, we can import user courses and we can use use app selector. And here we will mention the state and from the state it will be state dot user .

[02:05 - 02:23] Now here we can check if the user courses length is more than zero and if it's true, we can map over the user courses. So let me write a condition user courses dot length if it's greater than zero.

[02:24 - 02:38] In this case, we simply want to map over the courses. So I will write user courses dot app and inside we will have a course, which will be of type course.

[02:39 - 02:55] We can import the model course also the index, which will be of type number and inside we can return the show courses component. And as I told you, it takes two props.

[02:56 - 03:05] First of all, let's start with key to make it unique. And after that, we need course, which will be the course.

[03:06 - 03:13] So this is the condition when user courses has length more than one. If it's false, we can write another condition.

[03:14 - 03:28] And this time we will simply show h one tag, which will say you have not bought any courses. And that's it.

[03:29 - 03:38] Now we will use the fetch current user function inside the user effect hook because we want the courses to be always updated. So for that, what we'll do is use dispatch.

[03:39 - 03:56] So let me write dispatch, which is equal to use app dispatch. And now we will create user effect hook.

[03:57 - 04:10] And here we will dispatch the fetch current user function. This is because whenever user comes to the dashboard page, we always want the user to get the latest data, which will be provided by this endpoint.

[04:11 - 04:23] And we can pass dispatch as a dependency. Now to style the classes we are writing here, I'm giving you a file called dashboard dot SES in the transcript, copy it and paste it inside SAS pages.

[04:24 - 04:39] So if you have copied it, let's open SAS and pages inside pages, we can create a new file. Let's call it underscore dashboard dot SES and now you can paste it.

[04:40 - 04:54] Also we need to import it inside the main file. So let's go to main file and here let's import pages slash dashboard.

[04:55 - 05:06] Now finally, before checking how the space looks, there is one more thing which we need to change inside the show courses component. So let's go to show courses component.

[05:07 - 05:13] And right now we only have two options. One is to add to cart and another one is go to cart.

[05:14 - 05:18] But now user has bought the course. The user simply want to watch the course now.

[05:19 - 05:31] And we don't want to show these options go to cart or add to cart because user has already purchased it. So we will create another endpoint which will say go to course which will let user open the course.

[05:32 - 05:39] So let's start implementing it now. And here as well, we will need user courses to check what all causes the user has purchased.

[05:40 - 06:12] So let's go on top and here we can import user course and it is user courses, user courses and we need it from use app selector from state and state dot course. Now here we can simply cut this part and we simply want to write another condition.

[06:13 - 06:41] So we will simply check if user courses has a course with any of the courses ID . So let's write user courses dot find and the individual item will be simply called item and we want to check if the item dot ID is equal to course dot ID which is the ID of the course received as a prop.

[06:42 - 07:11] Now if this is not undefined, we can say go to course and for that let's create a new div and like always it is course bottom. Cart and it will say go to course and this is the condition when the course is purchased by the user.

[07:12 - 07:37] If it's not, we can simply paste the older logic and here we can pass a question mark because it can be null and it says it has type any. So let's give it a type course and it should be state dot user not state dot course and now we are resolved the error.

[07:38 - 07:51] We can now open the browser to see how it looks like. Let's log in as student.

[07:52 - 08:13] Now we can see the course also it says go to course which means everything is working as expected. We have bought this course also if you go to home and open it software and click on the second page here instead of add to cart we see go to course which means things we have implemented are working as expected.

[08:14 - 08:22] We want to set up how to structure the course so that clicking on this displays us the video. So let's start working on it in the next lesson.