fix: hide load more button when no more data is available

[imvedanshmehra]

What type of PR is this? (check all applicable)

• [ ] 🍕 Feature
• [X] 🐛 Bug Fix
• [ ] 📝 Documentation Update
• [ ] 🎨 Style
• [ ] 🧑‍💻 Code Refactor
• [ ] 🔥 Performance Improvements
• [ ] ✅ Test
• [ ] 🤖 Build
• [ ] 🔁 CI
• [ ] 📦 Chore (Release)
• [ ] ⏩ Revert

Description

This PR fixes issue #446

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

• [ ] 👍 yes
• [X] 🙅 no, because they aren't needed
• [ ] 🙋 no, because I need help

Added to documentation?

• [ ] 📜 README.md
• [ ] 📓 docs.opensauced.pizza
• [ ] 🍕 dev.to/opensauced
• [ ] 📕 storybook
• [X] 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[netlify[bot]]

✅ Deploy Preview for hot-sauced-ui ready!

Name	Link
🔨 Latest commit	7a4537bb3748adae7fddb1ad5c2481aee12fd61d
🔍 Latest deploy log	https://app.netlify.com/sites/hot-sauced-ui/deploys/63ebeb8d086e230008a92094
😎 Deploy Preview	https://deploy-preview-448--hot-sauced-ui.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[takanome-dev]

Thanks for your contribution @imvedanshmehra :pizza:

Seems like the button is still visible :thinking: I noticed that there is no more data after limit === 50. Updating the condition should fix this issue.

{fetchedData.length > 0 && activeLink !== "myVotes" && limit < 50 && (//render btn)}

Another thing I have noticed, maybe not related to this issue, the limit in the search params is different from the one sent to the API even after removing if (value > 25) return 50 :thinking: (see screenshot below)

Any idea of what's causing this @0-vortex?

[0-vortex]

Yes, this is not how limit works in general ... API has to provide a totalPages type of variable or an itemCount like ours. Fetched data length will always be limit 🍕

[imvedanshmehra]

Hi @TAKANOME-DEV, the Load More button is now visible only when we have some data.

We can set this condition limit <= 50 only if we are sure that the API will not return more than 50 data. Otherwise, we might not have any way to load past 50th data.

Regarding the second issue that the limit in search params is different than what we are sending to the API. I checked that locally it seems fine 🤔 (Please check the screenshot attached below).

[takanome-dev]

We can set this condition limit <= 50 only if we are sure that the API will not return more than 50 data. Otherwise, we might not have any way to load past 50th data.

Yeah, also the API returns hasNextPage in the meta object. So the button should be hidden if that property is false. I checked that locally it seems fine.

Weird :thinking: Try it with the deploy preview https://deploy-preview-448--hot-sauced-ui.netlify.app/

[imvedanshmehra]

I noticed that 50 is the maximum limit we can pass to the limit query params, which means that once we have fetched all the 50 items hasNextPage in the meta should be set to false but was still true somehow. Therefore, if we relying on hasNextPage to show/hide the Load More button, it will always be shown even though we have no more data to fetch.

[takanome-dev]

I noticed that 50 is the maximum limit we can pass to the limit query params, which means that once we have fetched all the 50 items hasNextPage in the meta should be set to false but was still true somehow.

True, there should be a reason why the limit is fixed. This pr should be good to go if you do the changes mentionned by o-vortex above and hide the button if limit <= 50 :pizza:

[0-vortex]

I noticed that 50 is the maximum limit we can pass to the limit query params, which means that once we have fetched all the 50 items hasNextPage in the meta should be set to false but was still true somehow.

True, there should be a reason why the limit is fixed.

This pr should be good to go if you do the changes mentionned by o-vortex above and hide the button if limit <= 50 :pizza:

I'm sorry but no, this is not the solution. Unless you agree to correctly implement meta, there is no incremental improvement we can do.

The load more button should disappear when the page is equal to the last page or hasNextPage is false. Has nothing to do with limit, it's just the number of items we display per page.

[takanome-dev]

I'm sorry but no, this is not the solution.

Oh my bad, thanks for clarifying this :+1: Unless you agree to correctly implement meta, there is no incremental improvement we can do.

I'll look into it, but can't promise anything

[OgDev-01]

Hey @imvedanshmehra How is this going? Have you been able to pull through?

[bdougie]

We will need to approach this differently. Closing for now.