fix: format currency before filter form submit

sites/public/src/lib/helpers.tsx

@@ -45,6 +45,9 @@ import DetroitIcon from "../components/core/DetroitIcon"
 
 export const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
+export const removeCommas = (data: string | number) =>
+  typeof data === "string" ? data.replaceAll(",", "") : data
+
 export const getGenericAddress = (bloomAddress: Address) => {
   return bloomAddress
     ? {

sites/public/src/pages/finder.tsx

@@ -24,6 +24,7 @@ import Layout from "../layouts/application"
 import FinderDisclaimer from "../components/finder/FinderDisclaimer"
 import FinderMultiselect from "../components/finder/FinderMultiselect"
 import FinderRentalCosts from "../components/finder/FinderRentalCosts"
+import { removeCommas } from "../lib/helpers"
 
 interface FinderField {
   label: string
@@ -128,6 +129,16 @@ const Finder = () => {
         })
       }
     })
+    if (formSelections[FrontendListingFilterStateKeys.minRent]) {
+      formSelections[FrontendListingFilterStateKeys.minRent] = removeCommas(
+        formSelections[FrontendListingFilterStateKeys.minRent]
+      )
+    }
+    if (formSelections[FrontendListingFilterStateKeys.maxRent]) {
+      formSelections[FrontendListingFilterStateKeys.maxRent] = removeCommas(
+        formSelections[FrontendListingFilterStateKeys.maxRent]
+      )
+    }
     void router.push(
       `/listings/filtered?page=${1}&limit=${8}${encodeToFrontendFilterString(formSelections)}`
     )

sites/public/src/pages/listings.tsx

@@ -12,14 +12,15 @@ import Layout from "../layouts/application"
 import { MetaTags } from "../components/shared/MetaTags"
 import { useRouter } from "next/router"
 import FilterForm from "../components/filters/FilterForm"
-import { getListings } from "../lib/helpers"
+import { getListings, removeCommas } from "../lib/helpers"
 import { fetchBaseListingData } from "../lib/hooks"
 import {
   ListingList,
   pushGtmEvent,
   encodeToFrontendFilterString,
   ListingFilterState,
   AuthContext,
+  FrontendListingFilterStateKeys,
 } from "@bloom-housing/shared-helpers"
 import { ListingPagination } from "../components/listing/ListingPagination"
 import { UserStatus } from "../lib/constants"
@@ -35,6 +36,13 @@ const ListingsPage = ({ initialListings }) => {
   const metaImage = "" // TODO: replace with hero image
 
   const onSubmit = (page: number, limit: number, data: ListingFilterState) => {
+    data[FrontendListingFilterStateKeys.minRent] = removeCommas(
+      data[FrontendListingFilterStateKeys.minRent]
+    )
+    data[FrontendListingFilterStateKeys.maxRent] = removeCommas(
+      data[FrontendListingFilterStateKeys.maxRent]
+    )
+
     setFilterModalVisible(false)
     void router.push(
       `/listings/filtered?page=${page}&limit=${limit}${encodeToFrontendFilterString(data)}`

sites/public/src/pages/listings/filtered.tsx

@@ -14,10 +14,10 @@ import {
 import { faSliders } from "@fortawesome/free-solid-svg-icons"
 import DetroitIcon from "../../components/core/DetroitIcon"
 import {
-  encodeToFrontendFilterString,
   decodeFiltersFromFrontendUrl,
-  ListingFilterState,
+  encodeToFrontendFilterString,
   FrontendListingFilterStateKeys,
+  ListingFilterState,
 } from "@bloom-housing/shared-helpers"
 import Layout from "../../layouts/application"
 import { MetaTags } from "../../components/shared/MetaTags"
@@ -27,7 +27,7 @@ import { useListingsData } from "../../lib/hooks"
 import { EnumListingFilterParamsStatus, OrderByFieldsEnum } from "@bloom-housing/backend-core/types"
 import FilterForm from "../../components/filters/FilterForm"
 import ListingPagination from "../../components/listing/ListingPagination"
-import { getListings } from "../../lib/helpers"
+import { getListings, removeCommas } from "../../lib/helpers"
 
 const FilteredListingsPage = () => {
   const router = useRouter()
@@ -90,6 +90,12 @@ const FilteredListingsPage = () => {
   const onSubmit = (page: number, limit: number, data: ListingFilterState) => {
     // hide status filter
     delete data[FrontendListingFilterStateKeys.status]
+    data[FrontendListingFilterStateKeys.minRent] = removeCommas(
+      data[FrontendListingFilterStateKeys.minRent]
+    )
+    data[FrontendListingFilterStateKeys.maxRent] = removeCommas(
+      data[FrontendListingFilterStateKeys.maxRent]
+    )
     setFilterModalVisible(false)
     setQueryString(page, limit, data)
   }