forked from bloom-housing/bloom
-
Notifications
You must be signed in to change notification settings - Fork 1
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 fromgetComparisonForFilter()
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:
- encode/decode and other helpers are in ui-components/src/helpers/filters.ts
- The filter state management on listings/filtered.tsx
- The filter modal/form in FilterForm.tsx
- The form submit handler on listings.tsx
The major steps are currently:
- Ensure your filter key is included in
FrontendListingFilterStateKeys
andListingFilterState
- Add a form element to the filter modal that sets its value based on the field you added to
ListingFilterState