Fix: Update routes page to use server-side pagination and filtering #7133
Conversation
- Updated getRoutes to use server-side parameters for filtering and pagination - Modified routes-table to work with API pagination response format - Changed search placeholder text to be more specific 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes shift route filtering and pagination from the client-side to the server-side by updating the API usage and related utility functions. The search input placeholder was also updated for clarity. Client code now passes query parameters to the API, and the API returns filtered, paginated data with metadata, simplifying client logic and removing unnecessary local processing. Additionally, promotional banners with call-to-action links were added in multiple pages, and UI styling adjustments were made in several components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SearchInput
participant RoutesTable
participant Utils (getRoutes)
participant API
User->>SearchInput: Enter search query
SearchInput->>RoutesTable: Pass search parameters
RoutesTable->>Utils (getRoutes): Call getRoutes({filters, pagination})
Utils (getRoutes)->>API: GET /routes?filters&pagination
API-->>Utils (getRoutes): Return filtered, paginated routes + meta
Utils (getRoutes)-->>RoutesTable: Return data and meta
RoutesTable-->>SearchInput: Display filtered results and pagination
Suggested reviewers
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🔇 Additional comments (6)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7133 +/- ##
=======================================
Coverage 55.61% 55.61%
=======================================
Files 902 902
Lines 58177 58177
Branches 4085 4085
=======================================
Hits 32356 32356
Misses 25716 25716
Partials 105 105
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx (1)
78-84:⚠️ Potential issueDouble pagination issue.
There appears to be both server-side pagination (using
offsetandlimitin the API call) and client-side pagination (slicing the results). This could cause issues with pagination accuracy.The server already returns paginated results, so client-side pagination is redundant and could lead to showing fewer results than expected. Consider this fix:
- const totalPages = Math.ceil(filteredCount / DEFAULT_PAGE_SIZE); + const totalPages = Math.ceil(filteredCount / DEFAULT_PAGE_SIZE); - const activePage = Number(props.searchParams.page || 1); + const activePage = Number(props.searchParams.page || 1); - const pageSize = DEFAULT_PAGE_SIZE; - const startIndex = (activePage - 1) * pageSize; - const endIndex = startIndex + pageSize; - const paginatedRoutes = routesToRender.slice(startIndex, endIndex); + const paginatedRoutes = routesToRender;
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts (1)
53-53: Remove outdated comment.This comment contradicts the changes being made in this PR, which is moving filtering and pagination to server-side.
- // It's faster to filter client side, doesn't seem to be a big performance boost to paginate/filter server side
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/client/search.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts (2)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST(24-25)apps/dashboard/src/@/constants/server-envs.ts (1)
DASHBOARD_THIRDWEB_SECRET_KEY(8-9)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx (1)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts (1)
getRoutes(8-70)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/client/search.tsx (1)
50-50: Great UX improvement!The updated placeholder text provides clearer guidance to users about what they can search for, aligning with the server-side filtering capabilities now implemented in the system.
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts (4)
8-26: Function signature properly updated to support server-side filtering and pagination.The function now accepts all necessary parameters for server-side filtering and pagination, with proper TypeScript typing.
31-51: Server-side filtering parameters properly implemented.All the new filtering parameters are correctly passed to the API endpoint as query parameters.
54-59: Simplified authorization header.The authorization header has been simplified to only use the
x-secret-keyheader, which is cleaner.
64-69: Return type updated to include metadata for pagination.The response type has been properly updated to include metadata for pagination, and the function now returns the full response object.
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx (5)
15-23: SearchParams type appropriately updated.The type has been simplified to only include the necessary parameters for the new server-side filtering approach.
30-36: Filter object structure updated for server-side filtering.The filters object now uses the new query parameter names that match the updated
getRoutesfunction.
44-44: Filter conditions properly mapped to new query parameters.Text-based searches are now properly mapped to the new
originQueryanddestinationQueryparameters.Also applies to: 52-52
55-60: API call properly updated for server-side pagination and filtering.The call to
getRoutesnow includes the necessary pagination parameters (limitandoffset) and filter parameters.
62-66: Return structure updated to use server response metadata.The function now properly returns the routes data along with the total and filtered counts from the API response.
size-limit report 📦
|
- Updated `CopyTextButton` styles for improved spacing and appearance. - Added a promotional section for Universal Bridge on multiple pages, including `bridge/page.tsx`, `routes/page.tsx`, and `universal-bridge/page.tsx`, featuring a call-to-action button. - Improved layout and styling of route list components for better user experience. This update aims to enhance the visibility and accessibility of the Universal Bridge feature across the dashboard.
- Adjusted the positioning of a div in `bridge/page.tsx` to enhance the overall layout and visual consistency. - Removed unnecessary class from the div to streamline the styling. This change aims to improve the user interface and maintain a clean design across the dashboard.
🤖 Generated with Claude Code
PR-Codex overview
This PR primarily focuses on enhancing the user interface and functionality of the Universal Bridge component within the dashboard application. It introduces new features, modifies existing components, and improves styling for better user experience.
Detailed summary
CopyTextButtonpadding and styles.Searchinput placeholder to "Search by token name or symbol".RouteListRowandRoutesDatafor better layout and accessibility.Summary by CodeRabbit