@domain-group/fe-pa-trade-search-results v7.3.0

fe-pa-trade-search-results

The search results page used by Find an Agent.

View demo on fe-dora.

Usage

yarn add @domain-group/fe-pa-trade-search-results

import { TradeSearchResults } from '@domain-group/fe-pa-trade-search-results';

<TradeSearchResults
  initialFetchState
  initialViewState
  searchHeader
/>

PropTypes

This component is enhanced by a Recompose higher-order component (HOC) which is responsible for adding state and lifecycle methods to the base component, and may require additional props that are not declared in the base component if it doesn't explicitly require them. Below is the definitive list of props required for the component to render.

For more information about Recompose, check out Recompose on GitHub.

For more details, see src/js/trade-search-results.js

Code Architecture

Check out the fe-boilerplate-generator@7.6.3 docs for info on the repo layout, structure and meaning.

Component Architecture

src/enhance/index.js

Composes and exports the Recompose HOC.

src/enhance/lifecycle.js

Defines the HOC's lifecycle methods, such as componentDidMount().

src/enhance/set-prop-types.js

Defines additional PropTypes as required by the Recompose HOC, but not the base component.

src/enhance/with-handlers.js

Defines event handlers that update the component state and/or fetch new search results in response to UI changes, such as filtering and sorting.

src/enhance/with-state.js

Defines the component's state and state handlers, accessible as props from the base component and/or event handlers.

fetchState

Updated using setFetchState. Initial state is defined via props.initialFetchState using an identical object format.

viewState

Updated using setViewState. Initial state is defined via props.initialViewState using an identical object format.

src/utils/get-filter-options.js

Returns a list of filter options for use in the applicable dropdown menu.

src/utils/get-header-text.js

Returns a string from a given object argument, as defined below. Defines the title text as visible at the top of the page.

src/utils/get-sort-options.js

Returns a list of sort options for use in the applicable dropdown menu.

src/utils/transform-selected-suburbs.js

Transforms the object at props.selectedSuburbs into a format compatible with fe-co-find-an-agent-autocomplete.

src/js/constants.js

This component is heavily reliant on string values in its conditional logic and query string behaviour. To avoid bugs arising from the use of 'magic strings', any such strings that affect the behaviour of the component are defined in this file as constants and explicitly imported where applicable.

In some instances, these constants may also used as object keys as the key names may need to vary depending on these values. See src/js/enhance/with-handlers.js for some notable examples of this behaviour when the query string is to be updated as the result of a UI change.

src/js/trade-search-results.js

The enhanced component to be rendered. Also exports the pure base component as BaseComponent for Enzyme testing purposes.

Changes and history

See CHANGELOG.md.