feat: auto-refresh Items list on WebSocket events#14
Merged
Conversation
Refactored fetchItems into a useCallback with a silent param so that
background refreshes triggered by WebSocket events do not surface error
alerts on failure. Wired item.created, item.updated, and item.deleted
event handlers to call fetchItems({ silent: true }) so the list stays
in sync across tabs without a hard reload.
Bug fixes:
- Error state was not cleared (setError(null)) on a successful fetch
- Silent background refreshes were incorrectly showing the error alert
on transient fetch failures
Tests extended to 63 unit tests covering re-fetch assertions, silent-
fail behaviour, UI updates from events, rapid-event deduplication, and
error recovery.
Refs #7
There was a problem hiding this comment.
Pull request overview
Updates the frontend Items page to automatically refresh its list when relevant WebSocket events arrive, keeping the UI in sync with backend changes.
Changes:
- Refactors initial item loading into a reusable
fetchItemscallback and separates initialloadinghandling. - Triggers a background re-fetch on
item.created,item.updated, anditem.deletedWebSocket events. - Adds/extends Vitest coverage to validate re-fetch behavior, silent-fail behavior, and DOM updates after refreshes.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/pages/Items/index.tsx | Adds memoized fetchItems and re-fetch-on-WebSocket-event behavior. |
| frontend/src/pages/Items/tests/Items.test.tsx | Adds tests covering event-driven re-fetching, silent refresh failures, and UI updates. |
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
56
to
72
| useEffect(() => { | ||
| const unsubCreated = subscribe('item.created', (msg: WebSocketMessage) => { | ||
| const item = msg.payload as Item; | ||
| setToast({ open: true, message: `Item '${item.name}' created`, severity: 'success' }); | ||
| void fetchItems(true); | ||
| }); | ||
|
|
||
| const unsubUpdated = subscribe('item.updated', (msg: WebSocketMessage) => { | ||
| const item = msg.payload as Item; | ||
| setToast({ open: true, message: `Item '${item.name}' updated`, severity: 'info' }); | ||
| void fetchItems(true); | ||
| }); | ||
|
|
||
| const unsubDeleted = subscribe('item.deleted', () => { | ||
| setToast({ open: true, message: 'Item deleted', severity: 'warning' }); | ||
| void fetchItems(true); | ||
| }); |
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
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.
Summary
Auto-refreshes the Items list whenever
item.created,item.updated, oritem.deletedWebSocket events arrive, keeping the list in sync across browser tabs without requiring a manual reload.Changes
frontend/src/pages/Items/index.tsx— RefactoredfetchItemsinto auseCallbackwith asilentboolean parameter. WebSocket event handlers (item.created,item.updated,item.deleted) now callfetchItems({ silent: true })so background refreshes do not surface error alerts on transient failures.frontend/src/pages/Items/__tests__/Items.test.tsx— Added 10 new unit tests covering re-fetch assertions, silent-fail behaviour, UI updates triggered by events, rapid-event deduplication, and error recovery.Bug fixes
setError(null)was missing from the success path1. Error state not cleared on success —setError(nd 1. **Error state not cleared on success** —setError(nulls i1. **Error state noerr1. Error state not cleared on success —setError(null)was missing from the success path1. Error state not cleared on success —setError(nd 1. **Error state not cleared on success* 63 unit tests passing (cd frontend && npm test`)Closes #7