Skip to Content
⚠️Active Development Notice: TimeTiles is under active development. Information may be placeholder content or not up-to-date.

web


web / lib/hooks/use-filters

lib/hooks/use-filters

Provides a centralized custom hook for managing filter state across the application.

This module uses the nuqs library to synchronize filter state (such as selected catalogs, datasets, and date ranges) with the URL query parameters. This ensures that the filter state is bookmarkable and shareable.

The useFilters hook encapsulates the logic for reading, updating, and clearing filters, providing a clean and reusable interface for any component that needs to interact with the global filter state.

Interfaces

MapPosition

Map position state stored in URL.

Includes center coordinates (lat/lng) and zoom level.

Properties

latitude

latitude: number | null

longitude

longitude: number | null

zoom

zoom: number | null

Functions

useFilters()

useFilters(): object

Returns

object

filters

filters: FilterState

setCatalog()

setCatalog: (newCatalog) => void = handleSetCatalog

Parameters
newCatalog

string | null

Returns

void

setDatasets()

setDatasets: (newDatasets) => void = handleSetDatasets

Parameters
newDatasets

string[]

Returns

void

setStartDate()

setStartDate: (value) => undefined

Parameters
value

string | null

Returns

undefined

setEndDate()

setEndDate: (value) => undefined

Parameters
value

string | null

Returns

undefined

setFieldFilters()

setFieldFilters: (newFieldFilters) => void

Parameters
newFieldFilters

Record<string, string[]>

Returns

void

setFieldFilter()

setFieldFilter: (fieldPath, values) => void

Parameters
fieldPath

string

values

string[]

Returns

void

removeFilter()

removeFilter: (filterType, value?) => void = handleRemoveFilter

Parameters
filterType

keyof FilterState

value?

string

Returns

void

clearAllFilters()

clearAllFilters: () => void = handleClearAllFilters

Returns

void

activeFilterCount

activeFilterCount: number

hasActiveFilters

hasActiveFilters: boolean = hasActiveFiltersValue


useSelectedEvent()

useSelectedEvent(): object

Hook for managing selected event state via URL.

Uses nuqs to sync the selected event ID with the URL, enabling permalink sharing of the explore page with a specific event open.

Returns

object

Selected event state and handlers

selectedEventId

selectedEventId: number | null

isOpen

isOpen: boolean

openEvent()

openEvent: (eventId) => void

Parameters
eventId

number

Returns

void

closeEvent()

closeEvent: () => void

Returns

void


useMapPosition()

useMapPosition(): object

Hook for managing map position state via URL.

Uses nuqs to sync the map center (lat/lng) and zoom level with the URL, enabling permalink sharing of the explore page with a specific map view. Uses shallow routing and replace history to avoid excessive history entries.

Returns

object

Map position state and handlers

mapPosition

mapPosition: MapPosition

hasMapPosition

hasMapPosition: boolean

setMapPosition()

setMapPosition: (position) => void

Parameters
position
latitude

number

longitude

number

zoom

number

Returns

void

clearMapPosition()

clearMapPosition: () => void

Returns

void

References

FilterState

Re-exports FilterState

Last updated on