[Frontend]: Implement pagination to the App

[Mayank0255]

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 😄

[devanshiv123]

@Mayank0255 Can you assign this issue to me?

[Mayank0255]

@devanshiv123 sure, go ahead

[devanshiv123]

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

[Mayank0255]

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

[devanshiv123]

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

[Mayank0255]

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

[devanshiv123]

@Mayank0255 Yes I think its exported correctly

[Mayank0255]

@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?

[devanshiv123]

@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.

[Mayank0255]

@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

[Mayank0255]

@devanshiv123 any updates?

[devanshiv123]

@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.

[Mayank0255]

@devanshiv123 Oh, ok

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

[devanshiv123]

@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.

[Mayank0255]

@devanshiv123 Cool

[Mayank0255]

@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 :-)

[jigmetnamgyal]

Is this still active ? Can I work on it

[Mayank0255]

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?

[kunalkumar007]

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

[Mayank0255]

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

[Mayank0255]

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

[jigmetnamgyal]

@Mayank0255 sure I will take this

[Mayank0255]

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

[Mayank0255]

@jigmet123 Any updates on the progress?

Let me know if you get stuck anywhere

[luko0610]

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

[Mayank0255]

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

[luko0610]

@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.

[Mayank0255]

@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?

[luko0610]

@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.

[Mayank0255]

@luko0610 Great, looking forward to it 🎉

[luko0610]

@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.

[Mayank0255]

@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?

[luko0610]

@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]

@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.

[Mayank0255]

@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,

1. 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?

2. 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.

[luko0610]

@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,

1. 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?
2. 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.

1. 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).
2. 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: [] }

[Mayank0255]

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