feat: new empty state for additional map markers

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",

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",

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",

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à",

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": "單位特點",

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,90 +35,69 @@ 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
   }
 
   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>
     )
   }