Files
motovaultpro/frontend
Eric Gullickson 0e8d8e7d5e Fix blank stations page by waiting for auth initialization
- 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 <noreply@anthropic.com>
2025-11-04 19:15:03 -06:00
..
2025-11-04 18:46:46 -06:00
2025-11-04 18:46:46 -06:00
2025-11-04 18:46:46 -06:00
2025-09-17 16:09:15 -05:00
2025-08-09 12:47:15 -05:00
2025-08-09 12:47:15 -05:00
2025-11-04 18:46:46 -06:00
2025-08-09 12:47:15 -05:00
2025-11-04 18:46:46 -06:00
2025-09-17 16:09:15 -05:00
2025-09-17 16:09:15 -05:00
2025-11-03 14:06:54 -06:00
2025-08-09 12:47:15 -05:00
2025-11-04 18:38:06 -06:00
2025-09-17 16:09:15 -05:00
2025-08-09 17:45:54 -05:00
2025-09-28 20:35:46 -05:00
2025-08-09 12:47:15 -05:00
2025-08-25 12:40:27 -05:00

Frontend Quickload

Overview

  • Tech: React 18, Vite, TypeScript, MUI, Tailwind, React Query, Zustand.
  • Auth: Auth0 via src/core/auth/Auth0Provider.tsx.
  • Data: API client in src/core/api/client.ts with React Query config.

Commands (containers)

  • Build: make rebuild
  • Logs: make logs-frontend

Structure

  • src/App.tsx, src/main.tsx — app entry.
  • src/features/* — feature pages/components/hooks.
  • src/core/* — auth, api, store, hooks, query config, utils.
  • src/shared-minimal/* — shared UI components and theme.

Mobile + Desktop (required)

  • Layouts responsive by default; validate on small/large viewports.
  • Verify Suspense fallbacks and navigation flows on both form factors.
  • Test key screens: Vehicles, Fuel Logs, Documents, Settings.
  • Ensure touch interactions and keyboard navigation work equivalently.

Testing

  • Jest config: frontend/jest.config.ts (jsdom).
  • Setup: frontend/setupTests.ts (Testing Library).
  • Run: docker compose exec mvp-frontend npm test (from project root, containerized).
  • Watch mode: docker compose exec mvp-frontend npm run test:watch.

Patterns

  • State: co-locate feature state in src/core/store (Zustand) and React Query for server state.
  • Forms: react-hook-form + Zod resolvers.
  • UI: MUI components; Tailwind for utility styling.