From d4befe31d137c979ef3ad7c707fd5831d717d017 Mon Sep 17 00:00:00 2001 From: Eric gullickson Date: Mon, 22 Sep 2025 20:49:44 -0500 Subject: [PATCH] Debugging --- .../fuel-logs/components/FuelLogForm.tsx | 16 ++++++++++++++-- .../fuel-logs/components/VehicleSelector.tsx | 3 +++ .../features/fuel-logs/pages/FuelLogsPage.tsx | 17 +++++++++++------ .../src/features/vehicles/hooks/useVehicles.ts | 14 +++++++++++++- 4 files changed, 41 insertions(+), 9 deletions(-) diff --git a/frontend/src/features/fuel-logs/components/FuelLogForm.tsx b/frontend/src/features/fuel-logs/components/FuelLogForm.tsx index 2986c67..f906b9d 100644 --- a/frontend/src/features/fuel-logs/components/FuelLogForm.tsx +++ b/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 }> = ({ onSuccess, initial }) => { +const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial }> = ({ 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 { 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 = ({ 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 ( diff --git a/frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx b/frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx index d6ba691..2cfb014 100644 --- a/frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx +++ b/frontend/src/features/fuel-logs/pages/FuelLogsPage.tsx @@ -15,15 +15,19 @@ export const FuelLogsPage: React.FC = () => { const queryClient = useQueryClient(); const [editingLog, setEditingLog] = useState(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 - queryClient.invalidateQueries({ queryKey: ['fuelLogs'] }); - queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] }); + console.log('[FuelLogsPage] handleDelete called - using targeted query updates'); + // Use targeted invalidation instead of broad invalidation + // 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 - queryClient.invalidateQueries({ queryKey: ['fuelLogs'] }); - queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] }); + // Use targeted refetch instead of broad invalidation + // This prevents unnecessary re-renders of the form + queryClient.refetchQueries({ queryKey: ['fuelLogs', 'all'] }); setEditingLog(null); } catch (error) { console.error('Failed to update fuel log:', error); diff --git a/frontend/src/features/vehicles/hooks/useVehicles.ts b/frontend/src/features/vehicles/hooks/useVehicles.ts index deebd5b..54c8d09 100644 --- a/frontend/src/features/vehicles/hooks/useVehicles.ts +++ b/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); + }, }); };