47 lines
2.2 KiB
TypeScript
47 lines
2.2 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useGatewayWebSocketStore } from '~/store/gateway-websocket';
|
|
import { useTokenStore } from '~/store/token';
|
|
|
|
export function GatewayWebSocketConnectionManager() {
|
|
const connectWebSocket = useGatewayWebSocketStore((state) => state.connect);
|
|
const disconnectWebSocket = useGatewayWebSocketStore((state) => state.disconnect);
|
|
const wsStatus = useGatewayWebSocketStore((state) => state.status);
|
|
|
|
const token = useTokenStore((state) =>
|
|
state.token,
|
|
);
|
|
|
|
useEffect(() => {
|
|
console.debug(`WS Manager: Status (${wsStatus})`);
|
|
|
|
if (!!token) {
|
|
// Connect if we should be connected and are currently idle, disconnected, or errored out
|
|
if (wsStatus === 'IDLE' || wsStatus === 'DISCONNECTED' || wsStatus === 'ERROR') {
|
|
console.log("WS Manager: Conditions met. Calling connect...");
|
|
// Pass the stable token getter function reference
|
|
connectWebSocket(() => token);
|
|
}
|
|
} else {
|
|
// Disconnect if we shouldn't be connected and are currently in any connected/connecting state
|
|
if (wsStatus !== 'IDLE' && wsStatus !== 'DISCONNECTED') {
|
|
console.log("WS Manager: Conditions no longer met. Calling disconnect...");
|
|
disconnectWebSocket(true); // Intentional disconnect
|
|
}
|
|
}
|
|
|
|
// The disconnect logic for component unmount (e.g., user logs out entirely)
|
|
return () => {
|
|
// Check status on unmount to avoid disconnecting if already idle/disconnected
|
|
const currentStatus = useGatewayWebSocketStore.getState().status;
|
|
if (currentStatus !== 'IDLE' && currentStatus !== 'DISCONNECTED') {
|
|
console.log("WS Manager: Unmounting. Calling disconnect...");
|
|
// Ensure Zustand has the latest state before calling disconnect
|
|
useGatewayWebSocketStore.getState().disconnect(true); // Intentional disconnect on unmount
|
|
}
|
|
};
|
|
// Dependencies: connect/disconnect actions, auth status, route location
|
|
}, [connectWebSocket, disconnectWebSocket]);
|
|
|
|
// This component doesn't render anything itself
|
|
return null;
|
|
} |