[UXIT-3811] Add CSV export to tables #212
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds CSV export functionality to the service providers table, enabling users to download provider data with a timestamped filename for offline analysis. The implementation introduces a new export button, mapping utilities for data transformation, and refactors shared constants.
Changes:
- Added CSV export button with download functionality using react-csv library
- Created utility function to map provider data to CSV format
- Refactored CURIO_GITHUB_URL constant to shared location and created useExplorerUrl hook
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/SoftwareVersion.tsx | Refactored to use centralized CURIO_GITHUB_URL constant |
| src/components/ProviderOverview.tsx | Refactored to use new useExplorerUrl hook for explorer URL retrieval |
| src/app/service-providers/utils/mapProviderToCsvRow.ts | New utility function to transform provider data to CSV format (contains critical bugs) |
| src/app/service-providers/hooks/useExplorerUrl.ts | New custom hook to encapsulate explorer URL logic |
| src/app/service-providers/constants/providers.ts | New constants file with centralized CURIO_GITHUB_URL |
| src/app/service-providers/components/ServiceProvidersTable.tsx | Integrated CSV export functionality into table component |
| src/app/service-providers/components/ExportToCsvLink.tsx | New component rendering CSV download link |
| package.json | Added react-csv, prop-types, and @types/react-csv dependencies |
| package-lock.json | Lock file updates for new dependencies |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const csvData = useMemo(() => { | ||
| return table | ||
| .getFilteredRowModel() | ||
| .rows.map((row) => | ||
| mapProviderToCsvRow({ provider: row.original, explorerUrl }), | ||
| ) | ||
| }, [table, explorerUrl]) |
There was a problem hiding this comment.
The dependency array includes table which is recreated on every render, causing unnecessary recalculations of csvData. The dependency should be table.getFilteredRowModel().rows or the table's state properties that affect filtering (e.g., columnFilters, searchQuery) to ensure csvData only updates when the filtered data actually changes.
| ID: String(provider.id), | ||
| Provider: provider.name, | ||
| 'Provider Address': `${explorerUrl}${provider.serviceProviderAddress}`, | ||
| 'Service URL': provider.serviceUrl.toString(), |
There was a problem hiding this comment.
Calling toString() on a URL object is unnecessary since the schema defines serviceUrl as z.url() which already returns a string. The .toString() call can be removed for clarity.
| return ( | ||
| serviceStatus.charAt(0).toUpperCase() + | ||
| serviceStatus.slice(1).toLowerCase() | ||
| ) |
There was a problem hiding this comment.
This code will fail if serviceStatus is an empty string (when the fallback value '-' is used), because charAt(0) would return an empty string. The logic should check if serviceStatus is '-' before attempting the transformation, or apply title case transformation only to non-dash values.
|
@barbaraperic : A couple of things:
|
Thank you! |
📝 Description
This PR adds CSV export functionality to the service providers table, allowing users to download provider data for offline analysis.
See Issue #185
🛠️ Key Changes
service-providers-YYYY-MM-DD.csv)Added Dependencies:
react-csvfor CSV generationprop-types(peer dependency for react-csv)@types/react-csvfor TypeScript support📌 To-Do Before Merging
📸 Screenshots
🔖 Resources
react-csv NPM library