2065 fix current user location map view (#2152)

* adds handleFlyTo to ResultFilter component * fixes recenter bug * removes unused deps --------- Co-authored-by: Qiqi Zheng <[email protected]>
hackforla · Jun 4, 2024 · 36f3c7b · 36f3c7b
1 parent 4b6bc48
commit 36f3c7b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git 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
@@ -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
@@ -159,6 +159,7 @@ const SearchResults = () => {
       toggleCategory={toggleCategory}
       showList={showList}
       toggleShowList={toggleShowList}
+      handleFlyTo={flyTo}
     />
   );