Debugging

frontend/src/features/fuel-logs/components/FuelLogForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import React, { useEffect, useMemo, useState, useRef, memo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -30,7 +30,7 @@ const schema = z.object({
   message: 'Cannot specify both odometer reading and trip distance'
 });
 
-export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<CreateFuelLogRequest> }> = ({ onSuccess, initial }) => {
+const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial<CreateFuelLogRequest> }> = ({ onSuccess, initial }) => {
   const { userSettings } = useUserSettings();
   const { createFuelLog, isLoading } = useFuelLogs();
   const [useOdometer, setUseOdometer] = useState(false);
@@ -46,13 +46,23 @@ export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<C
     } as any
   });
 
+  // DEBUG: Log component renders and form state
+  console.log('[FuelLogForm] Render - formInitialized:', formInitialized.current, 'isLoading:', isLoading);
+
   // Prevent form reset after initial load
   useEffect(() => {
     if (!formInitialized.current) {
       formInitialized.current = true;
+      console.log('[FuelLogForm] Form initialized');
     }
   }, []);
 
+  // DEBUG: Watch for form value changes
+  const vehicleId = watch('vehicleId');
+  useEffect(() => {
+    console.log('[FuelLogForm] Vehicle ID changed:', vehicleId);
+  }, [vehicleId]);
+
   const watched = watch(['fuelUnits', 'costPerUnit']);
   const [fuelUnitsRaw, costPerUnitRaw] = watched as [string | number | undefined, string | number | undefined];
 
@@ -167,3 +177,5 @@ export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<C
   );
 };
 
+export const FuelLogForm = memo(FuelLogFormComponent);
+

frontend/src/features/fuel-logs/components/VehicleSelector.tsx

@@ -15,6 +15,9 @@ interface Props {
 const VehicleSelectorComponent: React.FC<Props> = ({ value, onChange, error, required, disabled }) => {
   const { data: vehicles, isLoading } = useVehicles();
 
+  // DEBUG: Log vehicle selector renders and data changes
+  console.log('[VehicleSelector] Render - value:', value, 'vehicles count:', vehicles?.length, 'isLoading:', isLoading);
+
   if (!isLoading && (vehicles?.length || 0) === 0) {
     return (
       <Box p={2} borderRadius={1} bgcolor={'background.default'}>

frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx

@@ -15,15 +15,19 @@ export const FuelLogsPage: React.FC = () => {
   const queryClient = useQueryClient();
   const [editingLog, setEditingLog] = useState<FuelLogResponse | null>(null);
 
+  // DEBUG: Log page renders
+  console.log('[FuelLogsPage] Render - fuel logs count:', fuelLogs?.length, 'isLoading:', isLoading, 'error:', !!error);
+
   const handleEdit = (log: FuelLogResponse) => {
     setEditingLog(log);
   };
 
   const handleDelete = async (_logId: string) => {
     try {
-      // Invalidate queries to refresh the data
+      console.log('[FuelLogsPage] handleDelete called - using targeted query updates');
-      queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
+      // Use targeted invalidation instead of broad invalidation
-      queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] });
+      // This prevents unnecessary re-renders of the form
+      queryClient.refetchQueries({ queryKey: ['fuelLogs', 'all'] });
     } catch (error) {
       console.error('Failed to refresh fuel logs after delete:', error);
     }
@@ -31,10 +35,11 @@ export const FuelLogsPage: React.FC = () => {
 
   const handleSaveEdit = async (id: string, data: UpdateFuelLogRequest) => {
     try {
+      console.log('[FuelLogsPage] handleSaveEdit called - using targeted query updates');
       await fuelLogsApi.update(id, data);
-      // Invalidate queries to refresh the data
+      // Use targeted refetch instead of broad invalidation
-      queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
+      // This prevents unnecessary re-renders of the form
-      queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] });
+      queryClient.refetchQueries({ queryKey: ['fuelLogs', 'all'] });
       setEditingLog(null);
     } catch (error) {
       console.error('Failed to update fuel log:', error);

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

@@ -19,9 +19,15 @@ interface ApiError {
 
 export const useVehicles = () => {
   const { isAuthenticated, isLoading } = useAuth0();
+
+  console.log('[useVehicles] Hook called - isAuthenticated:', isAuthenticated, 'isLoading:', isLoading);
+
   return useQuery({
     queryKey: ['vehicles'],
-    queryFn: vehiclesApi.getAll,
+    queryFn: () => {
+      console.log('[useVehicles] Query function called - fetching vehicles');
+      return vehiclesApi.getAll();
+    },
     enabled: isAuthenticated && !isLoading,
     staleTime: 5 * 60 * 1000, // 5 minutes - prevent unnecessary refetches
     gcTime: 10 * 60 * 1000, // 10 minutes cache time
@@ -36,6 +42,12 @@ 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);
+    },
   });
 };