CityOfDetroit · willrlin · Aug 19, 2021 · Aug 13, 2021 · Aug 18, 2021 · Aug 18, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file. The format
 
   - Zipcode filtering to backend ([#399](https://github.com/CityOfDetroit/bloom/pull/399))
   - CSV import script ([#404](https://github.com/CityOfDetroit/bloom/pull/404))
+  - Zipcode filtering to frontend ([#417](https://github.com/CityOfDetroit/bloom/pull/417))
 
 ## Detroit Team M9
 

diff --git a/backend/core/src/listings/dto/listing.dto.ts b/backend/core/src/listings/dto/listing.dto.ts
@@ -775,7 +775,15 @@ export class ListingFilterParams extends BaseFilter {
     required: false,
   })
   @IsNumberString({}, { groups: [ValidationsGroupsEnum.default] })
-  [ListingFilterKeys.bedrooms]?: number
+  [ListingFilterKeys.bedrooms]?: number;
+
+  @Expose()
+  @ApiProperty({
+    type: String,
+    example: "48211",
+    required: false,
+  })
+  [ListingFilterKeys.zipcode]?: string
 }
 
 export class ListingsQueryParams extends PaginationAllowsAllQueryParams {

diff --git a/backend/core/types/src/backend-swagger.ts b/backend/core/types/src/backend-swagger.ts
@@ -3655,6 +3655,9 @@ export interface ListingFilterParams {
 
   /**  */
   bedrooms?: number
+
+  /**  */
+  zipcode?: string
 }
 
 export interface PreferenceLink {

diff --git a/sites/public/pages/listings.tsx b/sites/public/pages/listings.tsx
@@ -14,6 +14,7 @@ import {
   encodeToFrontendFilterString,
   decodeFiltersFromFrontendUrl,
   LinkButton,
+  Field,
 } from "@bloom-housing/ui-components"
 import { useForm } from "react-hook-form"
 import Layout from "../layouts/application"
@@ -23,6 +24,16 @@ import { useRouter } from "next/router"
 import { useListingsData } from "../lib/hooks"
 import { ListingFilterKeys, ListingFilterParams } from "@bloom-housing/backend-core/types"
 
+const isValidZipCode = (value: string) => {
+  let returnValue = true
+  value.split(",").forEach((element) => {
+    if (!/^[0-9]{5}$/.test(element.trim())) {
+      returnValue = false
+    }
+  })
+  return returnValue
+}
+
 const ListingsPage = () => {
   const router = useRouter()
 
@@ -83,7 +94,7 @@ const ListingsPage = () => {
 
   /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { handleSubmit, register } = useForm()
+  const { handleSubmit, register, errors } = useForm()
   const onSubmit = (data: ListingFilterParams) => {
     setFilterModalVisible(false)
     setQueryString(/*page=*/ 1, data)
@@ -114,6 +125,29 @@ const ListingsPage = () => {
               options={preferredUnitOptions}
               defaultValue={filterState?.bedrooms?.toString()}
             />
+            <Field
+              id="zipCodeField"
+              name={ListingFilterKeys.zipcode}
+              label={t("listingFilters.zipCode")}
+              register={register}
+              controlClassName="control"
+              placeholder={t("listingFilters.zipCodeDescription")}
+              validation={{
+                validate: (value) => isValidZipCode(value),
+              }}
+              error={errors.zipCodeField}
+              errorMessage={t("errors.multipleZipCodeError")}
+              defaultValue={filterState?.zipcode}
+            />
+            <Select
+              id="neighborhoodOptions"
+              name={ListingFilterKeys.neighborhood}
+              label={t("listingFilters.neighborhood")}
+              register={register}
+              controlClassName="control"
+              options={neighborhoodOptions}
+              defaultValue={filterState?.neighborhood}
+            />
             <Select
               id="accessibilityOptions"
               name="accessibility"
@@ -130,15 +164,6 @@ const ListingsPage = () => {
               controlClassName="control"
               options={communityOptions}
             />
-            <Select
-              id="neighborhoodOptions"
-              name={ListingFilterKeys.neighborhood}
-              label={t("listingFilters.neighborhood")}
-              register={register}
-              controlClassName="control"
-              options={neighborhoodOptions}
-              defaultValue={filterState?.neighborhood}
-            />
           </div>
           <div className="text-center mt-6">
             <Button styleType={AppearanceStyleType.primary}>Apply Filters</Button>

diff --git a/ui-components/src/locales/ar.json b/ui-components/src/locales/ar.json
@@ -669,6 +669,7 @@
         "cityError": "الرجاء إدخال مدينة",
         "stateError": "الرجاء إدخال الدولة",
         "zipCodeError": "الرجاء إدخال الرمز البريدي",
+        "multipleZipCodeError": "الرجاء إدخال رمز بريدي واحد أو أكثر مفصول بفواصل",
         "errorsToResolve": "هناك أخطاء ستحتاج إلى حلها قبل المضي قدمًا.",
         "numberError": "الرجاء إدخال رقم صالح أكبر من 0.",
         "selectAllThatApply": "يرجى اختيار كل ما ينطبق.",
@@ -1224,7 +1225,9 @@
           "twoPlus": "2 غرف نوم أو أكثر",
           "threePlus": "3 غرف نوم أو أكثر",
           "fourPlus": "4 غرف نوم أو أكثر"
-        }
+        },
+        "zipCode": "الرمز البريدي",
+        "zipCodeDescription": "أدخل الرمز البريدي"
     },
     "eligibility": {
         "progress": {

diff --git a/ui-components/src/locales/bn.json b/ui-components/src/locales/bn.json
@@ -669,6 +669,7 @@
         "cityError": "দয়া করে একটি শহরে প্রবেশ করুন",
         "stateError": "দয়া করে একটি রাজ্যে প্রবেশ করুন",
         "zipCodeError": "একটি জিপ কোড প্রবেশ করুন",
+        "multipleZipCodeError": "অনুগ্রহ করে এক বা একাধিক কমা দ্বারা পৃথক পিন কোড লিখুন",
         "errorsToResolve": "এগিয়ে যাওয়ার আগে আপনাকে ত্রুটিগুলি সমাধান করতে হবে।",
         "numberError": "দয়া করে 0 এর চেয়ে বড় একটি বৈধ সংখ্যা লিখুন।",
         "selectAllThatApply": "প্রযোজ্য সমস্ত নির্বাচন করুন।",
@@ -1224,7 +1225,9 @@
           "twoPlus": "2 বা ততোধিক বেডরুম",
           "threePlus": "3 বা ততোধিক বেডরুম",
           "fourPlus": "4 বা ততোধিক বেডরুম"
-        }
+        },
+        "zipCode": "জিপ কোড",
+        "zipCodeDescription": "জিপ কোড প্রবেশ"
     },
     "eligibility": {
         "progress": {

diff --git a/ui-components/src/locales/es.json b/ui-components/src/locales/es.json
@@ -669,6 +669,7 @@
         "cityError": "Por favor ingrese una ciudad",
         "stateError": "Por favor, ingresa un estado",
         "zipCodeError": "Por favor introduzca un codigo postal",
+        "multipleZipCodeError": "Ingrese uno o más códigos postales separados por comas",
         "errorsToResolve": "Hay errores que deberá resolver antes de continuar.",
         "numberError": "Ingrese un número válido mayor que 0.",
         "selectAllThatApply": "Por favor seleccione todas las respuestas válidas.",
@@ -1224,7 +1225,9 @@
           "twoPlus": "2 o más recámaras",
           "threePlus": "3 o más recámaras",
           "fourPlus": "4 o más recámaras"
-        }
+        },
+        "zipCode": "Código postal",
+        "zipCodeDescription": "Ingresa tu código postal"
     },
     "eligibility": {
         "progress": {

diff --git a/ui-components/src/locales/general.json b/ui-components/src/locales/general.json
@@ -669,6 +669,7 @@
     "cityError": "Please enter a city",
     "stateError": "Please enter a state",
     "zipCodeError": "Please enter a zipcode",
+    "multipleZipCodeError": "Please enter one or more comma separated zip codes",
     "errorsToResolve": "There are errors you'll need to resolve before moving on.",
     "numberError": "Please enter a valid number greater than 0.",
     "selectAllThatApply": "Please select all that apply.",
@@ -1285,7 +1286,9 @@
       "twoPlus": "2 or more bedrooms",
       "threePlus": "3 or more bedrooms",
       "fourPlus": "4 or more bedrooms"
-    }
+    },
+    "zipCode": "Zip code",
+    "zipCodeDescription": "Enter zip code"
   },
   "eligibility": {
     "progress": {

diff --git a/ui-components/src/locales/vi.json b/ui-components/src/locales/vi.json
@@ -389,6 +389,7 @@
     "cityError": "Vui lòng nhập thành phố",
     "stateError": "Vui lòng nhập tiểu bang",
     "zipCodeError": "Vui lòng nhập số zipcode",
+    "multipleZipCodeError": "Vui lòng nhập một hoặc nhiều mã zip được phân tách bằng dấu phẩy",
     "errorsToResolve": "Quý vị cần giải quyết những lỗi này trước khi chuyển sang bước tiếp.",
     "numberError": "Vui lòng nhập một số hợp lệ lớn hơn 0.",
     "selectAllThatApply": "Vui lòng chọn tất cả các câu trả lời phù hợp",
@@ -746,5 +747,9 @@
     "applicantsWillBeContacted": "Các ứng viên sẽ được nhân viên đại diện bất động sản liên lạc theo thứ tự xếp hạng cho đến khi hết chỗ trống.",
     "allInfoWillBeVerified": "Tất cả thông tin quý vị đã cung cấp sẽ được xác nhận và xác nhận tình trạng điều kiện hội đủ của quý vị. Đơn ghi danh của quý vị sẽ bị xóa khỏi danh sách chờ nếu quý vị có bất kỳ tuyên bố sai sự thật nào. Nếu chúng tôi không thể xác nhận lựa chọn ưu tiên nhà ở mà quý vị đã yêu cầu, quý vị sẽ không nhận được lựa chọn ưu tiên đó nhưng sẽ không bị phạt.",
     "bePreparedIfChosen": "Nếu đơn ghi danh của quý vị được chọn, hãy chuẩn bị để điền vào mẫu đơn chi tiết hơn và cung cấp các tài liệu hỗ trợ cần thiết."
+  },
+  "listingFilters": {
+    "zipCode": "Mã Bưu Chính",
+    "zipCodeDescription": "Nhập mã zip"
   }
 }
diff --git a/ui-components/src/locales/zh.json b/ui-components/src/locales/zh.json
@@ -389,6 +389,7 @@
     "cityError": "請輸入城市名稱",
     "stateError": "請輸入州名",
     "zipCodeError": "請輸入郵遞區號",
+    "multipleZipCodeError": "请输入一个或多个以逗号分隔的邮政编码",
     "errorsToResolve": "出現一些錯誤；您需要解決問題才能繼續操作。",
     "numberError": "請輸入一個大於 0 的有效數字。",
     "selectAllThatApply": "請選擇所有適用項目。",
@@ -746,5 +747,9 @@
     "applicantsWillBeContacted": "物業經紀人將按排名次序聯絡申請人，直到沒有空缺為止。",
     "allInfoWillBeVerified": "您提供的所有資料都會受到查證，以確定您的資格。如果您作出任何不實陳述，則您的申請會從候補名單被刪除。如果我們無法證實您要求的住房優先權，您將不會獲得該優先權，但不會受到其他處罰。",
     "bePreparedIfChosen": "若您的申請被選中，請準備填寫一份更加詳盡的申請表，並提供所需的證明文件。"
+  },
+  "listingFilters": {
+    "zipCode": "邮政编码",
+    "zipCodeDescription": "输入邮政编号"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3655,6 +3655,9 @@ export interface ListingFilterParams { @@
       /**  */
       bedrooms?: number
+      /**  */
+      zipcode?: string
     }
     export interface PreferenceLink {
@@ Expand Down @@