Fix Data Grid Selection & Batch API Sync Bugs
You are maintaining an enterprise data grid component (DataGrid) that fetches products from /api/products, supports multi-row selection, batch updates, and page switching. Users report several subtle state synchronization and UI bugs during batch actions and navigation.
Reported Bugs
- Stale Selection on Page Change & Refresh: When switching pages using the pagination buttons (
Previous,Next) or clickingRefresh Data, selected items from the previous page remain selected in state, causing incorrect item counts in the batch summary bar (X items selected). Switching back to a page should clear previous selections unless re-selected. - Race Condition / Out-of-Order Select All: Clicking the master
Select Allcheckbox selects items currently loaded in the page. However, if a user togglesSelect Allor individual items while a batch update request is pending or right after triggering a page change, the UI state becomes corrupted or out-of-sync with what is displayed. - Failed Batch Retry State & Partial Selection Discrepancy: When a batch API call (
POST /api/products/batch-update) fails, the selected items should remain selected so the user can re-try. However, if the user modifies selection during an active batch update or after a failed batch update, clickingApply Batch Actionperforms the action on an incorrect subset of items because the pending state is not reset or handled cleanly.
Requirements
- The initial fetch loads
/api/products?page=1(limit 5 per page). - Display pagination buttons
PreviousandNext, along with page indicator textPage 1 of Xand aRefresh Databutton. - Each table row has a checkbox (
aria-label="Select row [ID]"oraria-label="Select item [Name]"). The table header has a master checkbox witharia-label="Select all rows". - Selection state must be scoped to the currently displayed dataset. When the page changes or
Refresh Datais clicked, row selections must be reset to empty. - When items are selected, display a batch summary bar containing: text matching
X selected(e.g.2 selected), a dropdown select for status action (Set Status), and anApply Batch Actionbutton. - Clicking
Apply Batch Actionsends aPOSTrequest to/api/products/batch-updatewith{ ids: string[], status: string }. - During batch submission, disable the
Apply Batch Actionbutton,Refresh Databutton, and row selection checkboxes to prevent state race conditions. Display a loading messageUpdating.... - On batch action success, clear selections and refresh the current page dataset.
- On batch action error, show an error alert message
Failed to apply batch action. Please try again.Keep the selected checkboxes intact so the user can retry, and re-enable inputs upon failure.
The setup
The app is complete but has bugs in it. Find and fix them without rewriting what works.
- src/main.jsx
- src/App.jsx
- src/styles.css
Locked files are given finished for this drill and open read-only.
The preview has no network. fetch is answered by this problem's API:
- GET /api/products?page=1
- GET /api/products?page=2
- POST /api/products/batch-update
Follow-up: How would you optimize row selection state if selection needed to persist across pagination without losing batch update atomicity?
You can only edit `src/App.jsx`. `src/main.jsx` and `src/styles.css` are read-only.
- Views
- 3