Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/scrollup pagination v2 #244

Merged
merged 26 commits into from
Jun 4, 2024
Merged

Conversation

dave-cao
Copy link
Collaborator

@dave-cao dave-cao commented Jun 4, 2024

Pull Request Checklist

Please make sure you've checked the following items before submitting your pull request:

  • Have you tested your changes locally?
  • Does your app build successfully on your local machine (npm run build)?
  • Have you formatted your code according to project standards (npm run format)?
  • Have you removed all console.log statements?
  • Linked to the GitHub GitHub issue #216

Additional Technical Comments

All changes were made within components > liveFeed

The purpose of this pull request is to make it so when users scroll to the top of the container, it would load an additional 10 posts. This would keep going until the max posts for that container is reached.

Feature Breakdown (Scroll down for video)

  • queries.ts: previously we had a function grab 10 posts be it either Moderator or general posts, and then we would filter and separate it, however this mean scrolling up would grab either moderator or general posts. I wanted to separate these two types of posts so I created 2 new supabase query functions to grab moderator posts and general posts separately
  • useScroll.ts: previously useScrollToBottom.ts, I found that it was appropriate to merge this hook into a general useScroll.ts hook. In addition to the scroll to bottom functionality, I added a scroll to top feature as well (to induce pagination)
  • usePagination.ts: this hook handles the pagination for both the moderator container and the general posts container
  • useFetchPosts.ts: this hook is a helper hook for useLiveFeed.ts. I just broke down the fetch for both moderator posts and other posts

Feature Demonstration

scrollup_paginationdemo.mp4

Copy link

vercel bot commented Jun 4, 2024

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

Name Status Preview Comments Updated (UTC)
one-accord ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 4, 2024 4:45pm

@dave-cao dave-cao linked an issue Jun 4, 2024 that may be closed by this pull request
@dave-cao dave-cao requested a review from Carlosaj18 June 4, 2024 03:52
@Carlosaj18 Carlosaj18 merged commit 8bd9bc9 into dev Jun 4, 2024
1 of 2 checks passed
@dave-cao dave-cao deleted the feature/scrollupPaginationV2 branch June 4, 2024 17:34
@dave-cao dave-cao restored the feature/scrollupPaginationV2 branch June 4, 2024 17:40
@dave-cao dave-cao deleted the feature/scrollupPaginationV2 branch June 5, 2024 20:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add pagination to the live feed
2 participants