From 83f3a7aaf90aac8bc183c01cd2e4ba3b8bd54023 Mon Sep 17 00:00:00 2001
From: Will Lin <wrl@google.com>
Date: Fri, 13 Aug 2021 11:48:01 -0400
Subject: [PATCH 1/5] Working filters, but validation doesn't show error
 message.

---
 backend/core/src/listings/dto/listing.dto.ts | 10 ++++-
 backend/core/types/src/backend-swagger.ts    |  3 ++
 sites/public/pages/listings.tsx              | 44 +++++++++++++++-----
 ui-components/src/locales/general.json       |  5 ++-
 4 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/backend/core/src/listings/dto/listing.dto.ts b/backend/core/src/listings/dto/listing.dto.ts
index 96d6171e96..30ab9483d6 100644
--- 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
index 7be5b320a2..00f4940338 100644
--- 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
index a8651e195d..01770292e0 100644
--- a/sites/public/pages/listings.tsx
+++ b/sites/public/pages/listings.tsx
@@ -14,8 +14,9 @@ import {
   encodeToFrontendFilterString,
   decodeFiltersFromFrontendUrl,
   LinkButton,
+  Field,
 } from "@bloom-housing/ui-components"
-import { useForm } from "react-hook-form"
+import { FieldErrors, useForm } from "react-hook-form"
 import Layout from "../layouts/application"
 import { MetaTags } from "../src/MetaTags"
 import React, { useEffect, useState } from "react"
@@ -83,8 +84,14 @@ const ListingsPage = () => {
 
   /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { handleSubmit, register } = useForm()
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm()
   const onSubmit = (data: ListingFilterParams) => {
+    console.log(data)
+    console.log(errors)
     setFilterModalVisible(false)
     setQueryString(/*page=*/ 1, data)
   }
@@ -114,6 +121,30 @@ 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={{
+                minLength: 5,
+                pattern: /[0-9 ,]*/,
+              }}
+              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 +161,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/general.json b/ui-components/src/locales/general.json
index 6cd5d2c405..ca3c16c1f7 100644
--- 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 zipcodes",
     "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": {

From c63beaed939bc9d83ac66956f6e6a446668dca38 Mon Sep 17 00:00:00 2001
From: Will Lin <wrl@google.com>
Date: Wed, 18 Aug 2021 09:58:51 -0400
Subject: [PATCH 2/5] Add in translations for new strings.

---
 sites/public/pages/listings.tsx        | 6 +-----
 ui-components/src/locales/ar.json      | 5 ++++-
 ui-components/src/locales/bn.json      | 5 ++++-
 ui-components/src/locales/es.json      | 5 ++++-
 ui-components/src/locales/general.json | 2 +-
 ui-components/src/locales/vi.json      | 5 +++++
 ui-components/src/locales/zh.json      | 5 +++++
 7 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/sites/public/pages/listings.tsx b/sites/public/pages/listings.tsx
index 01770292e0..53c07fccbb 100644
--- a/sites/public/pages/listings.tsx
+++ b/sites/public/pages/listings.tsx
@@ -84,11 +84,7 @@ const ListingsPage = () => {
 
   /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const {
-    handleSubmit,
-    register,
-    formState: { errors },
-  } = useForm()
+  const { handleSubmit, register, errors } = useForm()
   const onSubmit = (data: ListingFilterParams) => {
     console.log(data)
     console.log(errors)
diff --git a/ui-components/src/locales/ar.json b/ui-components/src/locales/ar.json
index f6156d08e6..0debc33691 100644
--- 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
index 3134893fd6..f91aea087a 100644
--- 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
index b5343518cb..3953daa202 100644
--- 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
index ca3c16c1f7..8b4748c45d 100644
--- a/ui-components/src/locales/general.json
+++ b/ui-components/src/locales/general.json
@@ -669,7 +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 zipcodes",
+    "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.",
diff --git a/ui-components/src/locales/vi.json b/ui-components/src/locales/vi.json
index 5a725e9e1e..62be235865 100644
--- 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
index 8a465b5bd9..354bba6631 100644
--- 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": "输入邮政编号"
   }
 }

From f1fa2e45a9b447fbc272e8988af0b49f393d038e Mon Sep 17 00:00:00 2001
From: Will Lin <wrl@google.com>
Date: Wed, 18 Aug 2021 13:26:45 -0400
Subject: [PATCH 3/5] Edit CHANGELOG.

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4735492eb1..8569fdcafa 100644
--- 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
 

From 097415d3fa35e385b6746a65cece20e9374ab56b Mon Sep 17 00:00:00 2001
From: Will Lin <wrl@google.com>
Date: Thu, 19 Aug 2021 08:52:21 -0400
Subject: [PATCH 4/5] Change the validation to use a method.

---
 sites/public/pages/listings.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/sites/public/pages/listings.tsx b/sites/public/pages/listings.tsx
index 53c07fccbb..7671f542de 100644
--- a/sites/public/pages/listings.tsx
+++ b/sites/public/pages/listings.tsx
@@ -16,7 +16,7 @@ import {
   LinkButton,
   Field,
 } from "@bloom-housing/ui-components"
-import { FieldErrors, useForm } from "react-hook-form"
+import { useForm } from "react-hook-form"
 import Layout from "../layouts/application"
 import { MetaTags } from "../src/MetaTags"
 import React, { useEffect, useState } from "react"
@@ -24,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()
 
@@ -125,8 +135,7 @@ const ListingsPage = () => {
               controlClassName="control"
               placeholder={t("listingFilters.zipCodeDescription")}
               validation={{
-                minLength: 5,
-                pattern: /[0-9 ,]*/,
+                validate: (value) => isValidZipCode(value),
               }}
               error={errors.zipCodeField}
               errorMessage={t("errors.multipleZipCodeError")}

From ffdf09e1fe646621abe1480f9f066b0ae64bf605 Mon Sep 17 00:00:00 2001
From: Will Lin <wrl@google.com>
Date: Thu, 19 Aug 2021 09:07:49 -0400
Subject: [PATCH 5/5] Remove debugging console logs.

---
 sites/public/pages/listings.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/sites/public/pages/listings.tsx b/sites/public/pages/listings.tsx
index 7671f542de..c5421a5325 100644
--- a/sites/public/pages/listings.tsx
+++ b/sites/public/pages/listings.tsx
@@ -96,8 +96,6 @@ const ListingsPage = () => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { handleSubmit, register, errors } = useForm()
   const onSubmit = (data: ListingFilterParams) => {
-    console.log(data)
-    console.log(errors)
     setFilterModalVisible(false)
     setQueryString(/*page=*/ 1, data)
   }