This video is available to students only

Adding Frontend Pagination

In this lesson, we're going to add pagination to the frontend

Adding Frontend pagination#

We have added filtering and sorting to our frontend. Now it's time to add pagination. Let's start by creating pagination model inside models. Export interface Pagination. Here, we need pageIndex of type number, pageSize of type number and totalCount of type number. That's it for now. Let's go back to the courseSlice file. We can make it a part of our initial state. Since we are almost done with our state components, we can create CourseState to give our courseSlice type safety.

We have coursesLoaded of type boolean, status of type string, pagination of type Pagination or null, and courseParams of type CourseParams with capital C. Now, we can give our initial state the CourseState type. We can now create a reducer called setPageNumber. We will pass state and action. First of all, we will make coursesLoaded to false. Making coursesLoaded false will dispatch the fetchCoursesAsync function; otherwise, we will always see the old data. After this, we will setCourseParams to action.payload, with destructuring ofcourse. We are setting it into courseParams because that is what we are sending to our server. We also need to create a functiion which will store the pagination properties inside Redux; let's call it setPagination with state and action. Inside, we simply want to set state.pagination, so we can write action.payload.

client/src/models/pagination.ts

Since we are writing our reducers. We can write another one called resetCourseParams. This will simply call set the courseParams to the initial params which is inside getParams function. Let's export these three functions. Here, we can use the setPagination function inside getCoursesAsync function. We can create a const called paged which will have pageIndex, response.pageIndex. pageSize will be response.pageSize and count will be response.count. Below this, we can use dispatch the setPagination reducer and pass paged value.

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