Vehicle Search Form Flow

This page describes the architecture and data flow of the Vehicle Search Form — how state, the API, and the UI fit together.

Overview

The Vehicle Search Form (vehicle-search) manages a full search experience: multiple filters, real-time updates, and pagination. This page explains how the parts work together for integrators and maintainers.

Component Architecture

VehicleSearchForm
├── SearchFilters
│   ├── MakeModelFilter
│   ├── PriceRangeFilter
│   ├── YearRangeFilter
│   └── … (other filters)
├── SearchResults
│   ├── ResultsList
│   ├── ResultCard
│   └── Pagination
└── SortControls

Search Flow

1. Initial load

When the component mounts it reads its configuration from data attributes, initialises the default filter state, fetches the initial results, and renders the filter UI and results.

2. User interaction

When a user applies filters the filter state updates, a debounced API call is triggered, a loading state is shown, the results are replaced with the response, and (optionally) the URL is updated with the filter parameters.

3. Pagination & infinite scroll

When navigating pages the page number updates in state, an API call fetches the new page, and the results list updates. The form also supports infinite scroll; on a full page reload the list resets to the first page.

State Management

The component uses React hooks — useState for filter values and results, useEffect to trigger API calls, useCallback for memoised handlers, and custom hooks for shared logic.

API Integration

The component talks to the Carposé API, e.g. GET /vehicles to fetch vehicles with filters and GET /vehicles/filters for available filter options. Query parameters encode the filter state. Transient errors are retried with exponential backoff.

Key Features

• Real-time, debounced filter updates

• URL state synchronisation

• Pagination and infinite scroll

• Responsive design, accessibility, and loading/error states

Related Pages

• Vehicle Search Form — usage documentation

• Static Form Values — the enumerated filter values