RD-T39 Working on personnel actions and getting calls working.

Author: ucswift

.github/copilot-instructions.md

@@ -35,6 +35,14 @@ UI and Styling:
 - Ensure responsive design by considering different screen sizes and orientations.
 - Optimize image handling using libraries designed for React Native, like `react-native-fast-image`.
 
+Web Platform Compatibility (React Native Web):
+
+- When combining styles (e.g., `[styles.base, { color: dynamicColor }]`), always use `StyleSheet.flatten()` to merge them into a single object. Passing style arrays directly causes "Failed to set an indexed property on CSSStyleDeclaration" errors on web.
+- For components that need dynamic styles, use: `style={StyleSheet.flatten([styles.myStyle, { color: dynamicValue }])}`
+- Do not pass `style` props directly to lucide-react-native icons. Wrap icons in a `View` and apply styles to the wrapper instead.
+- Avoid using the `gap` property in StyleSheet styles as it has inconsistent support on web. Use `marginLeft`, `marginRight`, `marginTop`, or `marginBottom` on child elements instead.
+- When creating custom components that will render on web, prefer using React Native's core `Text` and `View` components (imported from 'react-native') over gluestack-ui wrappers for better style handling compatibility.
+
 Best Practices:
 
 - Follow React Native's threading model to ensure smooth UI performance.

docs/signalr-web-platform-refactoring.md

@@ -0,0 +1,170 @@
+# SignalR Web Platform Refactoring
+
+## Summary
+
+This refactoring addresses multiple issues with the SignalR infrastructure to ensure correct operation on the web platform while preventing memory leaks, threading issues, and connection starvation.
+
+## Issues Addressed
+
+### 1. Memory Leaks
+
+**Problem:** Event listeners were registered via `signalRService.on()` in the SignalR store but never removed with `signalRService.off()` on disconnect. This caused:
+- Accumulation of duplicate event handlers on reconnection
+- Memory growth over time
+- Multiple callbacks firing for single events
+
+**Solution:**
+- Added `EventHandlers` interface to track registered handlers in `signalr-store.ts`
+- Created `unregisterUpdateHubHandlers()` function for proper cleanup
+- Handlers are now stored as named references that can be properly unregistered
+- Cleanup happens automatically on disconnect
+
+### 2. Reconnection Timeout Leaks
+
+**Problem:** `setTimeout` IDs for reconnection attempts were not tracked, making them impossible to cancel properly. This caused:
+- Multiple concurrent reconnection attempts
+- Resource waste when intentionally disconnecting
+- Orphaned timers continuing to fire after connection was established
+
+**Solution:**
+- Added `reconnectTimeouts` Map to track timeout IDs per hub
+- Added `cancelPendingReconnect()` and `cancelAllPendingReconnects()` methods
+- Timeouts are cancelled on:
+  - Successful connection
+  - Explicit disconnect
+  - Service reset
+  - Page visibility change (web)
+
+### 3. Web Platform Visibility Handling
+
+**Problem:** Reconnection timers would fire even when the browser tab was backgrounded, wasting resources and potentially causing issues with backgrounded tabs.
+
+**Solution:**
+- Added visibility change event listener using `document.visibilityState`
+- Reconnection attempts are skipped when page is not visible
+- On visibility resume, connections are checked and reconnected if needed
+- Reconnect attempts counter is reset on visibility resume for fresh attempts
+- Proper cleanup of visibility listener on service destruction
+
+### 4. Connection Cancellation
+
+**Problem:** No way to cancel pending connection attempts, leading to:
+- Stuck connection states
+- Multiple overlapping connection attempts
+- Difficulty in clean disconnect
+
+**Solution:**
+- Added `AbortController` for each connection attempt
+- Previous pending connections are cancelled when new connection is initiated
+- Cancellation is handled gracefully without error logging
+- Pending connections are cancelled on explicit disconnect
+
+### 5. Exponential Backoff for Reconnection
+
+**Problem:** Fixed reconnection interval could overwhelm servers during outages.
+
+**Solution:**
+- Implemented exponential backoff with `RECONNECT_BACKOFF_MULTIPLIER = 1.5`
+- Maximum delay capped at 30 seconds
+- Provides better server load distribution during issues
+
+### 6. Hub Method Handler Cleanup
+
+**Problem:** Method handlers registered on the SignalR connection were not being tracked or cleaned up, leading to duplicate handlers.
+
+**Solution:**
+- Added `hubMethodHandlers` Map to track handlers per hub
+- Created `cleanupHubMethodHandlers()` method for proper cleanup
+- Handlers are unregistered on:
+  - Connection disconnect
+  - Reconnection (before new registration)
+  - Service reset
+
+## Code Changes
+
+### `src/services/signalr.service.ts`
+
+1. **New Properties:**
+   ```typescript
+   private reconnectTimeouts: Map<string, ReturnType<typeof setTimeout>> = new Map();
+   private hubMethodHandlers: Map<string, HubMethodHandler[]> = new Map();
+   private isPageVisible: boolean = true;
+   private visibilityChangeHandler: (() => void) | null = null;
+   private pendingConnections: Map<string, AbortController> = new Map();
+   private readonly RECONNECT_BACKOFF_MULTIPLIER = 1.5;
+   ```
+
+2. **New Methods:**
+   - `setupVisibilityHandling()` - Sets up web visibility change listener
+   - `cleanupVisibilityHandling()` - Removes visibility listener
+   - `cancelAllPendingReconnects()` - Cancels all pending reconnection timeouts
+   - `cancelPendingReconnect(hubName)` - Cancels specific hub reconnection timeout
+   - `checkAndReconnectOnVisibilityResume()` - Reconnects disconnected hubs when tab becomes visible
+   - `cleanupHubMethodHandlers(hubName, connection)` - Removes registered method handlers
+   - `offAll(event)` - Removes all listeners for a specific event
+   - `removeAllListeners()` - Removes all event listeners
+   - `getEventListenerCount(event)` - Debug utility to count listeners
+   - `getTotalEventListenerCount()` - Debug utility for total listener count
+   - `isVisible()` - Returns current page visibility state
+
+3. **Modified Methods:**
+   - `_connectToHubWithEventingUrlInternal()` - Added AbortController, method handler tracking
+   - `_connectToHubInternal()` - Added AbortController, method handler tracking
+   - `handleConnectionClose()` - Added timeout tracking, backoff delay, visibility check
+   - `disconnectFromHub()` - Added cleanup for timeouts and pending connections
+   - `resetInstance()` - Added comprehensive cleanup
+   - `disconnectAll()` - Added cleanup for pending operations
+
+### `src/stores/signalr/signalr-store.ts`
+
+1. **New Module-Level Code:**
+   ```typescript
+   interface EventHandlers {
+     personnelStatusUpdated: ((data: unknown) => void) | null;
+     // ... other handlers
+   }
+
+   let updateHubHandlers: EventHandlers = { /* ... */ };
+
+   function unregisterUpdateHubHandlers(): void { /* ... */ }
+   ```
+
+2. **Modified `connectUpdateHub`:**
+   - Calls `unregisterUpdateHubHandlers()` before registering new handlers
+   - Stores handler references for later cleanup
+   - Logs listener count for debugging
+
+3. **Modified `disconnectUpdateHub`:**
+   - Calls `unregisterUpdateHubHandlers()` before disconnecting
+   - Logs remaining listener count for debugging
+
+## Testing
+
+All existing tests continue to pass:
+- `src/services/__tests__/signalr.service.test.ts` - Core service tests
+- `src/services/__tests__/signalr.service.reconnect-fix.test.ts` - Reconnection tests
+- `src/stores/signalr/__tests__/signalr-store.test.ts` - Store tests
+
+## Migration Notes
+
+- No breaking changes to the public API
+- Existing code using `signalRService.on()` should continue to work
+- For best practices, use the new `getTotalEventListenerCount()` method to monitor for leaks during development
+- The visibility handling is automatic on web platform
+
+## Debugging Memory Leaks
+
+If you suspect memory leaks, you can check listener counts:
+
+```typescript
+// Check total listeners
+console.log('Total listeners:', signalRService.getTotalEventListenerCount());
+
+// Check specific event listeners
+console.log('callsUpdated listeners:', signalRService.getEventListenerCount('callsUpdated'));
+```
+
+Expected values:
+- After connect: 7 listeners (one per event type)
+- After disconnect: 0 listeners
+- Multiple connect/disconnect cycles should maintain these numbers

env.js

@@ -94,6 +94,7 @@ const client = z.object({
   COUNTLY_APP_KEY: z.string(),
   COUNTLY_SERVER_URL: z.string(),
   MAINTENANCE_MODE: z.boolean(),
+  INACTIVITY_TIMEOUT_MINUTES: z.number(),
 });
 
 const buildTime = z.object({
@@ -129,6 +130,7 @@ const _clientEnv = {
   COUNTLY_APP_KEY: process.env.DISPATCH_COUNTLY_APP_KEY || '',
   COUNTLY_SERVER_URL: process.env.DISPATCH_COUNTLY_SERVER_URL || '',
   MAINTENANCE_MODE: process.env.DISPATCH_MAINTENANCE_MODE === 'true' || false,
+  INACTIVITY_TIMEOUT_MINUTES: parseInt(process.env.DISPATCH_INACTIVITY_TIMEOUT_MINUTES || '60', 10),
 };
 
 /**

src/api/calls/calls.ts

@@ -13,7 +13,8 @@ const updateCallApi = createApiEndpoint('/Calls/UpdateCall');
 const closeCallApi = createApiEndpoint('/Calls/CloseCall');
 
 export const getCalls = async () => {
-  const response = await callsApi.get<ActiveCallsResult>();
+  // Add timestamp to prevent any caching
+  const response = await callsApi.get<ActiveCallsResult>({ _t: Date.now() });
   return response.data;
 };
 

src/api/personnel/personnelStaffing.ts

@@ -0,0 +1,19 @@
+import { type SavePersonsStaffingsResult } from '@/models/v4/personnelStaffing/savePersonsStaffingsResult';
+
+import { createApiEndpoint } from '../common/client';
+
+interface SavePersonsStaffingsInput {
+  UserIds: string[];
+  Type: string;
+  TimestampUtc: string;
+  Timestamp: string;
+  Note: string;
+  EventId: string;
+}
+
+const savePersonsStaffingsApi = createApiEndpoint('/PersonnelStaffing/SavePersonsStaffings');
+
+export const savePersonsStaffings = async (input: SavePersonsStaffingsInput) => {
+  const response = await savePersonsStaffingsApi.post<SavePersonsStaffingsResult>(input);
+  return response.data;
+};

src/api/personnel/personnelStatuses.ts

@@ -0,0 +1,27 @@
+import { type SavePersonsStatusesResult } from '@/models/v4/personnelStatuses/savePersonsStatusesResult';
+
+import { createApiEndpoint } from '../common/client';
+
+interface SavePersonsStatusesInput {
+  UserIds: string[];
+  Type: string;
+  RespondingTo: string;
+  TimestampUtc: string;
+  Timestamp: string;
+  Note: string;
+  Latitude: string;
+  Longitude: string;
+  Accuracy: string;
+  Altitude: string;
+  AltitudeAccuracy: string;
+  Speed: string;
+  Heading: string;
+  EventId: string;
+}
+
+const savePersonsStatusesApi = createApiEndpoint('/PersonnelStatuses/SavePersonsStatuses');
+
+export const savePersonsStatuses = async (input: SavePersonsStatusesInput) => {
+  const response = await savePersonsStatusesApi.post<SavePersonsStatusesResult>(input);
+  return response.data;
+};