Mobile Bug Fixes

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -34,6 +34,7 @@ export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<C
   const { userSettings } = useUserSettings();
   const { createFuelLog, isLoading } = useFuelLogs();
   const [useOdometer, setUseOdometer] = useState(false);
+  const formInitialized = useRef(false);
 
   const { control, handleSubmit, watch, setValue, formState: { errors, isValid } } = useForm<CreateFuelLogRequest>({
     resolver: zodResolver(schema),
@@ -45,6 +46,13 @@ export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<C
     } as any
   });
 
+  // Prevent form reset after initial load
+  useEffect(() => {
+    if (!formInitialized.current) {
+      formInitialized.current = true;
+    }
+  }, []);
+
   const watched = watch(['fuelUnits', 'costPerUnit']);
   const [fuelUnitsRaw, costPerUnitRaw] = watched as [string | number | undefined, string | number | undefined];
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { FormControl, InputLabel, Select, MenuItem, FormHelperText, Box, Typography } from '@mui/material';
 import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
 import { useVehicles } from '../../vehicles/hooks/useVehicles';
@@ -12,7 +12,7 @@ interface Props {
   disabled?: boolean;
 }
 
-export const VehicleSelector: React.FC<Props> = ({ value, onChange, error, required, disabled }) => {
+const VehicleSelectorComponent: React.FC<Props> = ({ value, onChange, error, required, disabled }) => {
   const { data: vehicles, isLoading } = useVehicles();
 
   if (!isLoading && (vehicles?.length || 0) === 0) {
@@ -42,3 +42,5 @@ export const VehicleSelector: React.FC<Props> = ({ value, onChange, error, requi
     </FormControl>
   );
 };
+
+export const VehicleSelector = memo(VehicleSelectorComponent);

frontend/src/features/fuel-logs/hooks/useFuelLogs.tsx

@@ -11,6 +11,8 @@ export const useFuelLogs = (vehicleId?: string) => {
     queryKey: ['fuelLogs', vehicleId || 'all'],
     queryFn: () => (vehicleId ? fuelLogsApi.getFuelLogsByVehicle(vehicleId) : fuelLogsApi.getUserFuelLogs()),
     enabled: isAuthenticated && !isLoading,
+    staleTime: 2 * 60 * 1000, // 2 minutes - fuel logs can be more fresh
+    gcTime: 5 * 60 * 1000, // 5 minutes cache time
     retry: (failureCount, error: any) => {
       // Retry 401 errors up to 3 times for mobile auth timing issues
       if (error?.response?.status === 401 && failureCount < 3) {
@@ -20,6 +22,8 @@ export const useFuelLogs = (vehicleId?: string) => {
       return false;
     },
     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
   });
 
   const statsQuery = useQuery<EnhancedFuelStats>({