implemented sliding-window-pagination table#99
Merged
Utilitycoder merged 1 commit intoFundable-Protocol:mainfrom Mar 29, 2026
Merged
Conversation
|
@chizzyedoka Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Contributor
📝 WalkthroughWalkthroughThis PR implements a sliding window pagination system to enable navigation beyond the first 5 pages. It introduces a new Changes
Sequence DiagramsequenceDiagram
actor User
participant Page as history/page.tsx
participant Table as HistoryTable
participant Pagination as SlidingPagination
participant Hook as usePagination
participant Params as updateHistoryParams
User->>Pagination: Click page number
Pagination->>Pagination: navigate(targetPage)
Pagination->>Table: onPageChange(targetPage)
Table->>Page: onPageChange(targetPage)
Page->>Params: updateHistoryParams({ page: targetPage })
Params->>Page: Update URL & state
Page->>Table: Re-render with new page
Table->>Hook: usePagination({ currentPage, pageCount, siblingCount: 2 })
Hook->>Hook: getPaginationRange()
Hook->>Pagination: Return PaginationRangeItem[]
Pagination->>Pagination: Render updated page links
Pagination->>User: Display new pagination UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/app/`(overview)/history/page.tsx:
- Around line 252-255: The build fails because the onPageChange and
onLimitChange handlers call updateHistoryParams which is not defined or
imported; define or import the missing symbol and wire it to the component
state/update function used by this page (e.g., implement a local function
updateHistoryParams that updates the pagination/query params or import the
existing helper that does so), then replace the inline handlers to call that
defined function (keep the signatures used: updateHistoryParams({ page: nextPage
}) and updateHistoryParams({ page: 1, limit: nextLimit })) so the references in
onPageChange and onLimitChange resolve.
In `@apps/web/src/components/modules/payment-stream/StreamsTable.tsx`:
- Around line 211-215: The JSX has a mismatched tag and missing import: replace
the stray closing </div> with a closing </PaginationContent> to correctly match
the opening PaginationContent element and ensure PaginationContent is imported
at top of the file (or use the intended component name if different); confirm
the inner div that displays "Page {page} of {pageCount}" remains as a child of
PaginationContent and that the variables page and pageCount are in scope.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ca837f78-e133-4cbc-8531-1aa8f0586a14
📒 Files selected for processing (5)
apps/web/src/app/(overview)/history/page.tsxapps/web/src/components/modules/history/HistoryTable.tsxapps/web/src/components/modules/payment-stream/StreamsTable.tsxapps/web/src/components/molecules/SlidingPagination.tsxapps/web/src/hooks/use-pagination.ts
Comment on lines
+252
to
+255
| onPageChange={(nextPage) => updateHistoryParams({ page: nextPage })} | ||
| onLimitChange={(nextLimit) => | ||
| updateHistoryParams({ page: 1, limit: nextLimit }) | ||
| } |
Contributor
There was a problem hiding this comment.
Undefined handler causes a compile-time failure.
Line 252 and Line 254 call updateHistoryParams, but that symbol is not defined/imported in this file. This blocks the build.
💡 Minimal fix
- onPageChange={(nextPage) => updateHistoryParams({ page: nextPage })}
- onLimitChange={(nextLimit) =>
- updateHistoryParams({ page: 1, limit: nextLimit })
- }
+ onPageChange={(nextPage) => setPage(nextPage)}
+ onLimitChange={(nextLimit) => {
+ setPage(1);
+ setLimit(nextLimit);
+ }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/app/`(overview)/history/page.tsx around lines 252 - 255, The
build fails because the onPageChange and onLimitChange handlers call
updateHistoryParams which is not defined or imported; define or import the
missing symbol and wire it to the component state/update function used by this
page (e.g., implement a local function updateHistoryParams that updates the
pagination/query params or import the existing helper that does so), then
replace the inline handlers to call that defined function (keep the signatures
used: updateHistoryParams({ page: nextPage }) and updateHistoryParams({ page: 1,
limit: nextLimit })) so the references in onPageChange and onLimitChange
resolve.
Comment on lines
211
to
+215
| <PaginationContent className="hidden lg:flex flex-col sm:flex-row sm:space-y-0 sm:space-x-6 lg:space-x-8"> | ||
| <div className="flex w-[100px] items-center justify-center text-sm font-medium text-zinc-300" aria-live="polite" aria-atomic="true"> | ||
| Page {page} of {pageCount} | ||
| </div> | ||
| </PaginationContent> | ||
|
|
||
| <PaginationContent className="gap-2"> | ||
| <PaginationPrevious | ||
| onClick={() => updatePage(page - 1)} | ||
| disabled={!canPreviousPage} | ||
| /> | ||
| {Array.from( | ||
| { length: pageCount > 3 ? 3 : pageCount }, | ||
| (_, index) => ( | ||
| <PaginationLink | ||
| key={`streams-pagination-${index}`} | ||
| onClick={() => updatePage(index + 1)} | ||
| isActive={page === index + 1} | ||
| > | ||
| {index + 1} | ||
| </PaginationLink> | ||
| ) | ||
| )} | ||
|
|
||
| {pageCount > 3 ? ( | ||
| <PaginationContent className="flex items-center space-x-4"> | ||
| <PaginationEllipsis /> | ||
| <PaginationLink | ||
| onClick={() => updatePage(pageCount)} | ||
| isActive={page === pageCount} | ||
| > | ||
| {pageCount} | ||
| </PaginationLink> | ||
| </PaginationContent> | ||
| ) : null} | ||
|
|
||
| <PaginationNext | ||
| onClick={() => updatePage(page + 1)} | ||
| disabled={!canNextPage} | ||
| /> | ||
| </PaginationContent> | ||
| </Pagination> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Broken JSX structure in pagination summary block.
Line 211 opens PaginationContent, but Line 215 closes </div>. This is a parser error. Also, PaginationContent isn’t imported, so this block won’t compile as written.
💡 Suggested fix
- <PaginationContent className="hidden lg:flex flex-col sm:flex-row sm:space-y-0 sm:space-x-6 lg:space-x-8">
+ <div className="hidden lg:flex flex-col sm:flex-row sm:space-y-0 sm:space-x-6 lg:space-x-8">
<div className="flex w-[100px] items-center justify-center text-sm font-medium text-zinc-300" aria-live="polite" aria-atomic="true">
Page {page} of {pageCount}
</div>
- </div>
+ </div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <PaginationContent className="hidden lg:flex flex-col sm:flex-row sm:space-y-0 sm:space-x-6 lg:space-x-8"> | |
| <div className="flex w-[100px] items-center justify-center text-sm font-medium text-zinc-300" aria-live="polite" aria-atomic="true"> | |
| Page {page} of {pageCount} | |
| </div> | |
| </PaginationContent> | |
| <PaginationContent className="gap-2"> | |
| <PaginationPrevious | |
| onClick={() => updatePage(page - 1)} | |
| disabled={!canPreviousPage} | |
| /> | |
| {Array.from( | |
| { length: pageCount > 3 ? 3 : pageCount }, | |
| (_, index) => ( | |
| <PaginationLink | |
| key={`streams-pagination-${index}`} | |
| onClick={() => updatePage(index + 1)} | |
| isActive={page === index + 1} | |
| > | |
| {index + 1} | |
| </PaginationLink> | |
| ) | |
| )} | |
| {pageCount > 3 ? ( | |
| <PaginationContent className="flex items-center space-x-4"> | |
| <PaginationEllipsis /> | |
| <PaginationLink | |
| onClick={() => updatePage(pageCount)} | |
| isActive={page === pageCount} | |
| > | |
| {pageCount} | |
| </PaginationLink> | |
| </PaginationContent> | |
| ) : null} | |
| <PaginationNext | |
| onClick={() => updatePage(page + 1)} | |
| disabled={!canNextPage} | |
| /> | |
| </PaginationContent> | |
| </Pagination> | |
| </div> | |
| <div className="hidden lg:flex flex-col sm:flex-row sm:space-y-0 sm:space-x-6 lg:space-x-8"> | |
| <div className="flex w-[100px] items-center justify-center text-sm font-medium text-zinc-300" aria-live="polite" aria-atomic="true"> | |
| Page {page} of {pageCount} | |
| </div> | |
| </div> |
🧰 Tools
🪛 Biome (2.4.9)
[error] 211-211: Expected corresponding JSX closing tag for 'PaginationContent'.
(parse)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/components/modules/payment-stream/StreamsTable.tsx` around lines
211 - 215, The JSX has a mismatched tag and missing import: replace the stray
closing </div> with a closing </PaginationContent> to correctly match the
opening PaginationContent element and ensure PaginationContent is imported at
top of the file (or use the intended component name if different); confirm the
inner div that displays "Page {page} of {pageCount}" remains as a child of
PaginationContent and that the variables page and pageCount are in scope.
Contributor
|
Hi @chizzyedoka, Kindly add screen record of your implementation, it is required. |
pragmaticAweds
requested changes
Mar 29, 2026
Contributor
pragmaticAweds
left a comment
pragmaticAweds
left a comment
There was a problem hiding this comment.
Hi @chizzyedoka,
Kindly add screen record of your implementation, it is required.
Contributor
Author
|
Noted |
Contributor
|
Thanks chief, I am waiting. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
fixed #48
Summary by CodeRabbit