feat: move recenter button to map (#1069)

metrotranscom · Jan 31, 2025 · 70b31bd · 70b31bd
1 parent 16399ec
commit 70b31bd
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 38 deletions.
diff --git a/shared-helpers/src/locales/es.json b/shared-helpers/src/locales/es.json
@@ -1305,7 +1305,7 @@
   "t.range": "%{from} a %{to}",
   "t.readLess": "leer menos",
   "t.readMore": "leer más",
-  "t.recenterMap": "Vista de mapa más reciente",
+  "t.recenterMap": "Recentrar",
   "t.relationship": "Parentezco",
   "t.rent": "Alquiler",
   "t.review": "Revisión",

diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json
@@ -1258,7 +1258,7 @@
   "t.range": "%{from} to %{to}",
   "t.readLess": "read less",
   "t.readMore": "read more",
-  "t.recenterMap": "Recenter map view",
+  "t.recenterMap": "Recenter",
   "t.relationship": "Relationship",
   "t.rent": "Rent",
   "t.review": "Review",

diff --git a/shared-helpers/src/locales/tl.json b/shared-helpers/src/locales/tl.json
@@ -1270,7 +1270,7 @@
   "t.range": "%{from} hanggang %{to}",
   "t.readLess": "basahin ang kaunti",
   "t.readMore": "basahin ang marami",
-  "t.recenterMap": "Recenter view ng mapa",
+  "t.recenterMap": "Recenter",
   "t.relationship": "Relasyon",
   "t.rent": "Renta",
   "t.review": "Review",

diff --git a/shared-helpers/src/locales/vi.json b/shared-helpers/src/locales/vi.json
@@ -1308,7 +1308,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.recenterMap": "Gần đây hơn",
   "t.relationship": "Mối quan hệ",
   "t.rent": "Thuê",
   "t.review": "Xem xét",

diff --git a/shared-helpers/src/locales/zh.json b/shared-helpers/src/locales/zh.json
@@ -1308,7 +1308,7 @@
   "t.range": "由 %{from} 至 %{to}",
   "t.readLess": "閱讀較少內容",
   "t.readMore": "閱讀更多內容",
-  "t.recenterMap": "最近的地圖視圖",
+  "t.recenterMap": "近期中心",
   "t.relationship": "關係",
   "t.rent": "租金",
   "t.review": "審查",

diff --git a/sites/public/src/components/listings/ListingsCombined.module.scss b/sites/public/src/components/listings/ListingsCombined.module.scss
@@ -106,6 +106,7 @@
     padding: 0;
     min-height: var(--seeds-s40);
     margin-bottom: var(--seeds-s4);
+    z-index: 1;
   }
 
   [class*="loading-overlay__spinner"] {

diff --git a/sites/public/src/components/listings/ListingsCombined.tsx b/sites/public/src/components/listings/ListingsCombined.tsx
@@ -69,7 +69,6 @@ const ListingsCombined = (props: ListingsCombinedProps) => {
                 onPageChange={props.onPageChange}
                 loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)}
                 mapMarkers={props.markers}
-                isDesktop={props.isDesktop}
               />
             </div>
             <div>
@@ -150,7 +149,6 @@ const ListingsCombined = (props: ListingsCombinedProps) => {
                   loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)}
                   onPageChange={props.onPageChange}
                   mapMarkers={props.markers}
-                  isDesktop={props.isDesktop}
                 />
                 <CustomSiteFooter />
               </div>

diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx
@@ -1,13 +1,11 @@
 import * as React from "react"
-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 { Heading } 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 { Pagination } from "./Pagination"
 import styles from "./ListingsCombined.module.scss"
-import { fitBounds } from "./MapClusterer"
 
 type ListingsListProps = {
   listings: Listing[]
@@ -16,12 +14,9 @@ type ListingsListProps = {
   onPageChange: (page: number) => void
   loading: boolean
   mapMarkers: ListingMapMarker[] | null
-  isDesktop: boolean
 }
 
 const ListingsList = (props: ListingsListProps) => {
-  const map = useMap()
-
   const moreMarkersOnMap = props.mapMarkers.length > 0
   const listingsDiv = (
     <div id="listingsList">
@@ -34,29 +29,7 @@ const ListingsList = (props: ListingsListProps) => {
         <ZeroListingsItem
           title={moreMarkersOnMap ? t("t.noVisibleListings") : t("t.noMatchingListings")}
           description={moreMarkersOnMap ? t("t.tryChangingArea") : t("t.tryRemovingFilters")}
-        >
-          {props.isDesktop && moreMarkersOnMap && (
-            <Button
-              onClick={() => {
-                if (map) {
-                  fitBounds(
-                    map,
-                    props.mapMarkers.map((marker, index) => {
-                      return {
-                        id: marker.id,
-                        key: index,
-                        coordinate: { lat: marker.lat, lng: marker.lng },
-                      }
-                    }),
-                    true
-                  )
-                }
-              }}
-            >
-              {t("t.recenterMap")}
-            </Button>
-          )}
-        </ZeroListingsItem>
+        />
       )}
     </div>
   )

diff --git a/sites/public/src/components/listings/ListingsMap.tsx b/sites/public/src/components/listings/ListingsMap.tsx
@@ -7,6 +7,7 @@ import { MapControl } from "../shared/MapControl"
 import { MapClusterer } from "./MapClusterer"
 import styles from "./ListingsCombined.module.scss"
 import { ListingSearchParams } from "../../lib/listings/search"
+import { MapRecenter } from "../shared/MapRecenter"
 
 const defaultCenter = {
   lat: 37.579795,
@@ -81,6 +82,7 @@ const ListingsMap = (props: ListingsMapProps) => {
         clickableIcons={false}
       >
         <MapControl />
+        <MapRecenter mapMarkers={props.listings} visibleMapMarkers={props.visibleMarkers?.length} />
         <MapClusterer
           mapMarkers={markers}
           infoWindowIndex={infoWindowIndex}

diff --git a/sites/public/src/components/shared/MapControl.module.scss b/sites/public/src/components/shared/MapControl.module.scss
@@ -7,8 +7,8 @@
   display: flex;
   flex-direction: column;
   position: absolute;
-  top: var(--bloom-s8);
-  left: var(--bloom-s8);
+  top: var(--seeds-s4);
+  left: var(--seeds-s4);
 
   .control-style {
     background-color: rgba(255, 255, 255, 0.85);

diff --git a/sites/public/src/components/shared/MapRecenter.module.scss b/sites/public/src/components/shared/MapRecenter.module.scss
@@ -0,0 +1,5 @@
+.map-recenter {
+  position: absolute;
+  top: var(--seeds-s4);
+  right: var(--seeds-s4);
+}
diff --git a/sites/public/src/components/shared/MapRecenter.tsx b/sites/public/src/components/shared/MapRecenter.tsx
@@ -0,0 +1,48 @@
+import React from "react"
+import { useMap } from "@vis.gl/react-google-maps"
+import { ListingMapMarker } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import { Button } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+import { fitBounds } from "../listings/MapClusterer"
+import styles from "./MapRecenter.module.scss"
+
+type MapRecenterProps = {
+  visibleMapMarkers: number
+  mapMarkers: ListingMapMarker[] | null
+}
+
+const MapRecenter = (props: MapRecenterProps) => {
+  const map = useMap()
+
+  if (
+    !map ||
+    props.visibleMapMarkers === undefined ||
+    props.visibleMapMarkers === props.mapMarkers.length
+  )
+    return null
+
+  return (
+    <div className={styles["map-recenter"]}>
+      <Button
+        onClick={() => {
+          fitBounds(
+            map,
+            props.mapMarkers.map((marker, index) => {
+              return {
+                id: marker.id,
+                key: index,
+                coordinate: { lat: marker.lat, lng: marker.lng },
+              }
+            }),
+            true
+          )
+        }}
+        size={"sm"}
+      >
+        {t("t.recenterMap")}
+      </Button>
+    </div>
+  )
+}
+
+export { MapRecenter as default, MapRecenter }
diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss
@@ -263,6 +263,7 @@
     &[data-variant="secondary"] {
       color: var(--doorway-color-blue-1300);
     }
+    line-height: normal;
   }
 
   .alert-box {