Adding Frontend Pagination

[00:00 - 00:04] We have added filtering and sorting in our front end. Now it's time to add pagination.

[00:05 - 00:14] Let's start by creating pagination model inside models. So inside models, let's create a new file.

[00:15 - 00:28] And let's call it pagination.ds. And here we will write export, interface, pagination.

[00:29 - 00:40] Here we need page index, page index and type number. We need page size of type number again.

[00:41 - 00:50] And finally the count. So let's call it total count, which will be a number as well.

[00:51 - 00:54] That's it for now. Let's go back to our course slice file.

[00:55 - 01:03] So let me close everything else, close others. And now we can make pagination part of our initial state.

[01:04 - 01:14] So if you look for the initial state, we can also add pagination. And by default, we can make it null.

[01:15 - 01:26] And now that we are almost done with our state components, we can create our cost state to give our cost slice type safety. Now let's do it on top.

[01:27 - 01:35] Let's call this interface. Let's call it course state.

[01:36 - 01:52] And if you remember, we have courses loaded, which is a boolean. We have status, which is a string.

[01:53 - 02:04] We have pagination, which has a type pagination. And since it has type null as well, so we can write or null.

[02:05 - 02:13] And finally, we have course params. So let me write cause params with type cause params.

[02:14 - 02:21] And also we need to import pagination. So let's import it from model's pagination.

[02:22 - 02:31] We can now go back to the initial state. And here rather than calling it any, let's call it cause state.

[02:32 - 02:38] We can now create a reducer, which will be called set page number. So let's see where it ends.

[02:39 - 02:47] And here let's create another function. Let's call it set page number.

[02:48 - 02:57] And again, it will have a state and action. On top, we want our courses loaded property to be false.

[02:58 - 03:11] So let me write state dot courses loaded and make it false. Because unless we make it false, the courses won't refetch from the API.

[03:12 - 03:20] So we have to make them false so that the new copy can be fetched from the API. And after this, we need to add the paginated property inside our cause params.

[03:21 - 03:32] So we can write state dot cause params. And here again, we will use spread operator for using the existing cause params .

[03:33 - 03:44] And after that, we can spread action dot payload. We are setting it into cause params because this is what we are sending to our servers.

[03:45 - 03:57] And now we also need to create a function which will store the pagination properties inside products. So here, let me create another reducer function and let's call it set pag ination.

[03:58 - 04:13] And again, state action. And inside, we simply want to set state dot pagination to be action dot payload .

[04:14 - 04:28] And since we are writing our reducers, we can write another one which will be called reset cause params. This will simply set the cause params to the initial params, which is inside the get params function.

[04:29 - 04:42] So let's do it now. And let's call it reset cause params state action.

[04:43 - 04:57] And inside, we want to put state dot cause params to be get params. And that's simply it.

[04:58 - 05:04] And we don't need the action so we can get rid of this. Now let's export these three functions as well.

[05:05 - 05:19] So here, we have set pagination, set page number and reset cause params. And now inside the get cause is async function.

[05:20 - 05:33] This one, we can use the set pagination function. So what we can do is rather than returning it, I can create a new response variable.

[05:34 - 05:52] And after this, I can make a new object called page. This will have our page index, which will be equal to response dot page index.

[05:53 - 06:10] We will have page size, which will be equal to response dot page size. And total count, which will be equal to response dot count.

[06:11 - 06:21] This is the data, which is coming from our server. And after this, we can use the tongue API to dispatch the set pagination function with all these page properties.

[06:22 - 06:32] So here I can write tongue API dot dispatch. And inside, I can use the set pagination function with the page properties.

[06:33 - 06:45] And finally, we can return the response. So by this, what we are doing is we are making the API call and we are storing the page index, the page size and the count inside three ducks.

[06:46 - 06:55] We can now implement the pagination inside home page. So let's go to the home page and we can show the pagination box below the causes.

[06:56 - 07:03] So let's go to the row here. So here, let's create a new div.

[07:04 - 07:20] And this div will have a class name of pagination. And since we are writing our own CSS, what we can do is we can write a style and we can write the style inside cause dot SSS file.

[07:21 - 07:40] Cause dot SSS here. So here, let's write what pagination and margin top can be 50 pixels display flex.

[07:41 - 07:55] And justify content to be center so that the pagination box is always in the center. Now coming back to the home page, we will use pagination provided by ant D library.

[07:56 - 08:02] And we only want to show it when the pagination is not null. So we can use the condition here inside the curly brackets.

[08:03 - 08:25] We'll check if there is pagination only then we want to use pagination provided by ant D. So let's import pagination and let's make sure if it's coming from the ant D.

[08:26 - 08:34] Yeah, it is now coming back. Now we need to access the pagination properties from our reduct state.

[08:35 - 08:42] So we can import pagination from state dot cause. Let's see if we are using state dot cause here and yes, we are.

[08:43 - 09:07] So here we can also use pagination and coming back here and this pagination component takes current page with key default current. So what we can do is write default current and the value can be pagination dot page index.

[09:08 - 09:13] We see a question mark because this can be null as well. It also has a total property.

[09:14 - 09:36] So let's write total and which will be equal to pagination dot total count. And likewise, the page size can be pagination dot page size.

[09:37 - 09:46] We want to call set page number on clicking a page number. So what we can do is we can call on change event and create a function with the same name.

[09:47 - 09:55] So on top, let's create a function and let's do it below the user effect hook. And here let's create a function.

[09:56 - 10:02] Let's call it on change. And let's remove the gap.

[10:03 - 10:12] So the function will take a page number. So let's write page number, which will have type number.

[10:13 - 10:29] And inside we want to dispatch an event, which will be set page number. And this will take page index.

[10:30 - 10:41] And now we can pass this function to the pagination on change event. So on change is equal to on change.

[10:42 - 10:46] And that's it. We can now go back to the browser and see it in action.

[10:47 - 10:52] And now as we can see, we have pagination box. And if we click on two, we see some new courses.

[10:53 - 10:56] And the same way we click on three, we see some more courses.