[Frontend]: Implement pagination to the App

Question

[Frontend]: Implement pagination to the App

Mayank0255 opened this issue 5 years ago · 40 comments

Add pagination in the front-end on pages:

HomePage
QuestionsPage
TagsPage
UsersPage

The pagination for the HomePage and QuestionsPage should look similar to this:

Don't add the counts per page thing, if possible you can go ahead or else the pagination will begin after 10 PostItem Components

And for TagsPage and UsersPage, it should look like this:

The pagination should begin after 12 TagPanel Components

Kindly check for all the cases file paginating like on going forward how the paginate component should look like and all.

Feel free to tag me if there's any issue 😄

Answer 1 · 2021-08-29T18:43:51.000Z

@Mayank0255 Can you assign this issue to me?

Answer 2 · 2021-08-29T18:47:01.000Z

@devanshiv123 sure, go ahead

Answer 3 · 2021-08-30T20:42:24.000Z

@Mayank0255 I am getting the the following error while setting up project(after npm run dev)

Answer 4 · 2021-08-31T04:50:42.000Z

@devanshiv123
Try removing all the question marks from the shown areas and then try again and let me know

Answer 5 · 2021-08-31T05:45:41.000Z

I have removed the question marks and now I am getting another error:

Answer 6 · 2021-08-31T05:47:47.000Z

@devanshiv123
Can you go to the sidebar file in whoch it is exported and check whether it's exported correctly or not?

Answer 7 · 2021-08-31T05:59:06.000Z

@Mayank0255 Yes I think its exported correctly

Answer 8 · 2021-08-31T06:03:58.000Z

@devanshiv123
It's a new error actually, I haven't gotten this ever.

Can you look into it if possible? I will also try to figure it out.

Btw I am assuming that you haven't changed anything in the code right now?

Answer 9 · 2021-08-31T06:08:37.000Z

@Mayank0255 No I havn't made any changes I have just made the setup till now. I will try to figure out, maybe an issue with dependency.

Answer 10 · 2021-08-31T06:10:40.000Z

@devanshiv123 yes, correct, it's been sometime time there had been any changes so might be some functions or methods may have depreciated with the new versions

Answer 11 · 2021-09-02T02:53:30.000Z

@devanshiv123 any updates?

Answer 12 · 2021-09-02T05:36:05.000Z

@Mayank0255 I am still getting those errors. I have tried for a day but maybe something is wrong. For now you can unassign me from the issue, I will first try to setup correctly and then take up any other issue.

Answer 13 · 2021-09-02T12:50:58.000Z

@devanshiv123 Oh, ok

Any other reason that you wanna work on some other issue?

Answer 14 · 2021-09-02T17:28:42.000Z

@devanshiv123 Oh, ok

Any other reason that you wanna work on some other issue?

@Mayank0255 No nothing as such, I will surely try to contribute if I get the setup properly after resolving errors.

Answer 15 · 2021-09-03T11:53:19.000Z

@devanshiv123 Cool

Answer 16 · 2021-10-01T16:51:56.000Z

Is anyone working on this issue? Can i work on this issue?

Answer 17 · 2021-10-01T18:05:45.000Z

@alceil Yes you can work on this issue,

I noticed that you are willing to work on two more issues, which are also available but I would recommend doing one first and then going on others, so that I can just assign you one at the moment and the other two are open for other people as well in the meantime.

You can choose which one do you want to start with? I would recommend this one as this one is the smallest one among the three and this will help you understand the codebase faster as well

Answer 18 · 2021-10-02T01:15:04.000Z

Hy @alceil @Mayank0255, if @alceil decides to work on another issue, then I am open to this one. Let me know further. 😃

Answer 19 · 2021-10-02T04:08:32.000Z

@alceil can you please clarify that from which issue are you willing to begin?

@kunalkumar007 kindly give the person 1 day to get back to us, if he decides to take up this issue then I can recommend you to take up #31 this issue, which might be something new and for which a guide has also been referred. If he decides to take up anyother issue then I would love you to be part of this issue.

If @alceil doesn't gives us an update by the EOD then I can happily assign this to @kunalkumar007 as I am looking for some active participants as well :-)

Answer 20 · 2021-10-02T07:02:25.000Z

Is this still active ? Can I work on it

Answer 21 · 2021-10-02T09:49:40.000Z

Is this still active ? Can I work on it

Yes it is active, @kunalkumar007 is also willing to work on this, so @kunalkumar007 would you like to work with @JigmeT123 on this or do you want to work on this separately?

Answer 22 · 2021-10-02T12:58:45.000Z

As more developers are interested to work on this issue, I would try another issue.

Answer 23 · 2021-10-02T13:14:31.000Z

@kunalkumar007 sure, kindly comment on that particular issue so that I can assign you that.

Answer 24 · 2021-10-02T13:15:15.000Z

@JigmeT123 I am then assigning this issue to you, is that ok?

Answer 25 · 2021-10-02T15:13:39.000Z

@Mayank0255 sure I will take this

Answer 26 · 2021-10-02T15:36:58.000Z

@JigmeT123 Cool. Looking forward to a PR soon!!

Answer 27 · 2021-10-06T15:06:18.000Z

@JigmeT123 Any updates on the progress?

Let me know if you get stuck anywhere

Answer 28 · 2021-10-07T19:45:11.000Z

@Mayank0255 In case this doesn't make any progress I'd be happy to take over.

Answer 29 · 2021-10-07T19:46:50.000Z

@luko0610 Cool, let's wait for sometime if the person replies, I will assign it to you if the person doesn't replies.

Answer 30 · 2021-10-07T20:03:25.000Z

@luko0610 Cool, let's wait for sometime if the person replies, I will assign it to you if the person doesn't replies.

Sounds good. Thanks.

Answer 31 · 2021-10-08T03:33:23.000Z

@luko0610 Okay so @JigmeT123 two days has completed since I asked him about the updates.

Should I assign it to you then? And may I ask that approximately after how much time can I expect a PR?

Answer 32 · 2021-10-08T08:37:27.000Z

@luko0610 Okay so @JigmeT123 two days has completed since I asked him about the updates.

Should I assign it to you then? And may I ask that approximately after how much time can I expect a PR?

Yes, please. Should be done in about two days.

Answer 33 · 2021-10-08T12:24:27.000Z

@luko0610 Great, looking forward to it 🎉

Answer 34 · 2021-10-09T18:35:59.000Z

@Mayank0255 I'm currently at it. Frontend pagination component is nearly done (still needs some style improvements).
For now pagination is client side. If you want I can also make a PR for the backend to add server side pagination.

Answer 35 · 2021-10-09T19:10:26.000Z

@Mayank0255 I'm currently at it. Frontend pagination component is nearly done (still needs some style improvements). For now pagination is client side. If you want I can also make a PR for the backend to add server side pagination.

Great progress @luko0610 ,

Can you elaborate on the part of server side pagination? If pagination has been setup on the frontend then what will you be doing in the backend?

Answer 36 · 2021-10-09T19:21:39.000Z

@Mayank0255
Of course. Basically if we only set it up on the frontend, the application would always receive all entries from the backend and then handle pagination on the client side. That's okay for a small number of entries, but can become an issue, when having thousands of entries.

A solution for this issue would be to do the pagination server side. That means when fetching the entries from the backend we always send the currentPage and pageSize we want returned, and then only get sent back entries we want to currently show in the frontend.

I would for now implement it client side, but I could of course make another PR to add server side pagination later on.

Answer 37 · 2021-10-09T22:28:08.000Z

@Mayank0255 I have created a PR (#57) . I created the pagination component and added it to the pages as described.
Let me know if any changes are needed.

Thank you.

Answer 38 · 2021-10-10T09:49:37.000Z

@Mayank0255 Of course. Basically if we only set it up on the frontend, the application would always receive all entries from the backend and then handle pagination on the client side. That's okay for a small number of entries, but can become an issue, when having thousands of entries.

A solution for this issue would be to do the pagination server side. That means when fetching the entries from the backend we always send the currentPage and pageSize we want returned, and then only get sent back entries we want to currently show in the frontend.

I would for now implement it client side, but I could of course make another PR to add server side pagination later on.

@luko0610 I think it's a good idea, I have two things to ask about it,

After implementing that in the API, will you be calling the endpoint with updated page whenever next page or a specific page button is pressed?
There's one important thing to keep in mind while adding pagination, which is get access to last page number (can be names as lastPageNumber) at all the time as in the client side it is necessary to show the page numbers from the first to the last page.

I would request you to make a an issue related to this on the backend repo, and then add a brief description related to it so that I can assign you that and the project management runs smoothly.

Answer 39 · 2021-10-10T16:38:30.000Z

@Mayank0255 Of course. Basically if we only set it up on the frontend, the application would always receive all entries from the backend and then handle pagination on the client side. That's okay for a small number of entries, but can become an issue, when having thousands of entries.
A solution for this issue would be to do the pagination server side. That means when fetching the entries from the backend we always send the currentPage and pageSize we want returned, and then only get sent back entries we want to currently show in the frontend.
I would for now implement it client side, but I could of course make another PR to add server side pagination later on.

@luko0610 I think it's a good idea, I have two things to ask about it,

After implementing that in the API, will you be calling the endpoint with updated page whenever next page or a specific page button is pressed?

There's one important thing to keep in mind while adding pagination, which is get access to last page number (can be names as lastPageNumber) at all the time as in the client side it is necessary to show the page numbers from the first to the last page.

I would request you to make a an issue related to this on the backend repo, and then add a brief description related to it so that I can assign you that and the project management runs smoothly.

Exactly, whenever the pagination changes a new api call is done, to load the items for the selected page. (The parameters pageNumber, pageSize need to be supplied in the request).
Yes, the number of total items needs to be known for the pagination. Would return the data from the backend using the following structure:
{ total: {total}, pageNumber: {pageNumber}, pageSize: {pageSize} data: [] }

Answer 40 · 2021-10-11T07:31:31.000Z

@luko0610 cool, make an issue there then, will assign it to you