This video is available to students only

Displaying User Courses

In this lesson, we're going to display user courses

Displaying User courses#

Now that we are returning all the courses purchased by the user on signing in and with get currentUser endpoint, let's start displaying them inside the Dashboard page. I'm not trying to make anything fancy; we can simply use the ShowCourses component that we created.

Let's start by creating a div with class being dashboard. We can also make a header div which will say, My Courses. Now below this, we can put our course, so let's write a div with class, dashboard courses. Inside this, we will use Row from antd with gutter being 48 and 32. If you remember, ShowCourses component takes course prop. To pass course prop, we will need userCourses, which is a list of all the courses purchased by the user. So let's import userCourses using useAppSelector from state user.

Now we can check if userCourses.length is more than zero. We can map over userCourses, with course of type course and index of type number, so now let's import ShowCourses component and pass key to be the index. If the length is not more than 0, we can say You have not bought any courses!. Now we will use the fetchCurrentUser function inside useEffect hook because we want the courses to always be updated. So let's write dispatch to be equal to useAppDispatch and now write the useEffect hook, and inside, dispatch the fetchCurrentUser function with dispatch being its dependency.

client/src/pages/Dashboard.tsx

Start a new discussion. All notification go to the author.