From efc57417433b438f09cd16882f7a3e57cab488ca Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emijablonski@gmail.com>
Date: Mon, 13 Jan 2025 15:29:49 -0700
Subject: [PATCH 1/4] feat: new empty state for additional map markers

---
 .../components/listings/ListingsCombined.tsx  | 166 ++++++++++--------
 .../src/components/listings/ListingsList.tsx  |  35 +++-
 .../src/components/listings/ListingsMap.tsx   |  57 +++---
 .../src/components/listings/MapClusterer.tsx  |   4 +
 4 files changed, 150 insertions(+), 112 deletions(-)

diff --git a/sites/public/src/components/listings/ListingsCombined.tsx b/sites/public/src/components/listings/ListingsCombined.tsx
index ee3da67ff0..fe50f3f0fe 100644
--- a/sites/public/src/components/listings/ListingsCombined.tsx
+++ b/sites/public/src/components/listings/ListingsCombined.tsx
@@ -1,4 +1,6 @@
 import React from "react"
+import { APIProvider } from "@vis.gl/react-google-maps"
+import { useJsApiLoader } from "@react-google-maps/api"
 import { Listing, ListingMapMarker } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import CustomSiteFooter from "../shared/CustomSiteFooter"
 import { ListingsMap, MapMarkerData } from "./ListingsMap"
@@ -33,6 +35,12 @@ type ListingsCombinedProps = {
 }
 
 const ListingsCombined = (props: ListingsCombinedProps) => {
+  const { isLoaded } = useJsApiLoader({
+    googleMapsApiKey: props.googleMapsApiKey,
+  })
+
+  if (!isLoaded) return <></>
+
   const getListLoading = () => {
     if (!props.googleMapsApiKey || !props.googleMapsMapId || !props.loading) return false
     return true
@@ -40,83 +48,56 @@ const ListingsCombined = (props: ListingsCombinedProps) => {
 
   const getListingsList = () => {
     return (
-      <div className={styles["listings-combined"]}>
-        <ListingsSearchMetadata
-          loading={props.loading}
-          setModalOpen={props.setModalOpen}
-          filterCount={props.filterCount}
-          searchResults={props.searchResults}
-          setListView={props.setListView}
-          listView={props.listView}
-        />
-        <div
-          className={`${styles["listings-map-list-container"]} ${styles["listings-map-list-container-list-only"]}`}
-        >
-          <div id="listings-list-expanded" className={styles["listings-list-expanded"]}>
-            <ListingsList
-              listings={props.searchResults.listings}
-              currentPage={props.searchResults.currentPage}
-              lastPage={props.searchResults.lastPage}
-              onPageChange={props.onPageChange}
-              loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)}
-            />
-          </div>
-          <div>
-            <CustomSiteFooter />
+      <APIProvider apiKey={props.googleMapsApiKey}>
+        <div className={styles["listings-combined"]}>
+          <ListingsSearchMetadata
+            loading={props.loading}
+            setModalOpen={props.setModalOpen}
+            filterCount={props.filterCount}
+            searchResults={props.searchResults}
+            setListView={props.setListView}
+            listView={props.listView}
+          />
+          <div
+            className={`${styles["listings-map-list-container"]} ${styles["listings-map-list-container-list-only"]}`}
+          >
+            <div id="listings-list-expanded" className={styles["listings-list-expanded"]}>
+              <ListingsList
+                listings={props.searchResults.listings}
+                currentPage={props.searchResults.currentPage}
+                lastPage={props.searchResults.lastPage}
+                onPageChange={props.onPageChange}
+                loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)}
+                mapMarkers={props.markers}
+              />
+            </div>
+            <div>
+              <CustomSiteFooter />
+            </div>
           </div>
         </div>
-      </div>
+      </APIProvider>
     )
   }
 
   const getListingsMap = () => {
     return (
-      <div className={styles["listings-combined"]}>
-        <ListingsSearchMetadata
-          loading={props.loading}
-          setModalOpen={props.setModalOpen}
-          filterCount={props.filterCount}
-          searchResults={props.searchResults}
-          setListView={props.setListView}
-          listView={props.listView}
-        />
-        <div className={styles["listings-map-expanded"]}>
-          <ListingsMap
-            listings={props.markers}
-            googleMapsApiKey={props.googleMapsApiKey}
-            googleMapsMapId={props.googleMapsMapId}
-            isMapExpanded={true}
-            setVisibleMarkers={props.setVisibleMarkers}
-            visibleMarkers={props.visibleMarkers}
-            setIsLoading={props.setIsLoading}
-            searchFilter={props.searchFilter}
-            isFirstBoundsLoad={props.isFirstBoundsLoad}
-            setIsFirstBoundsLoad={props.setIsFirstBoundsLoad}
-            isDesktop={props.isDesktop}
+      <APIProvider apiKey={props.googleMapsApiKey}>
+        <div className={styles["listings-combined"]}>
+          <ListingsSearchMetadata
+            loading={props.loading}
+            setModalOpen={props.setModalOpen}
+            filterCount={props.filterCount}
+            searchResults={props.searchResults}
+            setListView={props.setListView}
+            listView={props.listView}
           />
-        </div>
-      </div>
-    )
-  }
-
-  const getListingsCombined = () => {
-    return (
-      <div className={styles["listings-combined"]}>
-        <ListingsSearchMetadata
-          loading={props.loading}
-          setModalOpen={props.setModalOpen}
-          filterCount={props.filterCount}
-          searchResults={props.searchResults}
-          setListView={props.setListView}
-          listView={props.listView}
-        />
-        <div className={styles["listings-map-list-container"]}>
-          <div className={styles["listings-map"]}>
+          <div className={styles["listings-map-expanded"]}>
             <ListingsMap
               listings={props.markers}
               googleMapsApiKey={props.googleMapsApiKey}
               googleMapsMapId={props.googleMapsMapId}
-              isMapExpanded={false}
+              isMapExpanded={true}
               setVisibleMarkers={props.setVisibleMarkers}
               visibleMarkers={props.visibleMarkers}
               setIsLoading={props.setIsLoading}
@@ -126,20 +107,55 @@ const ListingsCombined = (props: ListingsCombinedProps) => {
               isDesktop={props.isDesktop}
             />
           </div>
-          <div id="listings-outer-container" className={styles["listings-outer-container"]}>
-            <div id="listings-list" className={styles["listings-list"]}>
-              <ListingsList
-                listings={props.searchResults.listings}
-                currentPage={props.searchResults.currentPage}
-                lastPage={props.searchResults.lastPage}
-                loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)}
-                onPageChange={props.onPageChange}
+        </div>
+      </APIProvider>
+    )
+  }
+
+  const getListingsCombined = () => {
+    return (
+      <APIProvider apiKey={props.googleMapsApiKey}>
+        <div className={styles["listings-combined"]}>
+          <ListingsSearchMetadata
+            loading={props.loading}
+            setModalOpen={props.setModalOpen}
+            filterCount={props.filterCount}
+            searchResults={props.searchResults}
+            setListView={props.setListView}
+            listView={props.listView}
+          />
+          <div className={styles["listings-map-list-container"]}>
+            <div className={styles["listings-map"]}>
+              <ListingsMap
+                listings={props.markers}
+                googleMapsApiKey={props.googleMapsApiKey}
+                googleMapsMapId={props.googleMapsMapId}
+                isMapExpanded={false}
+                setVisibleMarkers={props.setVisibleMarkers}
+                visibleMarkers={props.visibleMarkers}
+                setIsLoading={props.setIsLoading}
+                searchFilter={props.searchFilter}
+                isFirstBoundsLoad={props.isFirstBoundsLoad}
+                setIsFirstBoundsLoad={props.setIsFirstBoundsLoad}
+                isDesktop={props.isDesktop}
               />
-              <CustomSiteFooter />
+            </div>
+            <div id="listings-outer-container" className={styles["listings-outer-container"]}>
+              <div id="listings-list" className={styles["listings-list"]}>
+                <ListingsList
+                  listings={props.searchResults.listings}
+                  currentPage={props.searchResults.currentPage}
+                  lastPage={props.searchResults.lastPage}
+                  loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)}
+                  onPageChange={props.onPageChange}
+                  mapMarkers={props.markers}
+                />
+                <CustomSiteFooter />
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </APIProvider>
     )
   }
 
diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx
index 07be2e2566..26e4e23196 100644
--- a/sites/public/src/components/listings/ListingsList.tsx
+++ b/sites/public/src/components/listings/ListingsList.tsx
@@ -1,9 +1,10 @@
 import * as React from "react"
-import { Listing } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
-import { Heading } from "@bloom-housing/ui-seeds"
+import { useMap } from "@vis.gl/react-google-maps"
+import { Listing, ListingMapMarker } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import { Heading, Button } from "@bloom-housing/ui-seeds"
 import { ZeroListingsItem } from "@bloom-housing/doorway-ui-components"
 import { LoadingOverlay, t, InfoCard, LinkButton } from "@bloom-housing/ui-components"
-import { getListings } from "../../lib/helpers"
+import { getBoundsZoomLevel, getListings } from "../../lib/helpers"
 import { Pagination } from "./Pagination"
 import styles from "./ListingsCombined.module.scss"
 
@@ -13,9 +14,14 @@ type ListingsListProps = {
   lastPage: number
   onPageChange: (page: number) => void
   loading: boolean
+  mapMarkers: ListingMapMarker[] | null
 }
 
 const ListingsList = (props: ListingsListProps) => {
+  const map = useMap()
+
+  if (!map) return null
+
   const listingsDiv = (
     <div id="listingsList">
       <Heading className={"sr-only"} priority={2}>
@@ -25,7 +31,28 @@ const ListingsList = (props: ListingsListProps) => {
         <div className={styles["listings-list-container"]}>{getListings(props.listings)}</div>
       ) : (
         <ZeroListingsItem title={t("t.noMatchingListings")} description={t("t.tryRemovingFilters")}>
-          {/* <Button>{t("t.clearAllFilters")}</Button> */}
+          {props.mapMarkers.length > 0 && (
+            <Button
+              onClick={() => {
+                const bounds = new window.google.maps.LatLngBounds()
+
+                if (!map) return
+                props.mapMarkers?.map((marker) => {
+                  bounds.extend({
+                    lat: marker.lat,
+                    lng: marker.lng,
+                  })
+                })
+                map.fitBounds(bounds, document.getElementById("listings-map").clientWidth * 0.05)
+                if (props.mapMarkers.length === 1) {
+                  const zoomLevel = getBoundsZoomLevel(bounds)
+                  map.setZoom(zoomLevel - 7)
+                }
+              }}
+            >
+              Zoom out to more listings
+            </Button>
+          )}
         </ZeroListingsItem>
       )}
     </div>
diff --git a/sites/public/src/components/listings/ListingsMap.tsx b/sites/public/src/components/listings/ListingsMap.tsx
index 3c2c5c3be2..a10444da63 100644
--- a/sites/public/src/components/listings/ListingsMap.tsx
+++ b/sites/public/src/components/listings/ListingsMap.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react"
-import { APIProvider, Map } from "@vis.gl/react-google-maps"
-import { useJsApiLoader } from "@react-google-maps/api"
+import { Map } from "@vis.gl/react-google-maps"
 import { Heading } from "@bloom-housing/ui-seeds"
 import { t } from "@bloom-housing/ui-components"
 import { ListingMapMarker } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
@@ -60,16 +59,10 @@ const getMarkers = (listings: ListingMapMarker[]) => {
 }
 
 const ListingsMap = (props: ListingsMapProps) => {
-  const { isLoaded } = useJsApiLoader({
-    googleMapsApiKey: props.googleMapsApiKey,
-  })
-
   const [infoWindowIndex, setInfoWindowIndex] = useState<number>(null)
 
   const markers: MapMarkerData[] | null = getMarkers(props.listings)
 
-  if (!isLoaded) return <></>
-
   return (
     <div id={"listings-map"} className={styles["listings-map"]}>
       <a className={styles["listings-map-skip-link"]} href={`#listingsList`}>
@@ -78,31 +71,29 @@ const ListingsMap = (props: ListingsMapProps) => {
       <Heading className={"sr-only"} priority={2}>
         {t("t.listingsMap")}
       </Heading>
-      <APIProvider apiKey={props.googleMapsApiKey}>
-        <Map
-          mapId={props.googleMapsMapId}
-          style={containerStyle}
-          gestureHandling={"greedy"}
-          disableDefaultUI={true}
-          defaultZoom={defaultZoom}
-          defaultCenter={defaultCenter}
-          clickableIcons={false}
-        >
-          <MapControl />
-          <MapClusterer
-            mapMarkers={markers}
-            infoWindowIndex={infoWindowIndex}
-            setInfoWindowIndex={setInfoWindowIndex}
-            setVisibleMarkers={props.setVisibleMarkers}
-            visibleMarkers={props.visibleMarkers}
-            setIsLoading={props.setIsLoading}
-            searchFilter={props.searchFilter}
-            isFirstBoundsLoad={props.isFirstBoundsLoad}
-            setIsFirstBoundsLoad={props.setIsFirstBoundsLoad}
-            isDesktop={props.isDesktop}
-          />
-        </Map>
-      </APIProvider>
+      <Map
+        mapId={props.googleMapsMapId}
+        style={containerStyle}
+        gestureHandling={"greedy"}
+        disableDefaultUI={true}
+        defaultZoom={defaultZoom}
+        defaultCenter={defaultCenter}
+        clickableIcons={false}
+      >
+        <MapControl />
+        <MapClusterer
+          mapMarkers={markers}
+          infoWindowIndex={infoWindowIndex}
+          setInfoWindowIndex={setInfoWindowIndex}
+          setVisibleMarkers={props.setVisibleMarkers}
+          visibleMarkers={props.visibleMarkers}
+          setIsLoading={props.setIsLoading}
+          searchFilter={props.searchFilter}
+          isFirstBoundsLoad={props.isFirstBoundsLoad}
+          setIsFirstBoundsLoad={props.setIsFirstBoundsLoad}
+          isDesktop={props.isDesktop}
+        />
+      </Map>
     </div>
   )
 }
diff --git a/sites/public/src/components/listings/MapClusterer.tsx b/sites/public/src/components/listings/MapClusterer.tsx
index 39a2ef3c1d..8d7f9a6f96 100644
--- a/sites/public/src/components/listings/MapClusterer.tsx
+++ b/sites/public/src/components/listings/MapClusterer.tsx
@@ -186,6 +186,10 @@ export const MapClusterer = ({
       return
     } else {
       map.fitBounds(bounds, document.getElementById("listings-map").clientWidth * 0.05)
+      if (visibleMarkers.length === 1) {
+        const zoomLevel = getBoundsZoomLevel(bounds)
+        map.setZoom(zoomLevel - 7)
+      }
       setTimeout(() => {
         setIsFirstBoundsLoad(false)
       }, 1000)

From 924fd0fce2dd09c6993e41f70f74ce5b68736f17 Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emijablonski@gmail.com>
Date: Wed, 15 Jan 2025 15:57:16 -0700
Subject: [PATCH 2/4] fix: copy

---
 shared-helpers/src/locales/es.json                    |  5 ++++-
 shared-helpers/src/locales/general.json               |  5 ++++-
 shared-helpers/src/locales/tl.json                    |  5 ++++-
 shared-helpers/src/locales/vi.json                    |  5 ++++-
 shared-helpers/src/locales/zh.json                    |  5 ++++-
 sites/public/src/components/listings/ListingsList.tsx | 10 +++++++---
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/shared-helpers/src/locales/es.json b/shared-helpers/src/locales/es.json
index 1ef9b975f0..7b7281a192 100644
--- a/shared-helpers/src/locales/es.json
+++ b/shared-helpers/src/locales/es.json
@@ -1275,6 +1275,7 @@
   "t.next": "Siguiente",
   "t.no": "No",
   "t.noMatchingListings": "No hay ningún listado coincidente",
+  "t.noVisibleListings": "No hay anuncios visibles en esta área",
   "t.none": "Ninguno",
   "t.noneFound": "No se encontró ninguno.",
   "t.occupancy": "Ocupación",
@@ -1301,6 +1302,7 @@
   "t.range": "%{from} a %{to}",
   "t.readLess": "leer menos",
   "t.readMore": "leer más",
+  "t.recenterMap": "Vista de mapa más reciente",
   "t.relationship": "Parentezco",
   "t.rent": "Alquiler",
   "t.review": "Revisión",
@@ -1331,7 +1333,8 @@
   "t.text": "Texto",
   "t.time": "tiempo",
   "t.to": "a",
-  "t.tryRemovingFilters": "Prueba a eliminar algunos filtros o a limitar el área de búsqueda.",
+  "t.tryChangingArea": "Intente ajustar su área de búsqueda.",
+  "t.tryRemovingFilters": "Intente eliminar algunos de sus filtros.",
   "t.unit": "vivienda",
   "t.unitAmenities": "Servicios en la vivienda",
   "t.unitFeatures": "Características de la vivienda",
diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json
index d8a1005111..a47b9feaab 100644
--- a/shared-helpers/src/locales/general.json
+++ b/shared-helpers/src/locales/general.json
@@ -1228,6 +1228,7 @@
   "t.next": "Next",
   "t.no": "No",
   "t.noMatchingListings": "No matching listings",
+  "t.noVisibleListings": "No visible listings in this area",
   "t.none": "None",
   "t.noneFound": "None found.",
   "t.occupancy": "Occupancy",
@@ -1254,6 +1255,7 @@
   "t.range": "%{from} to %{to}",
   "t.readLess": "read less",
   "t.readMore": "read more",
+  "t.recenterMap": "Recenter map view",
   "t.relationship": "Relationship",
   "t.rent": "Rent",
   "t.review": "Review",
@@ -1284,7 +1286,8 @@
   "t.text": "Text",
   "t.time": "time",
   "t.to": "to",
-  "t.tryRemovingFilters": "Try removing some of your filters or adjusting your search area.",
+  "t.tryChangingArea": "Try adjusting your search area.",
+  "t.tryRemovingFilters": "Try removing some of your filters.",
   "t.unit": "unit",
   "t.unitAmenities": "Unit Amenities",
   "t.unitFeatures": "Unit Features",
diff --git a/shared-helpers/src/locales/tl.json b/shared-helpers/src/locales/tl.json
index 8a3bf900d0..8176de38b2 100644
--- a/shared-helpers/src/locales/tl.json
+++ b/shared-helpers/src/locales/tl.json
@@ -1240,6 +1240,7 @@
   "t.next": "Susunod",
   "t.no": "Hindi",
   "t.noMatchingListings": "Walang katugmang listahan",
+  "t.noVisibleListings": "Walang nakikitang listahan sa lugar na ito",
   "t.none": "Wala",
   "t.noneFound": "Walang nakita.",
   "t.occupancy": "Paninirahan",
@@ -1266,6 +1267,7 @@
   "t.range": "%{from} hanggang %{to}",
   "t.readLess": "basahin ang kaunti",
   "t.readMore": "basahin ang marami",
+  "t.recenterMap": "Recenter view ng mapa",
   "t.relationship": "Relasyon",
   "t.rent": "Renta",
   "t.review": "Review",
@@ -1296,7 +1298,8 @@
   "t.text": "Text",
   "t.time": "oras",
   "t.to": "sa",
-  "t.tryRemovingFilters": "Subukang alisin ang ilan sa iyong mga filter o ayusin ang iyong lugar ng paghahanap.",
+  "t.tryChangingArea": "Subukang ayusin ang iyong lugar sa paghahanap.",
+  "t.tryRemovingFilters": "Subukang alisin ang ilan sa iyong mga filter.",
   "t.unit": "unit",
   "t.unitAmenities": "Mga Amenity ng Unit",
   "t.unitFeatures": "Mga Feature ng Unit",
diff --git a/shared-helpers/src/locales/vi.json b/shared-helpers/src/locales/vi.json
index ac7233a752..7a635284ed 100644
--- a/shared-helpers/src/locales/vi.json
+++ b/shared-helpers/src/locales/vi.json
@@ -1278,6 +1278,7 @@
   "t.next": "Tiếp theo",
   "t.no": "Không",
   "t.noMatchingListings": "Không có tin đăng phù hợp",
+  "t.noVisibleListings": "Không có danh sách hiển thị trong khu vực này",
   "t.none": "Không",
   "t.noneFound": "Không tìm thấy.",
   "t.occupancy": "Số người cư ngụ",
@@ -1304,6 +1305,7 @@
   "t.range": "%{from} đến %{to}",
   "t.readLess": "đọc ít hơn",
   "t.readMore": "đọc nhiều hơn",
+  "t.recenterMap": "Chế độ xem bản đồ gần đây",
   "t.relationship": "Mối quan hệ",
   "t.rent": "Thuê",
   "t.review": "Xem xét",
@@ -1334,7 +1336,8 @@
   "t.text": "Tin nhắn",
   "t.time": "thời gian",
   "t.to": "đến",
-  "t.tryRemovingFilters": "Hãy thử xóa một số bộ lọc hoặc điều chỉnh khu vực tìm kiếm của bạn.",
+  "t.tryChangingArea": "Hãy thử điều chỉnh khu vực tìm kiếm của bạn.",
+  "t.tryRemovingFilters": "Hãy thử loại bỏ một số bộ lọc của bạn.",
   "t.unit": "căn nhà",
   "t.unitAmenities": "Các tiện ích của Căn nhà",
   "t.unitFeatures": "Các tính năng của Căn nhà",
diff --git a/shared-helpers/src/locales/zh.json b/shared-helpers/src/locales/zh.json
index c26f107287..6d0e906956 100644
--- a/shared-helpers/src/locales/zh.json
+++ b/shared-helpers/src/locales/zh.json
@@ -1278,6 +1278,7 @@
   "t.next": "下一頁",
   "t.no": "否",
   "t.noMatchingListings": "没有匹配的列表",
+  "t.noVisibleListings": "該區域沒有可見的列表",
   "t.none": "無",
   "t.noneFound": "找不到。",
   "t.occupancy": "入住人數",
@@ -1304,6 +1305,7 @@
   "t.range": "由 %{from} 至 %{to}",
   "t.readLess": "閱讀較少內容",
   "t.readMore": "閱讀更多內容",
+  "t.recenterMap": "最近的地圖視圖",
   "t.relationship": "關係",
   "t.rent": "租金",
   "t.review": "審查",
@@ -1334,7 +1336,8 @@
   "t.text": "簡訊",
   "t.time": "時間",
   "t.to": "至",
-  "t.tryRemovingFilters": "尝试删除一些过滤器或调整搜索区域。",
+  "t.tryChangingArea": "嘗試調整您的搜尋區域。",
+  "t.tryRemovingFilters": "嘗試刪除一些過濾器。",
   "t.unit": "單位",
   "t.unitAmenities": "單位設施",
   "t.unitFeatures": "單位特點",
diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx
index 26e4e23196..a26c883d1a 100644
--- a/sites/public/src/components/listings/ListingsList.tsx
+++ b/sites/public/src/components/listings/ListingsList.tsx
@@ -22,6 +22,7 @@ const ListingsList = (props: ListingsListProps) => {
 
   if (!map) return null
 
+  const moreMarkersOnMap = props.mapMarkers.length > 0
   const listingsDiv = (
     <div id="listingsList">
       <Heading className={"sr-only"} priority={2}>
@@ -30,8 +31,11 @@ const ListingsList = (props: ListingsListProps) => {
       {props.listings.length > 0 || props.loading ? (
         <div className={styles["listings-list-container"]}>{getListings(props.listings)}</div>
       ) : (
-        <ZeroListingsItem title={t("t.noMatchingListings")} description={t("t.tryRemovingFilters")}>
-          {props.mapMarkers.length > 0 && (
+        <ZeroListingsItem
+          title={moreMarkersOnMap ? t("t.noVisibleListings") : t("t.noMatchingListings")}
+          description={moreMarkersOnMap ? t("t.tryChangingArea") : t("t.tryRemovingFilters")}
+        >
+          {moreMarkersOnMap && (
             <Button
               onClick={() => {
                 const bounds = new window.google.maps.LatLngBounds()
@@ -50,7 +54,7 @@ const ListingsList = (props: ListingsListProps) => {
                 }
               }}
             >
-              Zoom out to more listings
+              {t("t.recenterMap")}
             </Button>
           )}
         </ZeroListingsItem>

From e041a8b17b4f21769863991f39cf2e96f9e3ab86 Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emijablonski@gmail.com>
Date: Wed, 15 Jan 2025 16:13:19 -0700
Subject: [PATCH 3/4] refactor: cleanup

---
 .../src/components/listings/ListingsList.tsx  | 28 ++++-----
 .../src/components/listings/MapClusterer.tsx  | 61 +++++++++++--------
 2 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx
index a26c883d1a..114defef4a 100644
--- a/sites/public/src/components/listings/ListingsList.tsx
+++ b/sites/public/src/components/listings/ListingsList.tsx
@@ -4,9 +4,10 @@ import { Listing, ListingMapMarker } from "@bloom-housing/shared-helpers/src/typ
 import { Heading, Button } from "@bloom-housing/ui-seeds"
 import { ZeroListingsItem } from "@bloom-housing/doorway-ui-components"
 import { LoadingOverlay, t, InfoCard, LinkButton } from "@bloom-housing/ui-components"
-import { getBoundsZoomLevel, getListings } from "../../lib/helpers"
+import { getListings } from "../../lib/helpers"
 import { Pagination } from "./Pagination"
 import styles from "./ListingsCombined.module.scss"
+import { fitBounds } from "./MapClusterer"
 
 type ListingsListProps = {
   listings: Listing[]
@@ -38,20 +39,17 @@ const ListingsList = (props: ListingsListProps) => {
           {moreMarkersOnMap && (
             <Button
               onClick={() => {
-                const bounds = new window.google.maps.LatLngBounds()
-
-                if (!map) return
-                props.mapMarkers?.map((marker) => {
-                  bounds.extend({
-                    lat: marker.lat,
-                    lng: marker.lng,
-                  })
-                })
-                map.fitBounds(bounds, document.getElementById("listings-map").clientWidth * 0.05)
-                if (props.mapMarkers.length === 1) {
-                  const zoomLevel = getBoundsZoomLevel(bounds)
-                  map.setZoom(zoomLevel - 7)
-                }
+                fitBounds(
+                  map,
+                  props.mapMarkers.map((marker, index) => {
+                    return {
+                      id: marker.id,
+                      key: index,
+                      coordinate: { lat: marker.lat, lng: marker.lng },
+                    }
+                  }),
+                  true
+                )
               }}
             >
               {t("t.recenterMap")}
diff --git a/sites/public/src/components/listings/MapClusterer.tsx b/sites/public/src/components/listings/MapClusterer.tsx
index 8d7f9a6f96..31b3094bb8 100644
--- a/sites/public/src/components/listings/MapClusterer.tsx
+++ b/sites/public/src/components/listings/MapClusterer.tsx
@@ -22,6 +22,36 @@ export type ListingsMapMarkersProps = {
   isDesktop: boolean
 }
 
+export const fitBounds = (
+  map: google.maps.Map,
+  mapMarkers: MapMarkerData[],
+  continueIfEmpty?: boolean
+) => {
+  const bounds = new window.google.maps.LatLngBounds()
+
+  if (!map) return
+  mapMarkers?.map((marker) => {
+    bounds.extend({
+      lat: marker.coordinate.lat,
+      lng: marker.coordinate.lng,
+    })
+  })
+
+  const visibleMarkers = mapMarkers?.filter((marker) =>
+    map.getBounds()?.contains(marker.coordinate)
+  )
+
+  if (!continueIfEmpty && visibleMarkers.length === 0) {
+    return
+  } else {
+    map.fitBounds(bounds, document.getElementById("listings-map").clientWidth * 0.05)
+    if (visibleMarkers.length === 1) {
+      const zoomLevel = getBoundsZoomLevel(bounds)
+      map.setZoom(zoomLevel - 7)
+    }
+  }
+}
+
 // Zoom in slowly by recursively setting the zoom level
 const animateZoom = (
   map: google.maps.Map,
@@ -166,34 +196,17 @@ export const MapClusterer = ({
     clusterer.clearMarkers()
     clusterer.addMarkers(Object.values(markers))
 
-    const bounds = new window.google.maps.LatLngBounds()
-
     if (!map) return
-    mapMarkers?.map((marker) => {
-      bounds.extend({
-        lat: marker.coordinate.lat,
-        lng: marker.coordinate.lng,
-      })
-    })
 
     // Only automatically size the map to fit all pins on first map load
     if (isFirstBoundsLoad === false) return
-    const visibleMarkers = mapMarkers?.filter((marker) =>
-      map.getBounds()?.contains(marker.coordinate)
-    )
-
-    if (visibleMarkers.length === 0) {
-      return
-    } else {
-      map.fitBounds(bounds, document.getElementById("listings-map").clientWidth * 0.05)
-      if (visibleMarkers.length === 1) {
-        const zoomLevel = getBoundsZoomLevel(bounds)
-        map.setZoom(zoomLevel - 7)
-      }
-      setTimeout(() => {
-        setIsFirstBoundsLoad(false)
-      }, 1000)
-    }
+
+    fitBounds(map, mapMarkers)
+
+    setTimeout(() => {
+      setIsFirstBoundsLoad(false)
+    }, 1000)
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [clusterer, markers, currentMapMarkers])
 

From de3f2faa4490411507c8abecf01c201dba384df9 Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emijablonski@gmail.com>
Date: Wed, 15 Jan 2025 16:34:51 -0700
Subject: [PATCH 4/4] fix: update copy

---
 shared-helpers/src/locales/es.json      | 2 +-
 shared-helpers/src/locales/general.json | 2 +-
 shared-helpers/src/locales/tl.json      | 2 +-
 shared-helpers/src/locales/vi.json      | 2 +-
 shared-helpers/src/locales/zh.json      | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/shared-helpers/src/locales/es.json b/shared-helpers/src/locales/es.json
index 7b7281a192..c95d5cdaeb 100644
--- a/shared-helpers/src/locales/es.json
+++ b/shared-helpers/src/locales/es.json
@@ -1275,7 +1275,7 @@
   "t.next": "Siguiente",
   "t.no": "No",
   "t.noMatchingListings": "No hay ningún listado coincidente",
-  "t.noVisibleListings": "No hay anuncios visibles en esta área",
+  "t.noVisibleListings": "No hay listados visibles",
   "t.none": "Ninguno",
   "t.noneFound": "No se encontró ninguno.",
   "t.occupancy": "Ocupación",
diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json
index a47b9feaab..6ddadf9e2f 100644
--- a/shared-helpers/src/locales/general.json
+++ b/shared-helpers/src/locales/general.json
@@ -1228,7 +1228,7 @@
   "t.next": "Next",
   "t.no": "No",
   "t.noMatchingListings": "No matching listings",
-  "t.noVisibleListings": "No visible listings in this area",
+  "t.noVisibleListings": "No visible listings",
   "t.none": "None",
   "t.noneFound": "None found.",
   "t.occupancy": "Occupancy",
diff --git a/shared-helpers/src/locales/tl.json b/shared-helpers/src/locales/tl.json
index 8176de38b2..2399691624 100644
--- a/shared-helpers/src/locales/tl.json
+++ b/shared-helpers/src/locales/tl.json
@@ -1240,7 +1240,7 @@
   "t.next": "Susunod",
   "t.no": "Hindi",
   "t.noMatchingListings": "Walang katugmang listahan",
-  "t.noVisibleListings": "Walang nakikitang listahan sa lugar na ito",
+  "t.noVisibleListings": "Walang nakikitang listahan",
   "t.none": "Wala",
   "t.noneFound": "Walang nakita.",
   "t.occupancy": "Paninirahan",
diff --git a/shared-helpers/src/locales/vi.json b/shared-helpers/src/locales/vi.json
index 7a635284ed..d11f426930 100644
--- a/shared-helpers/src/locales/vi.json
+++ b/shared-helpers/src/locales/vi.json
@@ -1278,7 +1278,7 @@
   "t.next": "Tiếp theo",
   "t.no": "Không",
   "t.noMatchingListings": "Không có tin đăng phù hợp",
-  "t.noVisibleListings": "Không có danh sách hiển thị trong khu vực này",
+  "t.noVisibleListings": "Không có danh sách hiển thị",
   "t.none": "Không",
   "t.noneFound": "Không tìm thấy.",
   "t.occupancy": "Số người cư ngụ",
diff --git a/shared-helpers/src/locales/zh.json b/shared-helpers/src/locales/zh.json
index 6d0e906956..e4c3a1a476 100644
--- a/shared-helpers/src/locales/zh.json
+++ b/shared-helpers/src/locales/zh.json
@@ -1278,7 +1278,7 @@
   "t.next": "下一頁",
   "t.no": "否",
   "t.noMatchingListings": "没有匹配的列表",
-  "t.noVisibleListings": "該區域沒有可見的列表",
+  "t.noVisibleListings": "沒有可見的列表",
   "t.none": "無",
   "t.noneFound": "找不到。",
   "t.occupancy": "入住人數",