From dfac280600f67f84fbc0e50fcc8daddbf6ffc75c Mon Sep 17 00:00:00 2001 From: Emily Jablonski Date: Thu, 30 Jan 2025 18:20:32 -0700 Subject: [PATCH 1/5] fix: wait for map load --- .../listings/ListingsCombined.module.scss | 1 + .../components/listings/ListingsCombined.tsx | 161 +++++++++--------- .../src/components/listings/ListingsList.tsx | 14 +- .../src/components/listings/MapClusterer.tsx | 12 +- .../search/ListingsSearchCombined.tsx | 20 ++- .../src/components/shared/MapRecenter.tsx | 1 + sites/public/src/pages/listings.tsx | 19 ++- 7 files changed, 126 insertions(+), 102 deletions(-) diff --git a/sites/public/src/components/listings/ListingsCombined.module.scss b/sites/public/src/components/listings/ListingsCombined.module.scss index b20889be6d..31cc928e66 100644 --- a/sites/public/src/components/listings/ListingsCombined.module.scss +++ b/sites/public/src/components/listings/ListingsCombined.module.scss @@ -111,6 +111,7 @@ [class*="loading-overlay__spinner"] { top: var(--seeds-s20); + color: var(--seeds-color-primary); } } diff --git a/sites/public/src/components/listings/ListingsCombined.tsx b/sites/public/src/components/listings/ListingsCombined.tsx index fe50f3f0fe..dbb5ad4064 100644 --- a/sites/public/src/components/listings/ListingsCombined.tsx +++ b/sites/public/src/components/listings/ListingsCombined.tsx @@ -1,5 +1,4 @@ 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" @@ -48,56 +47,85 @@ const ListingsCombined = (props: ListingsCombinedProps) => { const getListingsList = () => { return ( - -
- -
-
- -
-
- -
+
+ +
+
+ +
+
+
- +
) } const getListingsMap = () => { return ( - -
- + +
+ -
+
+
+ ) + } + + const getListingsCombined = () => { + return ( +
+ +
+
{ isDesktop={props.isDesktop} />
-
- - ) - } - - const getListingsCombined = () => { - return ( - -
- -
-
- +
+ -
-
-
- - -
+
- +
) } diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx index cddbe9306f..e0bffc6de5 100644 --- a/sites/public/src/components/listings/ListingsList.tsx +++ b/sites/public/src/components/listings/ListingsList.tsx @@ -6,6 +6,7 @@ import { LoadingOverlay, t, InfoCard, LinkButton } from "@bloom-housing/ui-compo import { getListings } from "../../lib/helpers" import { Pagination } from "./Pagination" import styles from "./ListingsCombined.module.scss" +import { MapMarkerData } from "./ListingsMap" type ListingsListProps = { listings: Listing[] @@ -14,6 +15,7 @@ type ListingsListProps = { onPageChange: (page: number) => void loading: boolean mapMarkers: ListingMapMarker[] | null + visibleMarkers: MapMarkerData[] } const ListingsList = (props: ListingsListProps) => { @@ -23,12 +25,18 @@ const ListingsList = (props: ListingsListProps) => { {t("t.listingsList")} - {props.listings.length > 0 || props.loading ? ( + {props.listings.length > 0 || props.loading || props.visibleMarkers.length > 0 ? (
{getListings(props.listings)}
) : ( )}
diff --git a/sites/public/src/components/listings/MapClusterer.tsx b/sites/public/src/components/listings/MapClusterer.tsx index 5b62e03c94..9331fe56b3 100644 --- a/sites/public/src/components/listings/MapClusterer.tsx +++ b/sites/public/src/components/listings/MapClusterer.tsx @@ -25,7 +25,8 @@ export type ListingsMapMarkersProps = { export const fitBounds = ( map: google.maps.Map, mapMarkers: MapMarkerData[], - continueIfEmpty?: boolean + continueIfEmpty?: boolean, + setIsFirstBoundsLoad?: React.Dispatch> ) => { const bounds = new window.google.maps.LatLngBounds() @@ -50,6 +51,9 @@ export const fitBounds = ( map.setZoom(zoomLevel - 7) } } + if (setIsFirstBoundsLoad) { + setIsFirstBoundsLoad(false) + } } // Zoom in slowly by recursively setting the zoom level @@ -203,11 +207,7 @@ export const MapClusterer = ({ // Only automatically size the map to fit all pins on first map load if (isFirstBoundsLoad === false) return - fitBounds(map, mapMarkers) - - setTimeout(() => { - setIsFirstBoundsLoad(false) - }, 1000) + fitBounds(map, mapMarkers, false, setIsFirstBoundsLoad) // eslint-disable-next-line react-hooks/exhaustive-deps }, [clusterer, markers, currentMapMarkers]) diff --git a/sites/public/src/components/listings/search/ListingsSearchCombined.tsx b/sites/public/src/components/listings/search/ListingsSearchCombined.tsx index d94a38c86c..7b7cbd42a2 100644 --- a/sites/public/src/components/listings/search/ListingsSearchCombined.tsx +++ b/sites/public/src/components/listings/search/ListingsSearchCombined.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext } from "react" -import { UserStatus } from "../../../lib/constants" +import { useMap } from "@vis.gl/react-google-maps" import { ListingList, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" import { t } from "@bloom-housing/ui-components" import { @@ -7,6 +7,7 @@ import { generateSearchQuery, parseSearchString, } from "../../../lib/listings/search" +import { UserStatus } from "../../../lib/constants" import { searchListings, searchMapMarkers } from "../../../lib/listings/listing-service" import styles from "./ListingsSearch.module.scss" import { ListingsCombined } from "../ListingsCombined" @@ -75,8 +76,18 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) { // This can be changed later if needed const pageSize = 25 + const map = useMap() + const search = async (page: number, changingFilter?: boolean) => { // If a user pans over empty space, reset the listings to empty instead of refetching + + const oldMarkersSearch = JSON.stringify( + currentMarkers?.sort((a, b) => a.coordinate.lat - b.coordinate.lat) + ) + const newMarkersSearch = JSON.stringify( + visibleMarkers?.sort((a, b) => a.coordinate.lat - b.coordinate.lat) + ) + if (visibleMarkers?.length === 0 && !changingFilter) { setSearchResults({ listings: [], @@ -106,6 +117,8 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) { // Don't search the listings if the filter is changing - first search the markers, which will update the listings if ( (!isFirstBoundsLoad && + !!map && + oldMarkersSearch !== newMarkersSearch && !changingFilter && (isDesktop || listView) && !(visibleMarkers?.length === 0 && changingFilter)) || @@ -144,7 +157,9 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) { }) // On desktop, keep list loading set to true until map is finished with its first load - if (!isFirstBoundsLoad || !isDesktop) setIsLoading(false) + if ((!isFirstBoundsLoad && newMarkersSearch !== undefined && !changingFilter) || !isDesktop) { + setIsLoading(false) + } document.getElementById("listings-outer-container")?.scrollTo(0, 0) document.getElementById("listings-list")?.scrollTo(0, 0) @@ -233,6 +248,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) { }, [isFirstBoundsLoad]) const onFormSubmit = (params: ListingSearchParams) => { + setIsLoading(true) setSearchFilter(params) } diff --git a/sites/public/src/components/shared/MapRecenter.tsx b/sites/public/src/components/shared/MapRecenter.tsx index 637d38e670..6d4ea14447 100644 --- a/sites/public/src/components/shared/MapRecenter.tsx +++ b/sites/public/src/components/shared/MapRecenter.tsx @@ -38,6 +38,7 @@ const MapRecenter = (props: MapRecenterProps) => { ) }} size={"sm"} + variant={"primary-outlined"} > {t("t.recenterMap")} diff --git a/sites/public/src/pages/listings.tsx b/sites/public/src/pages/listings.tsx index 956b08bede..99a09ab451 100644 --- a/sites/public/src/pages/listings.tsx +++ b/sites/public/src/pages/listings.tsx @@ -1,5 +1,6 @@ import React from "react" import Head from "next/head" +import { APIProvider } from "@vis.gl/react-google-maps" import { Heading } from "@bloom-housing/ui-seeds" import { t } from "@bloom-housing/ui-components" import { MetaTags } from "../components/shared/MetaTags" @@ -44,14 +45,16 @@ export default function ListingsPage(props: ListingsProps) { {t("nav.listings")} {props.showAllMapPins === "TRUE" ? ( - + + + ) : ( Date: Thu, 30 Jan 2025 18:59:40 -0700 Subject: [PATCH 2/5] refactor: remove tests --- .../src/components/listings/ListingsCombined.tsx | 2 -- .../src/components/listings/ListingsList.tsx | 14 +++----------- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/sites/public/src/components/listings/ListingsCombined.tsx b/sites/public/src/components/listings/ListingsCombined.tsx index dbb5ad4064..86aa65c6de 100644 --- a/sites/public/src/components/listings/ListingsCombined.tsx +++ b/sites/public/src/components/listings/ListingsCombined.tsx @@ -67,7 +67,6 @@ const ListingsCombined = (props: ListingsCombinedProps) => { onPageChange={props.onPageChange} loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)} mapMarkers={props.markers} - visibleMarkers={props.visibleMarkers} />
@@ -144,7 +143,6 @@ const ListingsCombined = (props: ListingsCombinedProps) => { loading={getListLoading() || (props.isFirstBoundsLoad && props.isDesktop)} onPageChange={props.onPageChange} mapMarkers={props.markers} - visibleMarkers={props.visibleMarkers} />
diff --git a/sites/public/src/components/listings/ListingsList.tsx b/sites/public/src/components/listings/ListingsList.tsx index e0bffc6de5..cddbe9306f 100644 --- a/sites/public/src/components/listings/ListingsList.tsx +++ b/sites/public/src/components/listings/ListingsList.tsx @@ -6,7 +6,6 @@ import { LoadingOverlay, t, InfoCard, LinkButton } from "@bloom-housing/ui-compo import { getListings } from "../../lib/helpers" import { Pagination } from "./Pagination" import styles from "./ListingsCombined.module.scss" -import { MapMarkerData } from "./ListingsMap" type ListingsListProps = { listings: Listing[] @@ -15,7 +14,6 @@ type ListingsListProps = { onPageChange: (page: number) => void loading: boolean mapMarkers: ListingMapMarker[] | null - visibleMarkers: MapMarkerData[] } const ListingsList = (props: ListingsListProps) => { @@ -25,18 +23,12 @@ const ListingsList = (props: ListingsListProps) => { {t("t.listingsList")} - {props.listings.length > 0 || props.loading || props.visibleMarkers.length > 0 ? ( + {props.listings.length > 0 || props.loading ? (
{getListings(props.listings)}
) : ( )}
From 280dac61f9caa44a5972ee8ae545eeb8cb58c333 Mon Sep 17 00:00:00 2001 From: Emily Jablonski Date: Thu, 30 Jan 2025 19:13:30 -0700 Subject: [PATCH 3/5] refactor: recenter --- sites/public/src/components/listings/ListingsCombined.tsx | 2 ++ sites/public/src/components/listings/ListingsMap.tsx | 7 ++++++- sites/public/src/components/shared/MapRecenter.tsx | 4 +++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/sites/public/src/components/listings/ListingsCombined.tsx b/sites/public/src/components/listings/ListingsCombined.tsx index 86aa65c6de..9e76ee585b 100644 --- a/sites/public/src/components/listings/ListingsCombined.tsx +++ b/sites/public/src/components/listings/ListingsCombined.tsx @@ -101,6 +101,7 @@ const ListingsCombined = (props: ListingsCombinedProps) => { isFirstBoundsLoad={props.isFirstBoundsLoad} setIsFirstBoundsLoad={props.setIsFirstBoundsLoad} isDesktop={props.isDesktop} + isLoading={props.loading} />
@@ -132,6 +133,7 @@ const ListingsCombined = (props: ListingsCombinedProps) => { isFirstBoundsLoad={props.isFirstBoundsLoad} setIsFirstBoundsLoad={props.setIsFirstBoundsLoad} isDesktop={props.isDesktop} + isLoading={props.loading} />
diff --git a/sites/public/src/components/listings/ListingsMap.tsx b/sites/public/src/components/listings/ListingsMap.tsx index 53eb6f3d73..fcea48a552 100644 --- a/sites/public/src/components/listings/ListingsMap.tsx +++ b/sites/public/src/components/listings/ListingsMap.tsx @@ -28,6 +28,7 @@ type ListingsMapProps = { isFirstBoundsLoad: boolean setIsFirstBoundsLoad: React.Dispatch> isDesktop: boolean + isLoading: boolean } export type MapMarkerData = { @@ -82,7 +83,11 @@ const ListingsMap = (props: ListingsMapProps) => { clickableIcons={false} > - + { @@ -17,7 +18,8 @@ const MapRecenter = (props: MapRecenterProps) => { if ( !map || props.visibleMapMarkers === undefined || - props.visibleMapMarkers === props.mapMarkers.length + props.visibleMapMarkers === props.mapMarkers.length || + props.isLoading ) return null From 466034450ff561be22d701a9d1abd970e4c87db7 Mon Sep 17 00:00:00 2001 From: Emily Jablonski Date: Sun, 2 Feb 2025 15:52:40 -0700 Subject: [PATCH 4/5] fix: add dep --- sites/public/src/components/listings/MapClusterer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/public/src/components/listings/MapClusterer.tsx b/sites/public/src/components/listings/MapClusterer.tsx index 9331fe56b3..097f03fa32 100644 --- a/sites/public/src/components/listings/MapClusterer.tsx +++ b/sites/public/src/components/listings/MapClusterer.tsx @@ -210,7 +210,7 @@ export const MapClusterer = ({ fitBounds(map, mapMarkers, false, setIsFirstBoundsLoad) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [clusterer, markers, currentMapMarkers]) + }, [clusterer, markers, currentMapMarkers, map]) // Keeps track of the markers on the map, passed to each marker const setMarkerRef = useCallback( From 0382e1aa7b64f6cec43b767765e8855ac72d4b08 Mon Sep 17 00:00:00 2001 From: Emily Jablonski Date: Sun, 2 Feb 2025 16:05:58 -0700 Subject: [PATCH 5/5] fix: add dep --- sites/public/src/components/listings/MapClusterer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/public/src/components/listings/MapClusterer.tsx b/sites/public/src/components/listings/MapClusterer.tsx index 097f03fa32..8905570ccc 100644 --- a/sites/public/src/components/listings/MapClusterer.tsx +++ b/sites/public/src/components/listings/MapClusterer.tsx @@ -138,7 +138,7 @@ export const MapClusterer = ({ resetVisibleMarkers() } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [mapMarkers]) + }, [mapMarkers, map]) const fetchInfoWindow = async (listingId: string) => { try {