Merge pull request #5475 from Couchers-org/revert-5413-web/feature/ma…

…p-clear-filter-button

Revert "frontend - add clear filter button #5275"

app/web/features/auth/notifications/useNotificationSettings.test.ts

@@ -56,7 +56,7 @@ describe("useNotificationSettings", () => {
         service.notifications.getNotificationSettings
       ).toHaveBeenCalledTimes(1)
     );
-    await waitFor(() => expect(result.current.data).toEqual(mockData));
+    expect(result.current.data).toEqual(mockData);
   });
 
   it("should return an error when the request fails", async () => {

app/web/features/search/FilterDialog.tsx

@@ -347,7 +347,7 @@ export default function FilterDialog({
                 className={classes.noMargin}
                 type="number"
                 variant="standard"
-                value={numberOfGuestFilter || ""}
+                value={numberOfGuestFilter}
                 inputProps={{ min: 0 }}
                 onChange={handleNumGuestsChange}
                 fullWidth

app/web/features/search/MapWrapper.tsx

@@ -1,6 +1,5 @@
 import ReplayIcon from "@mui/icons-material/Replay";
 import TuneIcon from "@mui/icons-material/Tune";
-import { useMediaQuery } from "@mui/material";
 import Button from "components/Button";
 import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
 import Map from "components/Map";
@@ -30,7 +29,6 @@ import {
   useState,
 } from "react";
 import { InfiniteData } from "react-query";
-import { theme } from "theme";
 import { GeocodeResult, usePrevious } from "utils/hooks";
 import makeStyles from "utils/makeStyles";
 
@@ -56,31 +54,27 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
   },
   testChildFromGoogle: {
-    width: "365px",
+    width: "300px",
     top: "30px",
     display: "flex",
     position: "relative",
     left: "-50%",
     fontSize: " 14px",
     margin: "8px auto 0",
     alignItems: "center",
+
     height: "25px",
-    zIndex: 1,
-  },
-  searchHereButton: {
-    borderRadius: "4px",
-    marginRight: theme.spacing(1),
-  },
-  clearFiltersButton: {
-    borderRadius: "4px",
-    marginRight: theme.spacing(1),
+    zIndex: 10,
   },
   buttonSearchSettings: {
-    borderRadius: "4px",
+    borderRadius: "0 4px 4px 0",
     "& span": {
       margin: 0,
     },
   },
+  searchHereButton: {
+    borderRadius: "4px 0 0 4px",
+  },
 }));
 
 interface mapWrapperProps {
@@ -96,8 +90,6 @@ interface mapWrapperProps {
   map: MutableRefObject<MaplibreMap | undefined>;
   setWasSearchPerformed: Dispatch<SetStateAction<boolean>>;
   wasSearchPerformed: boolean;
-  areFiltersCleared: boolean;
-  onClearFiltersClick: () => void;
 }
 
 export default function MapWrapper({
@@ -111,16 +103,13 @@ export default function MapWrapper({
   setIsFiltersOpen,
   wasSearchPerformed,
   setWasSearchPerformed,
-  areFiltersCleared,
-  onClearFiltersClick,
 }: mapWrapperProps) {
   const { t } = useTranslation([SEARCH]);
   const [areClustersLoaded, setAreClustersLoaded] = useState(false);
   const [isMapStyleLoaded, setIsMapStyleLoaded] = useState(false);
   const [isMapSourceLoaded, setIsMapSourceLoaded] = useState(false);
   const previousResult = usePrevious(selectedResult);
   const classes = useStyles();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   /**
    * User clicks on a user on map
@@ -240,11 +229,7 @@ export default function MapWrapper({
    * Re-renders users list on map (when results array changed)
    */
   useEffect(() => {
-    if (
-      isMapStyleLoaded &&
-      isMapSourceLoaded &&
-      (wasSearchPerformed || areFiltersCleared)
-    ) {
+    if (isMapStyleLoaded && isMapSourceLoaded && wasSearchPerformed) {
       if (results) {
         const usersToRender = filterData(results);
         reRenderUsersOnMap(map.current!, usersToRender, handleMapUserClick);
@@ -257,19 +242,17 @@ export default function MapWrapper({
     isMapStyleLoaded,
     isMapSourceLoaded,
     wasSearchPerformed,
-    areFiltersCleared,
   ]);
 
   /**
    * Clicks on 'search here' button
    */
-  const handleSearchOnClick = () => {
+  const handleOnClick = () => {
     const currentBbox = map.current?.getBounds().toArray();
     if (currentBbox) {
       if (map.current?.getBounds && locationResult) {
-        // Reset location but persist map position
         setLocationResult({
-          location: new LngLat(0, 0),
+          ...locationResult,
           name: "",
           simplifiedName: "",
           bbox: [
@@ -284,13 +267,6 @@ export default function MapWrapper({
     }
   };
 
-  /**
-   * Clicks on 'clear filters' button
-   */
-  const handleClearFiltersClick = () => {
-    onClearFiltersClick();
-  };
-
   const initializeMap = (newMap: MaplibreMap) => {
     map.current = newMap;
     newMap.on("load", () => {
@@ -315,21 +291,11 @@ export default function MapWrapper({
           <Button
             color="primary"
             disabled={isLoading}
-            onClick={handleSearchOnClick}
+            onClick={handleOnClick}
             className={classes.searchHereButton}
             endIcon={<ReplayIcon />}
           >
-            {isMobile
-              ? t("search:filter_dialog.mobile_search_here_button")
-              : t("search:filter_dialog.desktop_search_here_button")}
-          </Button>
-          <Button
-            color="primary"
-            disabled={areFiltersCleared}
-            onClick={handleClearFiltersClick}
-            className={classes.clearFiltersButton}
-          >
-            {t("search:filter_dialog.clear_filters_button")}
+            {t("search:filter_dialog.search_here_button")}
           </Button>
           <Button
             color="primary"

app/web/features/search/SearchPage.test.tsx

@@ -54,11 +54,4 @@ describe("SearchPage", () => {
 
     await expect(screen.findByRole("alert")).rejects.toThrow();
   });
-
-  it("Clear filters button should be disabled initially", () => {
-    render(<SearchPage locationName="" bbox={[0, 0, 0, 0]} />, { wrapper });
-
-    const clearFiltersButton = screen.getByText("Clear filters");
-    expect(clearFiltersButton).toBeDisabled();
-  });
 });

app/web/features/search/SearchPage.tsx

@@ -81,9 +81,7 @@ export default function SearchPage({
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   // State
-  const [wasSearchPerformed, setWasSearchPerformed] = useState(
-    locationName !== ""
-  );
+  const [wasSearchPerformed, setWasSearchPerformed] = useState(false);
   const [locationResult, setLocationResult] = useState<GeocodeResult>({
     bbox: bbox,
     isRegion: false,
@@ -107,9 +105,6 @@ export default function SearchPage({
   >();
 
   const [isFiltersOpen, setIsFiltersOpen] = useState(false);
-  const [areFiltersCleared, setAreFiltersCleared] = useState(
-    locationName === ""
-  );
 
   // Loads the list of users
   const { data, error, isLoading, isFetching, hasNextPage } = useInfiniteQuery<
@@ -153,53 +148,32 @@ export default function SearchPage({
   }, [locationResult?.bbox]);
 
   /**
-   * Updates filter status and controls clear filters button
+   * Tracks whether a search was perform after the first render (always show all the users of the platform on the first render)
    */
   useEffect(() => {
-    const filtersApplied =
-      lastActiveFilter !== 0 ||
-      hostingStatusFilter.length !== 0 ||
-      numberOfGuestFilter !== undefined ||
-      completeProfileFilter !== false ||
-      queryName !== "" ||
-      locationResult.name !== "" ||
-      wasSearchPerformed !== false;
-
-    if (!wasSearchPerformed && filtersApplied) {
-      setWasSearchPerformed(true);
+    if (!wasSearchPerformed) {
+      if (
+        lastActiveFilter !== 0 ||
+        hostingStatusFilter.length !== 0 ||
+        numberOfGuestFilter !== undefined ||
+        completeProfileFilter !== false ||
+        queryName !== "" ||
+        (locationResult.location.lng !== 0 && locationResult.location.lat !== 0)
+      ) {
+        setWasSearchPerformed(true);
+      }
     }
-
-    setAreFiltersCleared(!filtersApplied);
   }, [
     lastActiveFilter,
     hostingStatusFilter,
     numberOfGuestFilter,
     completeProfileFilter,
     wasSearchPerformed,
     queryName,
-    locationResult.name,
+    locationResult.location.lng,
+    locationResult.location.lat,
   ]);
 
-  /**
-   * Handler for clearing all filters
-   */
-  const handleClearFilters = () => {
-    setQueryName("");
-    setLocationResult({
-      bbox: [390, 82, -173, -66],
-      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 (
@@ -273,8 +247,6 @@ export default function SearchPage({
             isLoading={isLoading || isFetching}
             setWasSearchPerformed={setWasSearchPerformed}
             wasSearchPerformed={wasSearchPerformed}
-            areFiltersCleared={areFiltersCleared}
-            onClearFiltersClick={handleClearFilters}
           />
         </div>
       </div>

app/web/features/search/locales/en.json

@@ -1,46 +1,44 @@
 {
-  "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"
+    "filter_dialog": {
+        "search_here_button": "Search in this area",
+        "desktop_title": "Filters",
+        "mobile_title": "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"
+    "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"
     },
-    "accommodation_filters": {
-      "title": "Accommodation filters",
-      "guests_field_label": "Number of guests"
+    "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"
     },
-    "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"
-  }
+    "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"
+    }
 }