Updated frameworks.

frontend/src/core/auth/Auth0Provider.tsx

@@ -44,9 +44,11 @@ const TokenInjector: React.FC<{ children: React.ReactNode }> = ({ children }) =>
   const { getAccessTokenSilently, isAuthenticated } = useAuth0();
 
   React.useEffect(() => {
+    let interceptorId: number | undefined;
+
     if (isAuthenticated) {
       // Add token to all API requests
-      apiClient.interceptors.request.use(async (config) => {
+      interceptorId = apiClient.interceptors.request.use(async (config) => {
         try {
           const token = await getAccessTokenSilently();
           config.headers.Authorization = `Bearer ${token}`;
@@ -56,6 +58,13 @@ const TokenInjector: React.FC<{ children: React.ReactNode }> = ({ children }) =>
         return config;
       });
     }
+
+    // Cleanup function to remove interceptor
+    return () => {
+      if (interceptorId !== undefined) {
+        apiClient.interceptors.request.eject(interceptorId);
+      }
+    };
   }, [isAuthenticated, getAccessTokenSilently]);
 
   return <>{children}</>;

frontend/src/features/vehicles/hooks/useOptimisticVehicles.ts

@@ -1,9 +1,9 @@
 /**
- * @ai-summary React 19 useOptimistic hook for vehicle operations
- * @ai-context Provides optimistic updates for better perceived performance
+ * @ai-summary React 18 compatible optimistic updates hook for vehicle operations
+ * @ai-context Provides optimistic updates for better perceived performance using useState and useTransition
  */
 
-import { useOptimistic, useTransition } from 'react';
+import { useState, useTransition, useEffect } from 'react';
 import { Vehicle, CreateVehicleRequest } from '../types/vehicles.types';
 import { useQueryClient } from '@tanstack/react-query';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -30,13 +30,20 @@ function vehicleReducer(state: Vehicle[], action: VehicleAction): Vehicle[] {
 }
 
 export function useOptimisticVehicles(vehicles: Vehicle[] = []) {
-  const [optimisticVehicles, addOptimistic] = useOptimistic(
-    vehicles,
-    vehicleReducer
-  );
+  const [optimisticVehicles, setOptimisticVehicles] = useState<Vehicle[]>(vehicles);
   const [isPending, startTransition] = useTransition();
   const queryClient = useQueryClient();
 
+  // React 18 compatible optimistic update function
+  const addOptimistic = (action: VehicleAction) => {
+    setOptimisticVehicles(currentVehicles => vehicleReducer(currentVehicles, action));
+  };
+
+  // Sync optimistic state with actual vehicles when they change
+  useEffect(() => {
+    setOptimisticVehicles(vehicles);
+  }, [vehicles]);
+
   const optimisticCreateVehicle = async (data: CreateVehicleRequest) => {
     // Create optimistic vehicle with temporary ID
     const optimisticVehicle: Vehicle = {