Skip to content

feat(frontend): migrate component to react server components for Transaction History Pagination - #1236

Merged
emdevelopa merged 1 commit into
emdevelopa:mainfrom
Abidoyesimze:feature/fe-migrate-component-to-react-server-components-for-transaction-history-pagination
Jul 24, 2026
Merged

feat(frontend): migrate component to react server components for Transaction History Pagination#1236
emdevelopa merged 1 commit into
emdevelopa:mainfrom
Abidoyesimze:feature/fe-migrate-component-to-react-server-components-for-transaction-history-pagination

Conversation

@Abidoyesimze

Copy link
Copy Markdown
Contributor

Summary

  • Extracts pagination out of payment-history/page.tsx into a standalone, presentational TransactionHistoryPagination component (keyboard-accessible prev/next + windowed page numbers, mobile-compact "Page X of Y" view).
  • Wires up real page navigation through the existing URL-driven filter state — the backend already returned page/limit/total_pages, but the frontend hardcoded page=1 and just showed a static "End of list" message.
  • Adds recentPayments.pagination translations for en/es/pt.

Note on "React Server Components"

A literal full RSC migration of this page isn't compatible with its live WebSocket payment updates and instant client-side filtering (both client-only APIs). Instead, the new pagination component is deliberately data-fetching-free and driven entirely by props/callback, so it's trivially reusable if the page is ever split into a server shell + client island later.

Test plan

  • vitest run src/components/TransactionHistoryPagination.test.tsx — 11/11 passing (rendering, prev/next boundaries, page-window collapsing with ellipsis, aria-current, disabled state)
  • tsc --noEmit clean on touched files
  • eslint clean on touched files

Closes #1220

🤖 Generated with Claude Code

@vercel

vercel Bot commented Jul 24, 2026

Copy link
Copy Markdown

@Abidoyesimze is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 24, 2026

Copy link
Copy Markdown

@Abidoyesimze 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! 🚀

Learn more about application limits

…on History

Payment history previously fetched a hardcoded first page (LIMIT=50) and
showed a static "End of list" message even though the backend already
supports full page/limit/total_pages pagination. Extracts a pure,
prop-driven TransactionHistoryPagination component (keyboard accessible,
windowed page numbers, mobile-compact "Page X of Y" view) and wires real
page navigation through the existing URL-driven filter state.

A literal full React Server Component migration isn't compatible with this
page's live WebSocket updates and instant client-side filtering, so the new
component is deliberately data-fetching-free and controlled via props/
callback, making it trivially reusable if the page is ever split into a
server shell + client island.

Closes emdevelopa#1220

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@Abidoyesimze
Abidoyesimze force-pushed the feature/fe-migrate-component-to-react-server-components-for-transaction-history-pagination branch from 96ec382 to b81f90b Compare July 24, 2026 20:04
@emdevelopa
emdevelopa merged commit b5def5d into emdevelopa:main Jul 24, 2026
2 of 5 checks passed
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.

[Frontend] Migrate component to React Server Components for Transaction History Pagination

2 participants