diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js b/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js index 64fa2ea17..43727e07e 100644 --- a/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js +++ b/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js @@ -14,17 +14,25 @@ import { tenantDetails } from "../../../../helpers/Configuration"; import CategoryButton from "./CategoryButton"; import SwitchViewsButton from "./SwitchViewsButton"; import useFeatureFlag from "hooks/useFeatureFlag"; +import { + useSearchCoordinates, + useUserCoordinates, +} from "../../../../appReducer"; const ResultsFilters = ({ categoryIds, toggleCategory, showList, toggleShowList, + handleFlyTo, }) => { const isMealsSelected = categoryIds.indexOf(MEAL_PROGRAM_CATEGORY_ID) >= 0; const isPantrySelected = categoryIds.indexOf(FOOD_PANTRY_CATEGORY_ID) >= 0; const { taglineText } = tenantDetails; const { getUserLocation } = useGeolocation(); + const searchCoordinates = useSearchCoordinates(); + const userCoordinates = useUserCoordinates(); + const startIconCoordinates = searchCoordinates || userCoordinates; const locationPermission = useLocationPermission(); const [error, setError] = useState(""); const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter"); @@ -47,7 +55,13 @@ const ResultsFilters = ({ const useMyLocationTrigger = async () => { try { + // depending on the network speed, it might take a bit before the screen recenters to user location await getUserLocation(); + startIconCoordinates && + handleFlyTo({ + longitude: startIconCoordinates.longitude, + latitude: searchCoordinates.latitude, + }); } catch (e) { setError(e); } diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js b/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js index d67fc81e2..a62fedb83 100644 --- a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js +++ b/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js @@ -98,17 +98,19 @@ const ResultsMap = ( await loadMarkerIcons(map); setMarkersLoaded(true); setInteractiveLayerIds([MARKERS_LAYER_ID]); - mapRef.current?.flyTo({ - center: [ - isListPanelOpen && !isMobile - ? startIconCoordinates.longitude - 0.08 - : startIconCoordinates.longitude, - isMobile - ? startIconCoordinates.latitude - 0.03 - : startIconCoordinates.latitude, - ], - duration: 2000, - }); + + startIconCoordinates && + mapRef.current?.flyTo({ + center: [ + isListPanelOpen && !isMobile + ? startIconCoordinates.longitude - 0.08 + : startIconCoordinates.longitude, + isMobile + ? startIconCoordinates.latitude - 0.03 + : startIconCoordinates.latitude, + ], + duration: 2000, + }); }, [startIconCoordinates, isListPanelOpen, isMobile]); const onClick = (e) => { diff --git a/client/src/components/FoodSeeker/SearchResults/SearchResults.js b/client/src/components/FoodSeeker/SearchResults/SearchResults.js index 9f33cfb26..9340c83bf 100644 --- a/client/src/components/FoodSeeker/SearchResults/SearchResults.js +++ b/client/src/components/FoodSeeker/SearchResults/SearchResults.js @@ -159,6 +159,7 @@ const SearchResults = () => { toggleCategory={toggleCategory} showList={showList} toggleShowList={toggleShowList} + handleFlyTo={flyTo} /> );