fix: Clearing filters (#5258)

* fix: clear filters

* fix: regions default value

* test: fix

* fix: apply clear filters on button clear

* fix: clear filters without closing filter drawer

* fix: add missing translations

Author: KrissDrawing

shared-helpers/src/locales/es.json

@@ -629,6 +629,7 @@
   "leasingAgent.contact": "Comuníquese con el agente de alquiler",
   "leasingAgent.dueToHighCallVolume": "Debido al alto volumen de llamadas, usted podría escuchar un mensaje.",
   "leasingAgent.officeHours": "Horario de oficina",
+  "listingFilters.clear": "Borrar",
   "listingFilters.program.Families": "Familias",
   "listingFilters.program.Residents with Disabilities": "Residentes con discapacidades",
   "listingFilters.program.Seniors 55+": "Adultos mayores de 55 años",

shared-helpers/src/locales/general.json

@@ -620,6 +620,7 @@
   "leasingAgent.contact": "Contact leasing agent",
   "leasingAgent.dueToHighCallVolume": "Due to high call volume you may hear a message.",
   "leasingAgent.officeHours": "Office hours",
+  "listingFilters.clear": "Clear",
   "listingFilters.program.Families": "Families",
   "listingFilters.program.Residents with Disabilities": "Residents with disabilities",
   "listingFilters.program.Seniors 55+": "Seniors 55+",

shared-helpers/src/locales/vi.json

@@ -629,6 +629,7 @@
   "leasingAgent.contact": "Liên hệ với đại lý cho thuê",
   "leasingAgent.dueToHighCallVolume": "Do có nhiều cuộc gọi đến, quý vị có thể nghe thấy một lời nhắn.",
   "leasingAgent.officeHours": "Giờ làm việc",
+  "listingFilters.clear": "Xóa",
   "listingFilters.program.Families": "Gia đình",
   "listingFilters.program.Residents with Disabilities": "Người dân khuyết tật",
   "listingFilters.program.Seniors 55+": "Người cao tuổi từ 55 tuổi trở lên",

shared-helpers/src/locales/zh.json

@@ -629,6 +629,7 @@
   "leasingAgent.contact": "联系租赁代理",
   "leasingAgent.dueToHighCallVolume": "由於來電人數眾多，您可能會聽到訊息留言。",
   "leasingAgent.officeHours": "办公时间",
+  "listingFilters.clear": "清除",
   "listingFilters.program.Families": "家庭",
   "listingFilters.program.Residents with Disabilities": "残疾居民",
   "listingFilters.program.Seniors 55+": "55岁以上的老年人",

sites/public/__tests__/components/browse/FilterDrawer.test.tsx

@@ -196,7 +196,7 @@ describe("FilterDrawer", () => {
     expect(screen.getByRole("checkbox", { name: "Community Type Four" })).not.toBeChecked()
 
     expect(screen.getByRole("button", { name: "Show matching listings" })).toBeInTheDocument()
-    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Clear" })).toBeInTheDocument()
   })
 
   it("should return all filter fields correctly with previous selections", () => {
@@ -355,7 +355,7 @@ describe("FilterDrawer", () => {
     expect(screen.getByRole("checkbox", { name: "Community Type Four" })).not.toBeChecked()
 
     expect(screen.getByRole("button", { name: "Show matching listings" })).toBeInTheDocument()
-    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Clear" })).toBeInTheDocument()
   })
 
   it("should return correct unit types fields with unit groups", () => {

sites/public/__tests__/components/browse/ListingBrowse.test.tsx

@@ -649,7 +649,7 @@ describe("<ListingBrowse>", () => {
     })
     expect(listingNameField).toHaveValue("Test Search")
 
-    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Clear" })).toBeInTheDocument()
     const showMatchingButton = screen.getByRole("button", { name: "Show matching listings" })
     expect(showMatchingButton).toBeInTheDocument()
     fireEvent.click(showMatchingButton)

sites/public/src/components/browse/FilterDrawer.tsx

@@ -29,6 +29,7 @@ export interface FilterDrawerProps {
   isOpen: boolean
   onClose: () => void
   onSubmit: (data: FilterData) => void
+  onClear: (resetFilters: (data: FilterData) => void) => void
   multiselectData: MultiselectQuestion[]
   activeFeatureFlags?: FeatureFlagEnum[]
 }
@@ -42,6 +43,7 @@ const FilterDrawer = (props: FilterDrawerProps) => {
     setValue,
     setError,
     clearErrors,
+    reset,
     formState: { errors },
   } = useForm({ mode: "onBlur" })
 
@@ -125,7 +127,7 @@ const FilterDrawer = (props: FilterDrawerProps) => {
               return {
                 key: `${ListingFilterKeys.regions}.${region}`,
                 label: region.replace("_", " "),
-                defaultChecked: props.filterState?.[ListingFilterKeys.regions]?.[region],
+                defaultChecked: isTrue(props.filterState?.[ListingFilterKeys.regions]?.[region]),
               }
             })}
             register={register}
@@ -159,8 +161,8 @@ const FilterDrawer = (props: FilterDrawerProps) => {
         <Button type="submit" variant="primary" size="sm" nativeButtonProps={{ form: "filter" }}>
           {t("listings.showMatchingListings")}
         </Button>
-        <Button variant="primary-outlined" size="sm" onClick={props.onClose}>
-          {t("t.cancel")}
+        <Button variant="primary-outlined" size="sm" onClick={() => props.onClear(reset)}>
+          {t("listingFilters.clear")}
         </Button>
       </Drawer.Footer>
     </Drawer>

sites/public/src/components/browse/ListingBrowse.tsx

@@ -92,6 +92,7 @@ export const ListingBrowse = (props: ListingBrowseProps) => {
   useEffect(() => {
     const filterData = decodeQueryToFilterData(router.query)
     setFilterState(filterData)
+    setIsLoading(false)
   }, [router.asPath, router.query])
 
   const saveFavoriteFn = (listingId: string) => {
@@ -141,6 +142,17 @@ export const ListingBrowse = (props: ListingBrowseProps) => {
     }
   }
 
+  const onFilterClear = (resetFilters: (data: FilterData) => void) => {
+    if (Object.keys(filterState).length > 0) {
+      setIsLoading(true)
+      router.pathname.includes("listings-closed")
+        ? void router.push(`/listings-closed`)
+        : void router.push(`/listings`)
+    }
+    resetFilters({ name: "", monthlyRent: { minRent: "", maxRent: "" } })
+    setFilterState({})
+  }
+
   const onShowAll = useCallback(async () => {
     await router.replace(router.pathname)
   }, [router])
@@ -168,6 +180,7 @@ export const ListingBrowse = (props: ListingBrowseProps) => {
         filterState={filterState}
         multiselectData={props.multiselectData}
         activeFeatureFlags={jurisdictionActiveFeatureFlags}
+        onClear={onFilterClear}
       />
       <LoadingState loading={isLoading}>
         <div className={styles["listing-directory"]}>

sites/public/src/pages/listings.tsx

@@ -37,8 +37,6 @@ export interface ListingsProps {
 }
 
 export default function ListingsPage(props: ListingsProps) {
-  const router = useRouter()
-
   return (
     <>
       {process.env.showNewSeedsDesigns ? (
@@ -48,7 +46,6 @@ export default function ListingsPage(props: ListingsProps) {
           jurisdiction={props.jurisdiction}
           multiselectData={props.multiselectData}
           paginationData={props.paginationData}
-          key={router.asPath}
           areFiltersActive={props.areFiltersActive}
         />
       ) : (