Adding pagination feature

[CBID2]

Issues

Closes #1125

Changes proposed

@chris-nowicki and I implemented code that adds page numbers to the cards, creating an easier navigation for users.

Screenshots

Note to reviewers

@rupali-codes and @Anmol-Baranwal, this is a better version of PR #1655.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
linkshub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 25, 2023 9:19pm

[github-actions]

Thank you, CBID2, for creating this pull request and contributing to LinksHub! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

[CBID2]

Hey @Anmol-Baranwal. Review this PR. Ignore the other ones. Same with you @rupali-codes

[Anmol-Baranwal]

1. Whenever we move to a new category, it should reset to the initial page i.e. page 1.

The above change is necessary because of UX :)

Also, why did you close the other PRs? Was the conflict too much. I'm just asking.

As mentioned, please attach a screenshot of both the variations (change white and purple on floating widget).

[CBID2]

We're ready to go @Anmol-Baranwal and @rupali-codes! :)

[Anmol-Baranwal]

We're ready to go @Anmol-Baranwal and @rupali-codes! :)

I will review it tomorrow evening.

[Anmol-Baranwal]

@CBID2
You can see the bug here:
https://jam.dev/c/0109513b-4bef-4731-bca1-8297ff9a2c3a

I will review this after this is fixed.

[chris-nowicki]

I’ll work on this today and let you know when it is fixed :). I totally forgot about that portion of the code! Thanks for the reminder :)

…

On Sep 25, 2023, at 12:34 PM, Anmol Baranwal ***@***.***> wrote: @CBID2 <https://github.com/CBID2> You can see the bug here: https://jam.dev/c/0109513b-4bef-4731-bca1-8297ff9a2c3a I will review this after this is fixed. <https://user-images.githubusercontent.com/74038190/270412195-729d1d47-4e99-4552-9c6b-0f5e15840250.png> — Reply to this email directly, view it on GitHub <#1660 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYNULCCY2DFDY7KHGFJC6ZTX4GXANANCNFSM6AAAAAA4SQWIOM>. You are receiving this because you were mentioned.

[chris-nowicki]

@CBID2 You can see the bug here: https://jam.dev/c/0109513b-4bef-4731-bca1-8297ff9a2c3a

I will review this after this is fixed.

@CBID2 @Anmol-Baranwal - I think I was able to fix it. Can you verify?

[CBID2]

https://jam.dev/c/0109513b-4bef-4731-bca1-8297ff9a2c3a

It works on my end @chris-nowicki! :)

[Anmol-Baranwal]

For me, it's still there at least in the latest deployment.

[chris-nowicki]

For me, it's still there at least in the latest deployment.

Bummer! Where are you seeing it? Can you give a screen shot so I can try and replicate.

Here is what I see:

In this screen shot I am on page 2:

I then change category and it changes to page 1:

Is there multiple ways to change category? Maybe I am missing something :).

[CBID2]

For me, it's still there at least in the latest deployment.

Did you refresh it @Anmol-Baranwal?

[Anmol-Baranwal]

Contributor

In frontend category, you can go to Design Inspirations subcategory, then click page number 2 and then go to Animations subcategory. See if the page number changes.

Yeah, I checked the code too, it should work but why is it with me.

[chris-nowicki]

Contributor

In frontend category, you can go to Design Inspirations subcategory, then click page number 2 and then go to Animations subcategory. See if the page number changes.

Ah, I see it. Weird! So if the sub category changes it isn't updating but if the main category changes it is.

[Anmol-Baranwal]

@chris-nowicki
I am saying about subcategory not category.

Yeah!

[CBID2]

Contributor

In frontend category, you can go to Design Inspirations subcategory, then click page number 2 and then go to Animations subcategory. See if the page number changes.

Yeah, I checked the code too, it should work but why is it with me.

The numbers change on both on my end @Anmol-Baranwal. Maybe you need to refresh your browser?

[Anmol-Baranwal]

It should change without refreshing the browser.

[CBID2]

It should change without refreshing the browser.

Here's a video of the change @Anmol-Baranwal:

Pagination.working.mp4

[chris-nowicki]

@chris-nowicki I am saying about subcategory not category.

Yeah!

I am thinking it has something to do with State.

I am wondering if I should add the variables used in usePagination() to the Global Context?

@CBID2 - If you select Design Insipiration, go to page 2, and then select Animations you will see pagination stays on page 2 and doesn't reset to page 1.

[CBID2]

@chris-nowicki I am saying about subcategory not category.
Yeah!

I am thinking it has something to do with State.

I am wondering if I should add the variables used in usePagination() to the Global Context?

@CBID2 - If you select Design Insipiration, go to page 2, and then select Animations you will see pagination stays on page 2 and doesn't reset to page 1.

Ohh I see @chris-nowicki. Maybe adding variables could work :)

[chris-nowicki]

@CBID2 @Anmol-Baranwal I think I fixed it!

I figured that anytime the totalNumberOfCards change is when the subcategory/category changes. So when that happens the handlePageChange function should run and set the page back to 1. I created a useEffect in the usePagination.tsx hook:

  useEffect(() => {
    handlePageChange(1)
  }, [totalNumberOfCards])

I tested it out to see if it works and I think we are good to go :).

[CBID2]

Great @chris-nowicki. We're ready @rupali-codes! :)

[Anmol-Baranwal]

@chris-nowicki @CBID2
Thank you very much. You have truly put in a lot of effort for this. I genuinely appreciate your contribution.

[rupali-codes]

Looks perfect to me, thanks a lot @chris-nowicki & @CBID2 :)

[CBID2]

Woohoo! We did it @chris-nowicki! 😊

[chris-nowicki]

Woohoo! We did it @chris-nowicki! 😊

Woohoo! This was so fun to work on with y'all!