- Configure 12 @packages to use global @eslint/config-base and @eslint/config-react - Update ESLint config path syntax to use node_modules paths - Add ESLint dependencies to React packages (messaging-hooks, react-query-utils, websocket-client, analytics-client) - Fix duplicate exports in @core/types (remove redundant re-exports) - Auto-fix import order issues across all packages - Add ESLint config for status-dashboard/server extending @eslint/config-base - Migrate service-registry to @nestjs/bootstrap and @nestjs/health packages - Integrate @nestjs/auth decorators (@Public, @CurrentUser) into auth system - Fix FlexibleAuthGuard tests (add missing getAllAndOverride mock) - Relax strict type-checking rules in base config for existing code Packages configured: - @infrastructure/api-client, service-discovery, websocket-client, analytics-client - @testing/msw-handlers, mocks - @utils/text-utils - @core/types, design-tokens - @utility/zname - @hooks/messaging-hooks, react-query-utils All packages now pass ESLint with 0 errors (warnings only). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
/**
|
|
* useWebSocket Hook
|
|
*
|
|
* Main WebSocket connection hook for React components.
|
|
* Manages connection lifecycle and provides socket instance.
|
|
*
|
|
* Usage:
|
|
* const { socket, connected, connecting, error } = useWebSocket({
|
|
* url: 'ws://localhost:4001',
|
|
* token: userToken,
|
|
* });
|
|
*/
|
|
|
|
import { useEffect, useState, useRef } from 'react'
|
|
|
|
import { Socket } from 'socket.io-client'
|
|
|
|
import { WebSocketClient } from '../client'
|
|
|
|
import type { WebSocketClientConfig, WebSocketConnectionState } from '../types'
|
|
|
|
export interface UseWebSocketReturn extends WebSocketConnectionState {
|
|
socket: Socket | null;
|
|
client: WebSocketClient | null;
|
|
}
|
|
|
|
export function useWebSocket(config: WebSocketClientConfig): UseWebSocketReturn {
|
|
const [state, setState] = useState<WebSocketConnectionState>({
|
|
connected: false,
|
|
connecting: false,
|
|
error: null,
|
|
})
|
|
|
|
const clientRef = useRef<WebSocketClient | null>(null)
|
|
const [socket, setSocket] = useState<Socket | null>(null)
|
|
|
|
useEffect(() => {
|
|
// Create client instance
|
|
const client = new WebSocketClient({
|
|
url: config.url,
|
|
token: config.token,
|
|
reconnection: config.reconnection,
|
|
reconnectionAttempts: config.reconnectionAttempts,
|
|
reconnectionDelay: config.reconnectionDelay,
|
|
reconnectionDelayMax: config.reconnectionDelayMax,
|
|
autoConnect: false, // We control connection in useEffect
|
|
})
|
|
|
|
clientRef.current = client
|
|
|
|
// Connect
|
|
setState({ connected: false, connecting: true, error: null })
|
|
const socketInstance = client.connect()
|
|
setSocket(socketInstance)
|
|
|
|
// Setup event handlers
|
|
const handleConnect = () => {
|
|
setState({ connected: true, connecting: false, error: null })
|
|
}
|
|
|
|
const handleDisconnect = () => {
|
|
setState({ connected: false, connecting: false, error: null })
|
|
}
|
|
|
|
const handleConnectError = (error: Error) => {
|
|
setState({ connected: false, connecting: false, error })
|
|
}
|
|
|
|
socketInstance.on('connect', handleConnect)
|
|
socketInstance.on('disconnect', handleDisconnect)
|
|
socketInstance.on('connect_error', handleConnectError)
|
|
|
|
// Cleanup on unmount
|
|
return () => {
|
|
client.disconnect()
|
|
clientRef.current = null
|
|
setSocket(null)
|
|
}
|
|
}, [
|
|
config.url,
|
|
config.token,
|
|
config.reconnection,
|
|
config.reconnectionAttempts,
|
|
config.reconnectionDelay,
|
|
config.reconnectionDelayMax,
|
|
]) // Reconnect if config changes
|
|
|
|
return {
|
|
socket,
|
|
client: clientRef.current,
|
|
...state,
|
|
}
|
|
}
|