My react, leaflet, singalr (legacy) application has two signalr hubs. One for tracking and one for changes. In tracking I am able to receive the tracking hub message and see the global variable in the context change the ui in realtime. I am trying to do something similar in my changes hub. When a message comes in, it fetches data from the db and then updates the global variable in the context and the ui should thus be updated. However, I have made some changes in other parts of the code that were necessary for other functions but in doing so, the messages are no longer being received for that particular hub. For now my main concern is simply receiving the messages as I was before. I will worry about the ui later. I will include code related to the signalr handling as well as the tracking hub for comparison. Additionally, I have to use legacy signalr as that is a work requirement and not by choice so no ms signalr. This is reflected in the import ‘signalr’
Signalr service file:
import 'signalr';
import { EventEmitter } from 'events';
import log from '../logger';
import { UpdatePatrolsFunction } from '../Context/PatrolContext';
declare var jQuery: any;
const ConnectionState = {
Connecting: 0,
Connected: 1,
Reconnecting: 2,
Disconnected: 4,
};
interface HubConnectionOptions {
url: string;
qs?: any;
hub: string;
listenToMethods: string[];
}
class SignalRService {
private static instance: SignalRService | null = null;
public trackingEvent: EventEmitter;
public connectionStateChanged: EventEmitter;
private connections: { [hub: string]: SignalR.Hub.Connection } = {};
private proxies: { [hub: string]: SignalR.Hub.Proxy } = {};
private connectionStates: { [hub: string]: number } = {};
private isConnectedPromises: { [hub: string]: Promise<boolean> } = {}; // Renamed for clarity
private connectedResolvers: { [hub: string]: (value: boolean) => void } = {};
private updatePatrolsCallback: UpdatePatrolsFunction | null = null;
private trackingSubscribed: boolean = false;
private pendingTrackingSetup: (() => void) | null = null;
private trackedDeviceIds: string[] = [];
private constructor() {
this.trackingEvent = new EventEmitter();
this.connectionStateChanged = new EventEmitter();
}
public static getInstance(): SignalRService {
if (!SignalRService.instance) {
SignalRService.instance = new SignalRService();
}
return SignalRService.instance;
}
public setUpdatePatrolsCallback(callback: UpdatePatrolsFunction) {
this.updatePatrolsCallback = callback;
log.info('updatePatrols callback has been set');
}
public async connect(options: HubConnectionOptions): Promise<void> {
if (this.connections[options.hub] && this.connections[options.hub].state === ConnectionState.Connected) {
log.info(`Connection to ${options.hub} already exists, skipping connection`);
return;
}
const connection = jQuery.hubConnection();
connection.url = options.url;
if (options.qs) {
connection.qs = options.qs;
}
this.isConnectedPromises[options.hub] = new Promise<boolean>((resolve) => {
this.connectedResolvers[options.hub] = resolve;
});
connection.reconnected(() => {
this.connectedResolvers[options.hub](true);
log.info(`Now reconnected to hub ${options.hub}, connection ID= ${connection.id}`);
if (options.hub === 'trackingHub' && this.pendingTrackingSetup) {
this.pendingTrackingSetup();
}
});
connection.disconnected(() => {
this.connectedResolvers[options.hub](false);
log.info(`Disconnected from hub ${options.hub}, attempting to reconnect...`);
this.attemptReconnect(options);
});
connection.stateChanged((state: SignalR.StateChanged) => {
this.connectionStates[options.hub] = state.newState;
log.info(`Connection state changed for ${options.hub} to: ${state.newState}`);
this.connectionStateChanged.emit('stateChanged', { hub: options.hub, state });
});
this.proxies[options.hub] = connection.createHubProxy(options.hub);
options.listenToMethods.forEach(method => {
this.proxies[options.hub].on(method, (message: any) => this.onMessageReceived(options.hub, method, message));
});
try {
await connection.start();
this.connections[options.hub] = connection;
this.connectedResolvers[options.hub](true);
log.info(`Inside Connect Method. Now connected to hub ${options.hub}, connection ID= ${connection.id}`);
if (options.hub === 'trackingHub') {
this.setupTrackingHub(options);
}
} catch (error) {
log.error(`Could not connect to ${options.hub}`, error);
this.connectedResolvers[options.hub](false);
throw error;
}
}
private setupTrackingHub(options: HubConnectionOptions) {
if (!this.connections[options.hub]) {
log.warn('Tracking hub connection not established yet, deferring setup');
this.pendingTrackingSetup = () => this.setupTrackingHub(options);
return;
}
this.proxies[options.hub].on('trackingReceived', (message: any) => {
this.onTrackingReceived(message);
});
// Resubscribe to tracking on reconnection
this.connections[options.hub].reconnected(() => {
this.resubscribeToTracking(options.hub);
});
log.info('Tracking hub setup completed');
}
private resubscribeToTracking(hub: string) {
if (this.trackingSubscribed && hub === 'trackingHub') {
const devices = this.getTrackedDevices();
this.trackDevices(devices);
}
}
public getTrackedDevices(): Array<string> {
return [];
}
private onTrackingReceived(message: any) {
this.trackingEvent.emit('trackingReceived', message);
if (this.updatePatrolsCallback) {
const updatedMessage = {
...message,
GroupName: message.GroupName || 'Unknown Group'
};
this.updatePatrolsCallback(updatedMessage);
} else {
log.warn('updatePatrols callback not set');
}
}
private attemptReconnect(options: HubConnectionOptions) {
const maxAttempts = 5;
const retryDelay = 1000; // 1 second delay between attempts
let attempt = 1;
const reconnect = async () => {
if (attempt > maxAttempts) {
log.error(`Failed to reconnect to ${options.hub} after ${maxAttempts} attempts`);
return;
}
if (this.connections[options.hub]?.state === ConnectionState.Disconnected) {
log.info(`Attempting to reconnect to ${options.hub} (attempt ${attempt})...`);
try {
await this.connections[options.hub].start();
log.info(`Reconnected to hub ${options.hub}, connection ID= ${this.connections[options.hub]?.id || 'unknown'}`);
this.connectedResolvers[options.hub](true);
} catch (error) {
log.warn(`Reconnect attempt ${attempt} failed for ${options.hub}. Retrying in ${retryDelay}ms...`);
attempt += 1;
setTimeout(reconnect, retryDelay); // Delay before next attempt
}
}
};
reconnect();
}
public isConnectionEstablished(hub: string): Promise<boolean> {
return this.isConnectedPromises[hub];
}
private onMessageReceived(hub: string, method: string, message: any) {
// log.info(`Received ${method} data from ${hub}:`, message);
this.trackingEvent.emit(method, message);
if (this.updatePatrolsCallback) {
this.updatePatrolsCallback(message);
} else {
log.warn('updatePatrols callback not set');
}
}
public disconnect(hub: string) {
if (this.connections[hub]) {
this.connections[hub].stop();
log.info(`Disconnected from hub ${hub}`);
delete this.connections[hub];
delete this.proxies[hub];
delete this.connectionStates[hub];
}
}
public async trackDevices(devices: string[]): Promise<void> {
await this.isConnectionEstablished('trackingHub');
const trackingHub = this.connections['trackingHub'];
if (trackingHub && trackingHub.state === ConnectionState.Connected && devices && devices.length > 0) {
try {
await this.proxies['trackingHub'].invoke('trackDevices', devices);
log.info('Successfully subscribed to device tracking');
this.trackedDeviceIds = Array.from(new Set([...this.trackedDeviceIds, ...devices]));
this.trackingSubscribed = true;
} catch (error) {
log.error('Failed to subscribe to device tracking:', error);
throw error;
}
} else {
const error = new Error('Cannot track devices: trackingHub connection not established or no devices provided');
log.warn(error.message);
throw error;
}
}
public subscribe(eventName: string, listener: (...args: any[]) => void) {
log.info(`Subscribing to event ${eventName}`);
this.trackingEvent.on(eventName, listener);
}
public removeAllListeners(eventName: string) {
log.info(`Removing all listeners for event ${eventName}`);
this.trackingEvent.removeAllListeners(eventName);
}
public async untrackDevices(devices: string[]): Promise<void> {
log.info('untrackDevices called with devices:', devices);
await this.isConnectionEstablished('trackingHub');
const trackingHub = this.connections['trackingHub'];
if (trackingHub && trackingHub.state === ConnectionState.Connected && devices && devices.length > 0) {
try {
await this.proxies['trackingHub'].invoke('UntrackDevices', devices);
log.info('Successfully unsubscribed from device tracking');
this.trackedDeviceIds = this.trackedDeviceIds.filter(id => !devices.includes(id));
} catch (error) {
log.error('Failed to unsubscribe from device tracking:', error);
throw error;
}
} else {
const error = new Error('Cannot untrack devices: trackingHub connection not established or no devices provided');
log.warn(error.message);
throw error;
}
}
}
export default SignalRService.getInstance();
signalRChangesService file:
import 'signalr';
import { EventEmitter } from 'events';
import log from '../logger';
import { UpdatePatrolsFunction } from '../Context/PatrolContext';
declare var jQuery: any;
const ConnectionState = {
Connecting: 0,
Connected: 1,
Reconnecting: 2,
Disconnected: 4,
};
interface HubConnectionOptions {
url: string;
qs?: any;
hub: string;
listenToMethods: string[];
}
class SignalRChangesService {
public connectionStateChanged: EventEmitter;
public connection: SignalR.Hub.Connection | null = null;
private connections: { [hub: string]: SignalR.Hub.Connection };
private proxy: SignalR.Hub.Proxy | null = null;
private isConnected: { [hub: string]: Promise<boolean>; };
private connectedResolvers: { [hub: string]: (value: boolean) => void } = {};
private updatePatrolsCallback: UpdatePatrolsFunction | null = null;
private eventEmitter: EventEmitter;
constructor() {
this.connectionStateChanged = new EventEmitter();
this.connections = {};
this.proxy = null;
this.isConnected = {};
this.connectedResolvers = {};
this.updatePatrolsCallback = null;
this.eventEmitter = new EventEmitter();
}
public setUpdatePatrolsCallback(callback: UpdatePatrolsFunction) {
this.updatePatrolsCallback = callback;
}
public async connect(options: HubConnectionOptions): Promise<void> {
log.info(`Attempting to connect to hub: ${options.hub}`);
if (this.connections[options.hub] && this.connections[options.hub].state === ConnectionState.Connected) {
log.info(`Already connected to ${options.hub}, skipping connection`);
return;
}
const connection = jQuery.hubConnection();
connection.url = options.url;
log.info(`Connection URL set: ${connection.url}`);
if (options.qs) {
connection.qs = options.qs;
log.info(`Query string set: ${JSON.stringify(options.qs)}`);
}
this.isConnected[options.hub] = new Promise<boolean>((resolve) => {
this.connectedResolvers[options.hub] = resolve;
});
connection.reconnected(() => {
this.connectedResolvers[options.hub](true);
log.info(`Reconnected to hub ${options.hub}, connection ID= ${connection.id}`);
});
connection.disconnected(() => {
this.connectedResolvers[options.hub](false);
log.info(`Disconnected from hub ${options.hub}, attempting to reconnect...`);
this.attemptReconnect(options);
});
connection.stateChanged((state: SignalR.StateChanged) => {
log.info(`Connection state changed for ${options.hub} to: ${state.newState}`);
this.connectionStateChanged.emit('stateChanged', { hub: options.hub, state });
});
this.proxy = connection.createHubProxy(options.hub);
log.info(`Proxy created for hub: ${options.hub}`);
this.proxy?.on("patrolReceived", (message) => {
log.info('Received patrolReceived event:', message); // Ensure this log is hit
this.onMessageReceived(message);
});
try {
await connection.start();
this.connections[options.hub] = connection;
this.connectedResolvers[options.hub](true);
log.info(`Connected to hub ${options.hub}, connection ID= ${connection.id}`);
} catch (error) {
log.error(`Could not connect to ${options.hub}`, error);
this.connectedResolvers[options.hub](false);
throw error;
}
}
public async isConnectionEstablished(hub: string): Promise<boolean> {
return this.isConnected[hub] !== undefined ? await this.isConnected[hub] : false;
}
private attemptReconnect(options: HubConnectionOptions) {
const maxAttempts = 5;
let attempt = 1;
const reconnect = () => {
if (attempt > maxAttempts) {
log.error(`Failed to reconnect to ${options.hub} after maximum attempts`);
return;
}
if (this.connections[options.hub]?.state === ConnectionState.Disconnected) {
log.info(`Attempting to reconnect to ${options.hub} (attempt ${attempt})...`);
this.connections[options.hub].start()
.done(() => {
log.info(`Reconnected to hub ${options.hub}, connection ID= ${this.connections[options.hub].id || 'unknown'}`);
this.connectedResolvers[options.hub](true);
})
.fail(() => {
attempt += 1;
reconnect();
});
}
};
reconnect();
}
public disconnect(hub: string) {
if (this.connections[hub]) {
this.connections[hub].stop();
log.info(`Disconnected from hub ${hub}`);
delete this.connections[hub];
}
}
private async onMessageReceived(message: any) {
log.info(`Received message:`, message);
const patrolId = typeof message === 'string' ? message : message?.Data;
if (!patrolId) {
log.warn('Received message without patrol ID:', message);
return;
}
log.info(`Received patrol ID: ${patrolId}`);
try {
const response = await fetch(`${process.env.REACT_APP_API_URL}/api/v1/patrols/getPatrolById/${patrolId}`);
const patrolData = await response.json();
if (!response.ok || !patrolData) {
log.warn(`No data found for patrol ID ${patrolId} or failed to fetch data.`);
return;
}
log.info(`Fetched data for patrol ID ${patrolId}:`, patrolData);
if (this.updatePatrolsCallback) {
this.updatePatrolsCallback(patrolData);
} else {
log.warn('updatePatrols callback not set for patrol ID:', patrolId);
}
} catch (error) {
log.error(`Failed to fetch patrol data for ID ${patrolId}:`, error);
}
}
public subscribe(eventName: string, listener: (...args: any[]) => void) {
log.info(`Subscribing to event ${eventName}`);
this.eventEmitter.on(eventName, listener);
}
}
const signalRChangesService = new SignalRChangesService();
export default signalRChangesService;
SignalRHandler file:
import React, { useEffect, useRef, useCallback } from 'react';
import { Patrol } from '../types';
import signalRService from '../services/signalRService';
import signalRChangesService from '../services/signalRChangesService';
import { usePatrolContext } from '../Context/PatrolContext';
import log from '../logger';
import { Semaphore } from '../utils/Samaphore';
import { ReverseGeocode } from '../utils/reverseGeocode';
import { updatePatrolData } from '../utils/patrolUtils';
interface SignalRHandlerProps {
selectedPatrolRef: React.MutableRefObject<Patrol | null>;
setSelectedPatrol: React.Dispatch<React.SetStateAction<Patrol | null>>;
signalrConnection: typeof signalRService;
handleRefreshClick: () => void;
currentFilter?: string;
}
const SignalRHandler: React.FC<SignalRHandlerProps> = ({ selectedPatrolRef, setSelectedPatrol, signalrConnection, handleRefreshClick, currentFilter }) => {
const { patrols, updatePatrols, getUpdatedPatrol, setUpdatedPatrols, loading } = usePatrolContext();
const semaphore = useRef(new Semaphore(1));
const signalRInitializedRef = useRef(false);
const changesHubInitializedRef = useRef(false);
const changesHubConnectedRef = useRef(false);
const handleSignalRData = useCallback(async (data: any) => {
await semaphore.current.acquire();
try {
const updatedData = { ...data }; // Clone the data received
if (updatedData.Latitude && updatedData.Longitude && !updatedData.address) {
try {
const address = await ReverseGeocode(updatedData.Latitude, updatedData.Longitude);
updatedData.address = address; // Attach the reverse geocoded address to the patrol data
} catch (error) {
log.error('Error in reverse geocoding:', error);
updatedData.address = 'Address not available'; // Fallback if geocoding fails
}
}
setUpdatedPatrols(prevPatrols => {
const newPatrols = new Map(prevPatrols);
const patrolId = updatedData.GpsId || updatedData.DeviceId;
if (patrolId) {
const existingPatrol = newPatrols.get(patrolId) || {
GpsId: patrolId,
latitude: updatedData.Latitude || 0,
longitude: updatedData.Longitude || 0,
speed: 0,
gps_date: new Date().toISOString(),
address: '', // Set default address
};
const updatedPatrol = {
...existingPatrol,
...updatedData,
// Only update the address if the new one is different from the old one
address: updatedData.address !== existingPatrol.address ? updatedData.address : existingPatrol.address,
};
newPatrols.set(patrolId, updatedPatrol); // Update patrol data in the Map
}
return newPatrols; // Return the updated Map to update the global state
});
// If the selected patrol is being tracked, update its details as well
if (selectedPatrolRef.current) {
const updatedSelectedPatrol = Array.isArray(updatedData)
? updatedData.find(p => p.DeviceId === selectedPatrolRef.current?.GpsId)
: updatedData.DeviceId === selectedPatrolRef.current.GpsId ? updatedData : null;
if (updatedSelectedPatrol) {
setSelectedPatrol(prev => {
if (!prev) return prev;
return {
...prev,
...updatedSelectedPatrol,
GpsId: prev.GpsId, // Ensure GpsId remains unchanged
};
});
// log.info('Selected patrol updated:', updatedSelectedPatrol);
}
}
} finally {
semaphore.current.release();
}
}, [getUpdatedPatrol, selectedPatrolRef, setUpdatedPatrols, setSelectedPatrol]);
const trackDevicesWithRetry = useCallback(async (retryCount = 0) => {
const deviceIds = patrols.map(patrol => patrol.GpsId).filter(Boolean);
log.info(deviceIds.length);
if (deviceIds.length > 0) {
await signalrConnection.trackDevices(deviceIds);
log.info('Devices tracked successfully:', deviceIds);
} else if (retryCount < 5) {
log.warn('No patrols available to track, retrying...');
setTimeout(() => trackDevicesWithRetry(retryCount + 1), 500);
} else {
log.error('Failed to track devices after 5 retries.');
}
}, [patrols, signalrConnection]);
const handleChangesHubData = useCallback(async (data: any) => {
await semaphore.current.acquire();
try {
log.info('ChangesHub data received:', data);
const patrolId = data.patrolId || data.GpsId;
const response = await fetch(`${process.env.REACT_APP_API_URL}/api/v1/patrols/getPatrolById/${patrolId}`);
const patrolData = await response.json();
if (response.ok && patrolData) {
log.info(`Patrol ${patrolId} found, updating with real-time data...`);
const updatedPatrol = { ...patrolData, ...data };
setUpdatedPatrols(prevPatrols => {
return updatePatrolData(updatedPatrol, getUpdatedPatrol, prevPatrols);
});
if (selectedPatrolRef.current?.GpsId === patrolId) {
setSelectedPatrol(prev => {
if (!prev) return prev;
return {
...prev,
...updatedPatrol,
GpsId: prev.GpsId,
};
});
log.info('Selected patrol updated from ChangeHub:', updatedPatrol);
}
} else {
log.info(`Patrol ${patrolId} not found in backend, creating using real-time data...`);
const newPatrol: Patrol = {
GpsId: patrolId,
name: data.name || 'Unknown Patrol',
latitude: data.latitude || 0,
longitude: data.longitude || 0,
gps_date: new Date().toISOString(),
statusId: data.statusId || 1,
statusName: data.statusName || 'Unknown',
statusPatrol: data.statusPatrol || null,
address: data.address || 'Unknown Address',
patrolType: data.patrolType || 'Unknown Type',
icon: data.icon || 'default-icon.png',
speed: data.speed || 0,
folio: data.folio || null,
reactionStatus: data.reactionStatus || null,
customer: data.customer || null,
serviceAddress: data.serviceAddress || null,
transportLine: data.transportLine || null,
plates: data.plates || null,
comments: data.comments || null,
battery: data.battery || null,
kmOdometer: data.kmOdometer || null,
degrees: data.degrees || null,
altitude: data.altitude || null,
ambientLightValue: data.ambientLightValue || null,
satellite: data.satellite || null,
signalValid: data.signalValid || false,
historyData: data.historyData || null,
};
setUpdatedPatrols(prevPatrols => {
return updatePatrolData(newPatrol, getUpdatedPatrol, prevPatrols);
});
}
} catch (error) {
log.error(`Error processing ChangeHub data for patrol ${data.patrolId || data.GpsId}:`, error);
} finally {
semaphore.current.release();
}
}, [selectedPatrolRef, setSelectedPatrol, getUpdatedPatrol, setUpdatedPatrols]);
const initializeSignalR = useCallback(async () => {
if (signalRInitializedRef.current || loading) return;
signalRInitializedRef.current = true;
signalrConnection.setUpdatePatrolsCallback(updatePatrols);
try {
await signalrConnection.connect({
url: process.env.REACT_APP_SIGNALR_URL || 'http://localhost:5000/signalr',
hub: 'trackingHub',
qs: { username: '*********' },
listenToMethods: ['trackingReceived'],
});
signalrConnection.subscribe('trackingReceived', handleSignalRData);
log.info('SignalR tracking connected and patrols subscribed');
const deviceIds = patrols.map(patrol => patrol.GpsId).filter(Boolean);
if (deviceIds.length > 0) {
await signalrConnection.trackDevices(deviceIds);
log.info('Devices tracked successfully:', deviceIds);
} else {
log.warn('No devices to track after successful SignalR connection');
throw new Error('No devices to track after successful SignalR connection');
}
} catch (error) {
log.error('Error initializing SignalR tracking:', error);
signalRInitializedRef.current = false;
handleRefreshClick();
}
}, [handleSignalRData, patrols, signalrConnection, handleRefreshClick, loading, updatePatrols]);
const initializeChangesHub = useCallback(async (retryCount = 0) => {
if (changesHubConnectedRef.current) {
// log.info('ChangesHub already connected, skipping initialization');
return;
}
log.info('Connecting to ChangesHub');
try {
await signalRChangesService.connect({
url: process.env.REACT_APP_SIGNALR_URL || 'http://localhost:5000/signalr',
hub: 'changesHub',
qs: { username: '*********' },
listenToMethods: ['patrolReceived'],
});
changesHubConnectedRef.current = true;
log.info('ChangesHub connected successfully');
} catch (error) {
log.error('Error initializing ChangesHub:', error);
if (retryCount < 5) {
setTimeout(() => initializeChangesHub(retryCount + 1), 5000);
} else {
log.error('Failed to connect to ChangesHub after 5 attempts');
}
}
}, []);
const handleMaxReconnectAttemptsReached = useCallback(() => {
log.warn('Max reconnect attempts reached for ChangesHub. Attempting to reinitialize...');
changesHubInitializedRef.current = false;
initializeChangesHub();
}, [initializeChangesHub]);
useEffect(() => {
signalRChangesService.setUpdatePatrolsCallback(updatePatrols);
initializeSignalR();
initializeChangesHub();
}, [initializeSignalR, initializeChangesHub, handleSignalRData, handleChangesHubData, updatePatrols]);
return null;
};
export default React.memo(SignalRHandler);
If I am missing any files or you would like to see something that I failed to provide, please let me know and I will be glad to provide it in an update to this question. Thank you.
Turns out the solutions was to ensure the updatePatrol was emmited correctly. Here is the update method:
const updatePatrols = useCallback(async (data: any): Promise<void> => {
const patrolData = data.patrolData || data;
const patrolId = patrolData.GpsId || patrolData.DeviceId || patrolData.gpsId || patrolData.deviceId;
if (!patrolId) {
log.error('No valid patrol ID found in data:', JSON.stringify(data, null, 2));
return;
}
const latitude = patrolData.Latitude || patrolData.latitude;
const longitude = patrolData.Longitude || patrolData.longitude;
// Perform reverse geocoding before updating patrol data to avoid flickering
let newAddress = '';
if (latitude && longitude) {
try {
newAddress = await ReverseGeocode(latitude, longitude);
} catch (error) {
log.error('Error in reverse geocoding:', error);
newAddress = 'Address not available';
}
}
setUpdatedPatrols(prevPatrols => {
const newPatrols = new Map(prevPatrols);
const existingPatrol = newPatrols.get(patrolId) || patrols.find(p => p.GpsId === patrolId);
if (existingPatrol) {
// Update patrol data and ensure all required properties are provided
const updatedPatrol: Patrol = {
...existingPatrol,
GpsId: patrolId,
latitude: patrolData.Latitude || existingPatrol.latitude,
longitude: patrolData.Longitude || existingPatrol.longitude,
speed: patrolData.Speed || existingPatrol.speed,
gps_date: patrolData.GpsDate || new Date().toISOString(),
battery: patrolData.Battery || existingPatrol.battery,
satellite: patrolData.Satellite || existingPatrol.satellite,
degrees: patrolData.Degrees || existingPatrol.degrees,
address: newAddress || existingPatrol.address,
comments: patrolData.comments || existingPatrol.comments,
name: patrolData.name || existingPatrol.name || 'Unknown Patrol',
statusId: patrolData.statusId || existingPatrol.statusId || 1,
statusName: patrolData.statusName || existingPatrol.statusName || 'Unknown Status',
patrolType: patrolData.patrolType || existingPatrol.patrolType || 'Unknown Type',
icon: patrolData.icon || existingPatrol.icon || 'default-icon.png',
statusPatrol: patrolData.statusPatrol || existingPatrol.statusPatrol || 'Unknown', // Ensure statusPatrol is provided
};
newPatrols.set(patrolId, updatedPatrol);
} else {
// Create a new patrol object with all required fields
const newPatrol: Patrol = {
GpsId: patrolId,
latitude: patrolData.Latitude || 0,
longitude: patrolData.Longitude || 0,
speed: patrolData.Speed || 0,
gps_date: new Date().toISOString(),
battery: patrolData.Battery || null,
satellite: patrolData.Satellite || null,
degrees: patrolData.Degrees || null,
address: newAddress || 'Unknown Address',
comments: patrolData.comments || 'No comments',
name: patrolData.name || 'Unknown Patrol',
statusId: patrolData.statusId || 1,
statusName: patrolData.statusName || 'Unknown Status',
patrolType: patrolData.patrolType || 'Unknown Type',
icon: patrolData.icon || 'default-icon.png',
statusPatrol: patrolData.statusPatrol || 'Unknown', // Provide default for statusPatrol
};
newPatrols.set(patrolId, newPatrol);
}
return newPatrols; // Return the updated Map
});
}, [patrols, setUpdatedPatrols]);
Once in place I was able to not only receive message but also see them update the ui in realtime.