74 lines
No EOL
2.1 KiB
TypeScript
74 lines
No EOL
2.1 KiB
TypeScript
/**
|
|
* Optional component to handle WebSocket connection status toasts
|
|
* This can be used in components that want to show connection status notifications
|
|
*/
|
|
import { useCallback } from 'react';
|
|
import { useToastContext } from '../contexts/ToastContext';
|
|
import type { ConnectionStatus } from '../hooks/useJobStatusWebSocket';
|
|
|
|
export interface WebSocketToastHandlerProps {
|
|
/** Whether to show connection toasts */
|
|
enabled?: boolean;
|
|
|
|
/** Custom connection status messages */
|
|
messages?: {
|
|
connected?: string;
|
|
connecting?: string;
|
|
disconnected?: string;
|
|
error?: string;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Hook that returns a connection change handler for WebSocket toasts
|
|
*/
|
|
export function useWebSocketToastHandler(props: WebSocketToastHandlerProps = {}) {
|
|
const {
|
|
enabled = false,
|
|
messages = {}
|
|
} = props;
|
|
|
|
const toast = useToastContext();
|
|
|
|
const handleConnectionChange = useCallback((status: ConnectionStatus) => {
|
|
if (!enabled) return;
|
|
|
|
switch (status) {
|
|
case 'connected':
|
|
toast.toastOnly.success(messages.connected || 'Real-time updates connected');
|
|
break;
|
|
|
|
case 'connecting':
|
|
// Usually don't show toast for connecting to avoid spam
|
|
// toast.info(messages.connecting || 'Connecting to real-time updates...');
|
|
break;
|
|
|
|
case 'disconnected':
|
|
toast.toastOnly.warning(messages.disconnected || 'Real-time updates disconnected');
|
|
break;
|
|
|
|
case 'error':
|
|
toast.toastOnly.error(messages.error || 'Connection error - using cached data');
|
|
break;
|
|
}
|
|
}, [enabled, messages, toast]);
|
|
|
|
return handleConnectionChange;
|
|
}
|
|
|
|
/**
|
|
* Default connection status messages for different contexts
|
|
*/
|
|
export const CONNECTION_MESSAGES = {
|
|
jobList: {
|
|
connected: 'Job list real-time updates enabled',
|
|
disconnected: 'Job list updates disconnected',
|
|
error: 'Job list connection error'
|
|
},
|
|
|
|
jobDetail: {
|
|
connected: 'Job status real-time updates enabled',
|
|
disconnected: 'Job status updates disconnected',
|
|
error: 'Job status connection error'
|
|
}
|
|
} as const; |