Initial Commit

frontend/src/core/hooks/useDataSync.ts

@@ -0,0 +1,44 @@
+/**
+ * @ai-summary React hook for data synchronization management
+ */
+
+import { useEffect, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { DataSyncManager } from '../sync/data-sync';
+import { useNavigationStore } from '../store/navigation';
+
+export const useDataSync = () => {
+  const queryClient = useQueryClient();
+  const syncManagerRef = useRef<DataSyncManager | null>(null);
+  const navigationStore = useNavigationStore();
+
+  useEffect(() => {
+    // Initialize data sync manager
+    syncManagerRef.current = new DataSyncManager(queryClient, {
+      enableCrossTabs: true,
+      enableOptimisticUpdates: true,
+      enableBackgroundSync: true,
+      syncInterval: 30000,
+    });
+
+    return () => {
+      syncManagerRef.current?.cleanup();
+    };
+  }, [queryClient]);
+
+  // Listen for navigation changes and trigger prefetching
+  useEffect(() => {
+    if (syncManagerRef.current) {
+      syncManagerRef.current.prefetchForNavigation(navigationStore.activeScreen);
+    }
+  }, [navigationStore.activeScreen]);
+
+  return {
+    optimisticVehicleUpdate: (vehicleId: string, updates: any) => {
+      syncManagerRef.current?.optimisticVehicleUpdate(vehicleId, updates);
+    },
+    prefetchForNavigation: (screen: string) => {
+      syncManagerRef.current?.prefetchForNavigation(screen);
+    },
+  };
+};