The loading=async parameter requires a callback to notify when the API
is ready. Without a callback, google.maps is not properly initialized.
Use a global callback function with a timestamp suffix to handle the
async initialization properly, ensuring google.maps.Map constructor
is available when the component tries to initialize the map.
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>
Add loading=async query parameter to Google Maps API URL to prevent
synchronous DOM manipulation. This fixes the warning:
'Google Maps JavaScript API has been loaded directly without loading=async'
The loading=async parameter tells Google Maps to defer API initialization
until the script is fully loaded, preventing race conditions with React's
DOM management.
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>
The promise-based waitForAuthInit() approach wasn't reliably triggering
React state updates when setAuthInitialized(true) was called. Replace with
a polling mechanism that actively checks isAuthInitialized() every 50ms
with exponential backoff, ensuring state updates trigger properly.
This fixes the hanging "Initializing session..." issue where the auth gate
remained stuck waiting indefinitely.
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>
ROOT CAUSE: Race condition where StationsPage renders before auth
token is ready, causing DOM state mismatch.
Timeline of the bug:
1. Auth0 sets isAuthenticated=true
2. App renders StationsPage before isAuthInitialized=true
3. useSavedStations hook is disabled (enabled: false)
4. Google Maps loads and manipulates DOM
5. Auth token finally acquired, isAuthInitialized=true
6. Component re-renders with query now enabled
7. React tries to remove DOM nodes already removed by Google Maps
8. NotFoundError: removeChild fails
SOLUTION: Add isAuthGateReady check in App.tsx before rendering
protected routes. Show "Initializing session..." until auth gate is
fully initialized.
Changes:
- Import useIsAuthInitialized hook in App.tsx
- Call hook in App component
- Add guard check after isAuthenticated check
- Show loading UI if authenticated but auth gate not ready
- Add debug logs to track render flow
Now the page won't render until BOTH:
1. isAuthenticated=true (Auth0)
2. isAuthInitialized=true (our token gate)
This prevents the race condition that causes the removeChild DOM error.
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>
- Enable console logging in vite.config.ts:
- Set drop_console to false
- Disabled pure_funcs stripping for console.log
- Changed esbuild to only drop debugger, keep console
- Add debug logging to auth-gate.ts:
- Log setAuthInitialized calls
- Add debug logging to useSavedStations.ts:
- Log hook invocations
- Log query function execution and results
- Added retry configuration
- Add debug logging to StationsPage.tsx:
- Log component renders
- Log useSavedStations result state
These logs will show us what's happening with auth initialization and
query state transitions that are causing the React DOM removeChild error.
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>
- Add useIsAuthInitialized hook to auth-gate for reactive auth state
- Returns true once auth token is acquired and ready
- Waits for waitForAuthInit() promise to resolve
- Update useSavedStations hook to wait for auth before fetching
- Add 'enabled: isAuthInitialized' to useQuery config
- Prevents 401 errors from requests made before token is ready
- Fixes race condition where hook fires before interceptor is set up
The stations page was blank because useSavedStations() made an API call
with refetchOnMount:true before the auth token interceptor was added,
causing a 401 response that made the component unmount/remount, creating
a React DOM error in the error boundary.
Now the hook waits for isAuthInitialized to be true before making the
initial API call, ensuring the token interceptor is ready.
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>
- Fix: Remove double /api prefix in stations API calls
- stations.api.ts was using '/api/stations' but apiClient already prepends '/api'
- Changed API_BASE from '/api/stations' to '/stations'
- This resolves 404 errors on /api/api/stations/saved and similar endpoints
- Fix: Remove invalid access-log middleware from Traefik config
- The accessLog field is only valid in traefik.yml main config, not as a middleware
- Removed the invalid access-log middleware definition
- This resolves Traefik configuration errors during startup
These changes resolve the console errors:
- GET https://motovaultpro.com/api/vehicles 404
- GET https://motovaultpro.com/api/api/stations/saved 404
🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>
The build was failing because repository files were ignored by .gitignore:
- backend/src/features/*/data/*.repository.ts files were excluded by 'data/' pattern
- These files exist locally but were missing in CI, causing TS2307 module errors
- Controllers and services import these repositories, causing cascade failures
Changes:
- Updated .gitignore to allow TypeScript files in feature data directories
- Added fuel-logs.repository.ts, stations.repository.ts, vehicles.repository.ts
- Docker build now succeeds (tested with --no-cache)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- Standardized pool imports to use default export consistently
- Changed from named import { pool } to default import pool
- Resolves "Cannot find module" errors in CI environment
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- Add mobile-first modal design with full-screen layout and slide-up animation
- Optimize touch targets to minimum 44px with proper spacing
- Convert to single-column mobile layout stacking all form fields vertically
- Replace Bootstrap datepicker with native HTML5 date input on mobile
- Simplify tag selection with mobile-friendly chip input and touch targets
- Default to Simple mode on mobile with clear mode toggle
- Implement bottom sheet pattern with swipe-to-dismiss gesture
- Add mobile-specific CSS with touch feedback and proper breakpoints
- Implement progressive enhancement with mobile detection utilities
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
