Debugging

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

@@ -2,6 +2,7 @@
  * @ai-summary React hooks for vehicles feature
  */
 
+import React from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useAuth0 } from '@auth0/auth0-react';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -22,7 +23,7 @@ export const useVehicles = () => {
 
   console.log('[useVehicles] Hook called - isAuthenticated:', isAuthenticated, 'isLoading:', isLoading);
 
-  return useQuery({
+  const query = useQuery({
     queryKey: ['vehicles'],
     queryFn: () => {
       console.log('[useVehicles] Query function called - fetching vehicles');
@@ -42,13 +43,19 @@ export const useVehicles = () => {
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
     refetchOnWindowFocus: false, // Prevent refetch on window focus
     refetchOnMount: false, // Only fetch on mount if data is stale
-    onSuccess: (data) => {
-      console.log('[useVehicles] Query success - vehicles loaded:', data?.length);
-    },
-    onError: (error) => {
-      console.log('[useVehicles] Query error:', error);
-    },
   });
+
+  // Handle success/error with useEffect instead of deprecated callbacks
+  React.useEffect(() => {
+    if (query.data) {
+      console.log('[useVehicles] Query success - vehicles loaded:', Array.isArray(query.data) ? query.data.length : 0);
+    }
+    if (query.error) {
+      console.log('[useVehicles] Query error:', query.error);
+    }
+  }, [query.data, query.error]);
+
+  return query;
 };
 
 export const useVehicle = (id: string) => {

frontend/src/features/vehicles/mobile/VehiclesMobileScreen.tsx

@@ -45,7 +45,7 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
   const {
     optimisticVehicles,
     isPending: isOptimisticPending
-  } = useOptimisticVehicles(vehicles || []);
+  } = useOptimisticVehicles(Array.isArray(vehicles) ? vehicles : []);
   
   // Enhanced search with transitions
   const {

frontend/src/features/vehicles/pages/VehiclesPage.tsx

@@ -29,7 +29,7 @@ export const VehiclesPage: React.FC = () => {
     isPending: isOptimisticPending, 
     optimisticCreateVehicle, 
     optimisticDeleteVehicle 
-  } = useOptimisticVehicles(vehicles || []);
+  } = useOptimisticVehicles(Array.isArray(vehicles) ? vehicles : []);
   
   const { 
     searchQuery, 
@@ -110,7 +110,7 @@ export const VehiclesPage: React.FC = () => {
         </Box>
 
         {/* Search functionality */}
-        {vehicles && vehicles.length > 0 && (
+        {vehicles && Array.isArray(vehicles) && vehicles.length > 0 && (
           <Box sx={{ mb: 3 }}>
             <TextField
               fullWidth