frontend - add clear filter button #5275 #5413
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -81,7 +81,9 @@ export default function SearchPage({ | |
| const isMobile = useMediaQuery(theme.breakpoints.down("md")); | ||
|
|
||
| // State | ||
| const [wasSearchPerformed, setWasSearchPerformed] = useState( | ||
| locationName !== "" | ||
| ); | ||
| const [locationResult, setLocationResult] = useState<GeocodeResult>({ | ||
| bbox: bbox, | ||
| isRegion: false, | ||
|
|
@@ -105,6 +107,9 @@ export default function SearchPage({ | |
| >(); | ||
|
|
||
| const [isFiltersOpen, setIsFiltersOpen] = useState(false); | ||
| const [areFiltersCleared, setAreFiltersCleared] = useState( | ||
|
There was a problem hiding this comment. Hey David @nexagoai! If it is set to true by default then the clear filters button will be disabled on initial render, even if the map is initially rendered with a location filter (ie: someone searched Berlin from the homepage) which is an issue. That's why it's currently set to a conditional that checks whether it should be true or false |
||
| locationName === "" | ||
| ); | ||
|
|
||
| // Loads the list of users | ||
| const { data, error, isLoading, isFetching, hasNextPage } = useInfiniteQuery< | ||
|
|
@@ -148,32 +153,53 @@ export default function SearchPage({ | |
| }, [locationResult?.bbox]); | ||
|
|
||
| /** | ||
| * Updates filter status and controls clear filters button | ||
| */ | ||
| useEffect(() => { | ||
| const filtersApplied = | ||
| lastActiveFilter !== 0 || | ||
| hostingStatusFilter.length !== 0 || | ||
| numberOfGuestFilter !== undefined || | ||
| completeProfileFilter !== false || | ||
| queryName !== "" || | ||
| locationResult.name !== "" || | ||
| wasSearchPerformed !== false; | ||
|
|
||
| if (!wasSearchPerformed && filtersApplied) { | ||
| setWasSearchPerformed(true); | ||
| } | ||
|
|
||
| setAreFiltersCleared(!filtersApplied); | ||
| }, [ | ||
| lastActiveFilter, | ||
| hostingStatusFilter, | ||
| numberOfGuestFilter, | ||
| completeProfileFilter, | ||
| wasSearchPerformed, | ||
| queryName, | ||
| locationResult.name, | ||
| ]); | ||
|
|
||
| /** | ||
| * Handler for clearing all filters | ||
| */ | ||
| const handleClearFilters = () => { | ||
| setQueryName(""); | ||
| setLocationResult({ | ||
| bbox: [390, 82, -173, -66], | ||
|
There was a problem hiding this comment. They are the hardcoded numbers that set the original map position on initial render, so upon clearing filters I set them back to the same numbers to remain consistent |
||
| isRegion: false, | ||
| location: new LngLat(0, 0), | ||
| name: "", | ||
| simplifiedName: "", | ||
| }); | ||
| setLastActiveFilter(0); | ||
| setHostingStatusFilter([]); | ||
| setNumberOfGuestFilter(undefined); | ||
| setCompleteProfileFilter(false); | ||
| setAreFiltersCleared(true); | ||
| setWasSearchPerformed(false); | ||
| }; | ||
|
|
||
| const errorMessage = error?.message; | ||
|
|
||
| return ( | ||
|
|
@@ -247,6 +273,8 @@ export default function SearchPage({ | |
| isLoading={isLoading || isFetching} | ||
| setWasSearchPerformed={setWasSearchPerformed} | ||
| wasSearchPerformed={wasSearchPerformed} | ||
| areFiltersCleared={areFiltersCleared} | ||
| onClearFiltersClick={handleClearFilters} | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,46 @@ | ||
| { | ||
| "filter_dialog": { | ||
| "desktop_search_here_button": "Search in this area", | ||
| "mobile_search_here_button": "Search here", | ||
| "desktop_title": "Filters", | ||
| "mobile_title": "Search", | ||
| "clear_filters_button": "Clear filters" | ||
| }, | ||
| "last_active_options": { | ||
| "any": "Any", | ||
| "last_day": "Last day", | ||
| "last_week": "Last week", | ||
| "last_2_weeks": "Last 2 weeks", | ||
| "last_month": "Last month", | ||
| "last_3_months": "Last 3 months" | ||
| }, | ||
| "form": { | ||
| "location_field_label": "Near location", | ||
| "missing_location_validation_error": "Specify a location to use this filter", | ||
| "keywords": { | ||
| "field_label": "Name, keywords, or username", | ||
| "clear_field_action_a11y_label": "Clear search" | ||
| }, | ||
| "by_location_filter_label": "By location", | ||
| "by_keyword_filter_label": "By keyword or name", | ||
| "host_filters": { | ||
| "title": "Host filters", | ||
| "last_active_field_label": "Last active", | ||
| "hosting_status_field_label": "Hosting status", | ||
| "complete_profiles_label": "Complete profiles" | ||
| }, | ||
| "accommodation_filters": { | ||
| "title": "Accommodation filters", | ||
| "guests_field_label": "Number of guests" | ||
| }, | ||
| "empty_profile_filters": { | ||
| "title": "Filter out empty profiles" | ||
| }, | ||
| "submit_button_label": "Apply" | ||
| }, | ||
| "search_result": { | ||
| "no_user_result_message": "No users found.", | ||
| "show_user_button_label": "Show {{name}} on the map", | ||
| "missing_about_description": "{{name}} hasn't said anything about themselves yet" | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[David here] maybe a boolean it's better than empty string?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel like setting the
wasSearchPerformedto false can show all the users on the map?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sorry if I review this late, I've been busy lately 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nexagoai
locationName !== ""does return a boolean.