feat: WebSocket real-time updates for Items page (#6)#13
Merged
Conversation
Implements the frontend WebSocket infrastructure and Items page with live toast notifications as described in issue #6. Changes: - feat(config): export WS_BASE_URL (ws in dev, wss-aware in prod) - feat(hooks): add useWebSocket custom hook wrapping reconnecting-websocket Returns { lastMessage, connectionStatus, sendMessage } with typed WebSocketMessage interface and proper useEffect cleanup - feat(context): add WebSocketProvider with subscribe(type, handler) API Single shared WS connection; components subscribe to specific event types - feat(pages): add Items page with MUI table and WebSocket toast notifications Full CRUD list view; toasts on item_created/updated/deleted events - feat(routes): register /items route and Items nav link in Layout - feat(api): add Item interface and itemService to client.ts - deps: install reconnecting-websocket ^4.4.0 Tests: - 11 unit tests for use- 11 unit tests for use- 11 unit tests for use- 11 unit tests for use- 11 unit tests for use- 11 unit tests for use- 11 u - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -p.test.tsx- - - - - - - - - - - - - - - - - - - - - - - - - #6
There was a problem hiding this comment.
Pull request overview
Adds frontend WebSocket infrastructure (hook + context provider) and introduces a new /items page that fetches and displays Items and shows toast notifications for item events, aligning with the app’s real-time update direction.
Changes:
- Added
useWebSockethook (ReconnectingWebSocket wrapper) andWebSocketProviderwith typed subscription API. - Added a new Items page and wired it into routing/navigation.
- Added unit + e2e tests covering the new hook/context and Items navigation/page rendering.
Reviewed changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/routes.tsx | Registers the new /items route. |
| frontend/src/pages/Items/index.tsx | New Items page: fetches items, renders MUI table, subscribes to WS events for toast notifications. |
| frontend/src/pages/Items/tests/Items.test.tsx | Unit tests for Items page loading/error/empty/table + WS toast + unsubscribe behavior. |
| frontend/src/hooks/useWebSocket.ts | New hook wrapping reconnecting-websocket, exposes status/lastMessage/sendMessage. |
| frontend/src/context/WebSocketContext.tsx | New context/provider managing a single shared WS connection and typed subscribe(type, handler) API. |
| frontend/src/components/Layout/index.tsx | Adds “Items” nav link to the app bar. |
| frontend/src/components/Layout/tests/Layout.test.tsx | Updates nav link test to include “Items”. |
| frontend/src/api/config.ts | Adds WS_BASE_URL for WebSocket connections. |
| frontend/src/api/client.ts | Adds Item type + itemService CRUD-ish client functions. |
| frontend/src/tests/useWebSocket.test.ts | Unit tests for the WebSocket hook behavior via mocked ReconnectingWebSocket. |
| frontend/src/tests/WebSocketContext.test.tsx | Unit tests for provider behavior (status, lastMessage, subscribe/unsubscribe). |
| frontend/src/tests/App.test.tsx | Mocks ReconnectingWebSocket + itemService to keep App render tests isolated. |
| frontend/src/App.tsx | Wraps the app in WebSocketProvider. |
| frontend/package.json | Adds reconnecting-websocket dependency. |
| frontend/package-lock.json | Locks reconnecting-websocket dependency. |
| frontend/e2e/websocket.spec.ts | E2E checks that app remains functional under WS background/interruptions (UI-focused). |
| frontend/e2e/navigation.spec.ts | Updates navigation e2e to include Items and adds Home→Items navigation test. |
| frontend/e2e/items.spec.ts | Adds Items page e2e coverage (heading/table/headers/navigation). |
Files not reviewed (1)
- frontend/package-lock.json: Language not supported
You can also share your feedback on Copilot code review. Take the survey.
| // in development, points directly at the backend dev server. | ||
| export const WS_BASE_URL = | ||
| process.env.NODE_ENV === 'production' | ||
| ? `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}` |
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
Implements the frontend WebSocket infrastructure and a live Items page as specified in issue #6. A single shared WebSocket connection (via
reconnecting-websocket) is managed by a React Context provider; components subscribe to specific event types through a typed API.Changes
New files
frontend/src/hooks/useWebSocket.ts— custom hook wrappingreconnecting-websocket; returns{ lastMessage, connectionStatus, sendMessage }with typedWebSocketMessageinterface and properuseEffectcleanupfrontend/src/context/WebSocketContext.tsx—WebSocketProviderwithsubscribe(type, handler)API; manages a single shared WS connection per app instancefrontend/src/pages/Items/index.tsx— Items page with MUI data table and WebSocket toast notifications onitem_-frontend/src/pages/Items/index.tsx— Items page wintend/src/pages/Items/__tests__/Items.test.t-frontend/src/pages/Items/index.tsx— Items page with MUI d_/-frontent.tes- `frontend/src/t tests for the custom hookfrontend/src/__tests__/WebSocketContext.test.tsx— 11 unit tests for the context providerfrontend/e2e/websocket.spec.ts— 3 Playwright e2e tests for WebSocket behaviourfrontend/e2e/items.spec.ts— 4 Playwright e2e tests for the Items pag-frontendie-frontend/e2e/items.spec.ts— 4 Playwright e2e tests for the Items pag-frontendie-frontend/e2e/items.spec.ts— 4 Playwright e2e tests for the Items pag-frontendie-frontend/e2e/items.spec.ts— 4 Playwi-frontend/e2e/items.spec.ts T-frontend/e2e/items.spec.ts— 4 Playwright e2e tests for the Items pag-frontendie-fmake test-e2eCloses #6