CIDs paging [storage]

[tanmoyAtb]

closes #1325

Some functionality to look into
Move into next pages,
Move into previous pages,
Search Pins,
Add pin,
Unpin

---

Submission checklist:

Layout

• Change looks good in the desktop web ui

Theme

• Components / elements inspected in light mode

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-1889.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7pt86nh8vl8rd7ick00.

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-1889.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7pt877h8vl8rd7ickcg.

[render]

Your Render PR Server URL is https://files-ui-stage-pr-1889.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7pt87vh8vl8rd7ickh0.

[lgtm-com]

This pull request introduces 3 alerts when merging ce5c1f4 into a08b19d - view on LGTM.com

new alerts:

• 3 for Unused variable, import, function or class

[lgtm-com]

This pull request introduces 3 alerts when merging 7a2a114 into 03f67c5 - view on LGTM.com

new alerts:

• 3 for Unused variable, import, function or class

[FSM1]

The code looks really great. The only comment I have is when switching pages, both the buttons become disabled (which is expected), and a spinner appears in both of the page buttons (this is less expected).

Not sure what the solution is here - either show a spinner only on the button that was clicked, or do not have a spinner on the button during the request at all.

CIDs.-.Chainsafe.Storage.-.Brave.2022-04-14.17-11-51.mp4

[tanmoyAtb]

The code looks really great. The only comment I have is when switching pages, both the buttons become disabled (which is expected), and a spinner appears in both of the page buttons (this is less expected).

Not sure what the solution is here - either show a spinner only on the button that was clicked, or do not have a spinner on the button during the request at all.

CIDs.-.Chainsafe.Storage.-.Brave.2022-04-14.17-11-51.mp4

All right, we're handling to show spinner only on the next or previous button now. 👍

[asnaith]

Hey @tanmoyAtb, I found an issue that I've demonstrated in the video below. I had two pages of cids but after sorting one of the columns the paging system broke.

breaking.paging.mov

[tanmoyAtb]

Hey @tanmoyAtb, I found an issue that I've demonstrated in the video below. I had two pages of cids but after sorting one of the columns the paging system broke.

breaking.paging.mov

Ahh yes, that makes sense, That's a great catch @asnaith. I'll be looking into it.

[tanmoyAtb]

Hey @tanmoyAtb, I found an issue that I've demonstrated in the video below. I had two pages of cids but after sorting one of the columns the paging system broke.

breaking.paging.mov

The sort directions should work properly now. @asnaith

[Tbaut]

I've had a hard time concentrate to properly understand the logic happening here, I'm particularly confused by the dates, I bet this is what we base our sorting on, rather than any id, also flags like isPreviousPin, were confusing maybe it's a naming thing.
In any case I made a couple suggestions, but playing with it was flawless 🚀

[tanmoyAtb]

I've had a hard time concentrate to properly understand the logic happening here, I'm particularly confused by the dates, I bet this is what we base our sorting on, rather than any id, also flags like isPreviousPin, were confusing maybe it's a naming thing. In any case I made a couple suggestions, but playing with it was flawless 🚀

Agreed, Going to improve the variable names here.

So with the dates. There has been a lot of back and forth with this logic to get here and its a bit tricky.
To fetch next pins -> we pass a before date based on the oldest pin date available in view, we fetch them in date descending order, so the we get pins closest to the before date.
For previous pins -> We pass an after date based on the latest pin in view, and fetch in date ascending order, again to get the latest pins closest the the after date.