Adding pagination for Research, News, Questions and Library Page

[V24039]

PR Checklist

• - Unit and/or e2e tests for the changes that have been added (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Refactoring (no functional changes)
• Documentation
• Other:

What is the new behavior?

Added pagination to the research apge

Does this PR introduce a DB Schema Change or Migration?

• Yes
• No

Git Issues

Closes #4523

What happens next?

Thank you for the contribution! We will review it ASAP.

If you need more immediate feedback you can reach out to us on Discord in the Community Platform development channel.

[cypress]

onearmy-community-platform    Run #9336

Run Properties:   Passed #9336  •  7be42b6858: Minor fix

Project	onearmy-community-platform
Branch Review	pull/4662
Run status	Passed #9336
Run duration	08m 55s
Commit	7be42b6858: Minor fix
Committer	Venu G Soganadgi
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	92
View all changes introduced in this branch ↗︎

[V24039]

Hi @mariojsnunes, @benfurber can you please review my PR, I have fixed the test cases which were failing due my changes, but not sure why other test cases are failing, can you please help me with this

[mariojsnunes]

1. The spacing looks a bit strange to me.

2. Are we sure we want the "go to last" button?
3. Maybe make the number input background color white

(This are just suggestions, to be validated by the design team)

[dalibormrska]

Will look at this this evening

[dalibormrska]

Mario's comment:

1. Agree, examine Figma file for exact sizings. If you'd like any help or support, tag me anytime. :))
2. Let's keep the skip to last button for now as is described in the issue
   
3. Agree

My comment:
4. 1 out of 1 pages is not needed, no?
5. Doublecheck also font family and size.

[V24039]

Hi @dalibormrska, sure will the changes, and check font family and spacing.
Quick question

1. Do we have any specific fontfamily thats used, shall I pick it from the figma.
2. For single page (1 of 1), shoul I remove the pagination section.

[V24039]

Hi @mariojsnunes, @dalibormrska can you please check the changes

[dalibormrska]

Really cool @V24039, getting there!

Some remarks:

1. The arrows have different styled icons.
   
   The single arrow should be rounded style as well. This is probably not your problem, I'm assuming it's the icon already in the codebase. Could we replace the sharp arrow by the rounded arrow @mariojsnunes ? Here is the difference:
   
   And here is the icon in the 27x27 box, same as the original one: -> <-

2. The text box "of 3" is on two lines now. It should be on one line, spanning as much width as needed. Also pay attention to the padding of this text box so that it looks centred between the neighbours.
   

3. The font of the input seems to be Inter, while the text box is Varela Round. Would it be possible to also have Varela Round Bold in the input?
   

4. I don't know if this is an issue of the test environment or the pagination, but for me the content does not change when navigating the pages. @mariojsnunes?
   

[mariojsnunes]

@V24039 3 issues:

1. pagination doesn't seem to be working on library, only works on refresh. (ask if you want me to take a look)
2. &pageNo=0 pagination is currently 0 based, should be 1 based.
3. change param name from pageNo to page

[V24039]

@V24039 3 issues:

1. pagination doesn't seem to be working on library, only works on refresh. (ask if you want me to take a look)
2. &pageNo=0 pagination is currently 0 based, should be 1 based.
3. change param name from pageNo to page

Hi @mariojsnunes I fixed the library issue, it was due the page missing as a dependency in the useEffect responsible for triggering the API call. I also made the changes requested for the URL

[dalibormrska]

Looks really cool, and works really well! Great job @V24039!

Two small remarks about spacing.

1. Some weird spacing behaviour between the single left arrow and the input. It seems that the gap there is not 5px but like 2px. It's as if the parent box of that arrow got squished by 2.75px. In the devtools the solution for me was to move the button one level up, out of the parent div.
   

   

2. Currently the page counter "of 3" does not have spacing around.
   I would propose margin-left of 10px for visual balance.
   

So the final spacings would look like this:

[mariojsnunes]

I would propose margin-left of 10px for visual balance.

Sorry, but margins are almost always the wrong choice in modern css (spacing should be decided by the parent, not the element itself).
Here I'd propose instead to group the input and the "of x" text on a <Flex> with a gap.

[V24039]

Hi @dalibormrska Sorry for the delay I was stuck with work, I have made the changes, following @mariojsnunes fixed both the comments, can you please review it once