This video is available to students only

Creating Lecture Page

In this lesson, we're going to create the lecture page

Creating lecture page#

Now that we have our endpoints and the lectureSlice set up, we can start writing our coursePage. Inside pages, we can write CoursePage and return CoursePage. Now we can go to the App.tsx file and write the url for the CoursePage; it will be learn/courseId/lectureId. Since courseId and lectureId will be dynamic, we can add colon in front of them. Now let's go to ShowCourses component and wrap the Go to Course button with a link, which will send the user to /learn/course.id/currentLecture. Since we don't have currentLecture here, let's import it using useAppSelector from state.lecture.

client/src/components/ShowCourses.tsx

Now at this moment, we are sending the user to the CoursePage but we haven't made an api call. We will do that inside the useEffect hook of the CoursePage. So let's start working on the CoursePage. Let's import lecture, lectureLoaded, currentLecture and currentVideo from state.lecture. We also need dispatch so let's call useDispatch. Now let's create the useEffect hook and inside, we can check if lecture is null. We can dispatch getLecturesAsync reducer function which needs courseId as a parameter. We can get the courseId from the url; react route gives us match as a prop, so we can destructure match and give it a type RouteComponentProps of type any. Now we can pass courseId which will be match.params.course; match has params property which includes all the parameters inside our url. Now we can pass dependencies dispatch, match and lecture.

We can create another useEffect hook. Here, we will check if currentLecture is zero. In this case, we will make the first lecture the currentLecture, so we can dispatch setCurrentLecture and pass the first lecture id of the first section. Also, we can dispatch setCurrentVideo and pass first lectureId of the first section. Finally, we can use history to push the user to the currentLecture if currentLecture is not zero. Let's write history variable which will be equal to the useHistory and inside the function, we can use history.replace and pass currentLecture.

We are left with one more scenario where user refreshes the page. We can get currentLecture id and course from the url but we don't really know the currentVideo. For this, we can use the currentLectureId and find its videoUrl. Let's make a let variable called lectureItem which will be of type lectureDto. Now we can loop over the lecture sections, for which we will use for loop. Inside, we can use const item of lecture.sections. lectureItem will be equal to item.Lectures.Find where we want to check if lecture.id is equal to currentLecture. Now if we have the lectureItem, we can dispatch setCurrentVideo function where url will be lectureItem.url and we can return. Let's pass the dependencies now which are currentLecture, dispatch, lecture & history. This will happen only when the user refreshes the page.

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