Skip to content

Add a new frontend filter

Austin Valeske edited this page Sep 28, 2021 · 4 revisions

To add a new filter to the backend, see this doc.

Frontend filter logic may be in flux and change with #629, but there are core ideas:

  • Frontend filters don't require specifying a comparison, since often the comparison can be assumed based on the filter (i.e. minRent only makes sense with a >= comparison). A comparison is selected from getComparisonForFilter() when building the backend URL, because the backend needs to be told exactly which comparison to use.
  • The filter state is stored in the query string of the frontend URL. The state update cycle looks like
    We encode/decode filter data into the URL, instead of setting the filterState directly in onSubmit(), to avoid a short circuit in this flow. If we updated filterState directly and by listening for changes in the URL, and onSubmit() also updated the URL to match the new filters, the React Effect that updates the filter state would be triggered twice and we’d have to check if currentFilters != prevFilters to ensure that we don’t get stuck in the loop.

The frontend filter logic is in two major places:

The major steps are currently:

  • Ensure your filter key is included in FrontendListingFilterStateKeys and ListingFilterState
  • Add a form element to the filter modal that sets its value based on the field you added to ListingFilterState