Fix filterpanel bug and flyto clean up

hackforla · Aug 1, 2024 · 0d5862c · 0d5862c
1 parent df35240
commit 0d5862c
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 101 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -10,6 +10,7 @@ import * as analytics from "../src/services/analytics";
 import { AppStateProvider } from "./appReducer";
 import SEO from "./components/SEO";
 import AppRoutes from "./Routes";
+import { MapProvider } from "react-map-gl";
 
 function App() {
   useEffect(() => {
@@ -29,9 +30,11 @@ function App() {
                   url={window.origin}
                   description="Food Oasis is a non-profit, volunteer-run directory of free food resources in the Los Angeles area."
                 />
-                <Router>
-                  <AppRoutes />
-                </Router>
+                <MapProvider>
+                  <Router>
+                    <AppRoutes />
+                  </Router>
+                </MapProvider>
               </ThemeProvider>
             </UserProvider>
           </ToasterProvider>

diff --git a/client/src/components/FoodSeeker/AddressDropDown.js b/client/src/components/FoodSeeker/AddressDropDown.js
@@ -14,6 +14,7 @@ import {
   useSearchCoordinates,
   useWidget,
 } from "../../appReducer";
+import { useMapbox } from "../../hooks/useMapbox";
 
 export default function AddressDropDown({ autoFocus }) {
   const searchCoordinates = useSearchCoordinates();
@@ -25,6 +26,7 @@ export default function AddressDropDown({ autoFocus }) {
   const { mapboxResults, fetchMapboxResults } = useMapboxGeocoder();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const { flyTo } = useMapbox();
 
   const handleInputChange = (delta) => {
     if (!delta) return;
@@ -44,6 +46,10 @@ export default function AddressDropDown({ autoFocus }) {
     if (result) {
       const [longitude, latitude] = result.center;
 
+      flyTo({
+        latitude,
+        longitude,
+      });
       dispatch({
         type: "SEARCH_COORDINATES_UPDATED",
         coordinates: { latitude, longitude, locationName: result.place_name },

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js b/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js
@@ -18,13 +18,13 @@ import {
   useSearchCoordinates,
   useUserCoordinates,
 } from "../../../../appReducer";
+import { useMapbox } from "../../../../hooks/useMapbox";
 
 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;
@@ -36,6 +36,7 @@ const ResultsFilters = ({
   const locationPermission = useLocationPermission();
   const [error, setError] = useState("");
   const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
+  const { flyTo } = useMapbox();
 
   useEffect(() => {
     if (error && locationPermission === "granted") {
@@ -58,7 +59,7 @@ const ResultsFilters = ({
       // depending on the network speed, it might take a bit before the screen recenters to user ___location
       await getUserLocation();
       startIconCoordinates &&
-        handleFlyTo({
+        flyTo({
           longitude: startIconCoordinates.longitude,
           latitude: searchCoordinates.latitude,
         });

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js b/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js
@@ -18,12 +18,14 @@ import {
 import StakeholderDetails from "../StakeholderDetails/StakeholderDetails";
 import StakeholderPreview from "../StakeholderPreview/StakeholderPreview";
 import useBreakpoints from "hooks/useBreakpoints";
+import { useMapbox } from "hooks/useMapbox";
 
-const ResultsList = ({ stakeholders, loading, handleReset, handleFlyTo }) => {
+const ResultsList = ({ stakeholders, loading, handleReset }) => {
   const selectedOrganization = useSelectedOrganization();
   const [topMostIndex, setTopMostIndex] = useState(0);
   const { isDesktop } = useBreakpoints();
   const dispatch = useAppDispatch();
+  const { flyTo } = useMapbox();
 
   useEffect(() => {
     analytics.postEvent("showList");
@@ -89,7 +91,7 @@ const ResultsList = ({ stakeholders, loading, handleReset, handleFlyTo }) => {
                         stakeholder={stakeholder}
                         onSelect={() => {
                           setTopMostIndex(index);
-                          handleFlyTo({
+                          flyTo({
                             longitude: stakeholder.longitude,
                             latitude: stakeholder.latitude,
                           });

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js b/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js
@@ -1,12 +1,5 @@
 import PropTypes from "prop-types";
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useState } from "react";
 // Mapbox is tricky, because version 6.* is "incompatible with some Babel transforms
 // because of the way it shares code between the maint thread and Web Worker."
 // See https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling for details
@@ -33,6 +26,7 @@ import {
   useSelectedOrganization,
   useUserCoordinates,
 } from "../../../../appReducer";
+import { useMapbox } from "../../../../hooks/useMapbox";
 import AdvancedFilters from "../AdvancedFilters/AdvancedFilters";
 import {
   MARKERS_LAYER_ID,
@@ -42,11 +36,7 @@ import {
 } from "./MarkerHelpers";
 import { regionBorderStyle, regionFillStyle } from "./RegionHelpers";
 
-const ResultsMap = (
-  { stakeholders, categoryIds, toggleCategory, loading },
-  ref
-) => {
-  const mapRef = useRef();
+const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const [markersLoaded, setMarkersLoaded] = useState(false);
   const [cursor, setCursor] = useState("auto");
   const searchCoordinates = useSearchCoordinates();
@@ -56,6 +46,7 @@ const ResultsMap = (
   const { isMobile } = useBreakpoints();
   const isListPanelOpen = useListPanel();
   const isFilterPanelOpen = useFilterPanel();
+  const { mapRef, flyTo } = useMapbox();
 
   const longitude =
     searchCoordinates?.longitude ||
@@ -98,30 +89,19 @@ const ResultsMap = (
     await loadMarkerIcons(map);
     setMarkersLoaded(true);
     setInteractiveLayerIds([MARKERS_LAYER_ID]);
-
     startIconCoordinates &&
-      mapRef.current?.flyTo({
-        center: [
-          isListPanelOpen && !isMobile
-            ? startIconCoordinates.longitude - 0.08
-            : startIconCoordinates.longitude,
-          isMobile
-            ? startIconCoordinates.latitude - 0.03
-            : startIconCoordinates.latitude,
-        ],
-        duration: 2000,
+      flyTo({
+        longitude: startIconCoordinates.longitude,
+        latitude: startIconCoordinates.latitude,
       });
-  }, [startIconCoordinates, isListPanelOpen, isMobile]);
+  }, [startIconCoordinates, flyTo, mapRef]);
 
   const onClick = (e) => {
-    mapRef.current?.flyTo({
-      center: [
-        isListPanelOpen && !isMobile ? e.lngLat.lng - 0.08 : e.lngLat.lng,
-        isMobile ? e.lngLat.lat - 0.03 : e.lngLat.lat,
-      ],
-      duration: 2000,
+    flyTo({
+      latitude: e.lngLat.lat,
+      longitude: e.lngLat.lng,
     });
-    if(isMobile){
+    if (isMobile) {
       dispatch({ type: "TOGGLE_LIST_PANEL" });
     }
     if (!e.features || !e.features.length) {
@@ -151,35 +131,6 @@ const ResultsMap = (
     categoryIds,
   });
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      getViewport: () => {
-        const map = mapRef.current.getMap();
-
-        const { lat: latitude, lng: longitude } = map.getCenter();
-        const zoom = map.getZoom();
-        const { width, height } = map.getContainer().getBoundingClientRect();
-
-        return {
-          center: { latitude, longitude },
-          zoom,
-          dimensions: { width, height },
-        };
-      },
-      flyTo: ({ latitude, longitude }) => {
-        mapRef.current?.flyTo({
-          center: [
-            isListPanelOpen && !isMobile ? longitude - 0.08 : longitude,
-            isMobile ? latitude - 0.03 : latitude,
-          ],
-          duration: 2000,
-        });
-      },
-    }),
-    [isMobile, isListPanelOpen]
-  );
-
   const listPanelLeftPostion = isListPanelOpen ? 524 : 0;
   const filterPanelLeftPostion = isFilterPanelOpen ? 340 : 0;
 
@@ -255,7 +206,7 @@ const ResultsMap = (
   );
 };
 
-export default forwardRef(ResultsMap);
+export default ResultsMap;
 
 ResultsMap.propTypes = {
   stakeholders: PropTypes.arrayOf(PropTypes.object),

diff --git a/client/src/components/FoodSeeker/SearchResults/SearchResults.js b/client/src/components/FoodSeeker/SearchResults/SearchResults.js
@@ -2,15 +2,15 @@ import useBreakpoints from "hooks/useBreakpoints";
 import useCategoryIds from "hooks/useCategoryIds";
 import useNeighborhoodsGeoJSON from "hooks/useNeighborhoodsGeoJSON";
 import useOrganizationBests from "hooks/useOrganizationBests";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import * as analytics from "services/analytics";
 import {
   useAppDispatch,
-  useSearchCoordinates,
-  useStakeholders,
   useIsListPanelVisible,
   usePosition,
+  useSearchCoordinates,
+  useStakeholders,
 } from "../../../appReducer";
 import Filters from "./ResultsFilters/ResultsFilters";
 import List from "./ResultsList/ResultsList";
@@ -19,7 +19,6 @@ import { Desktop, Mobile, Tablet } from "./layouts";
 
 const SearchResults = () => {
   const isListPanelVisible = useIsListPanelVisible();
-  const mapRef = useRef(null);
   const { isDesktop, isTablet } = useBreakpoints();
   const { selectAll, loading } = useOrganizationBests();
   const { categoryIds, toggleCategory } = useCategoryIds([]);
@@ -121,25 +120,13 @@ const SearchResults = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stakeholders]);
 
-  const searchMapArea = useCallback(() => {
-    const { center } = mapRef.current.getViewport();
-    dispatch({ type: "SEARCH_COORDINATES_UPDATED", coordinates: center });
-  }, [dispatch]);
-
-  const flyTo = useCallback(({ longitude, latitude }) => {
-    mapRef.current?.flyTo({
-      longitude,
-      latitude,
-    });
-  }, []);
-
   const resetOrigin = useCallback(() => {
     dispatch({ type: "RESET_COORDINATES" });
   }, [dispatch]);
 
   const toggleShowList = useCallback(() => {
     setShowList((showList) => !showList);
-  }, [dispatch]);
+  }, []);
 
   useEffect(() => {
     setShowList(true);
@@ -151,18 +138,15 @@ const SearchResults = () => {
       toggleCategory={toggleCategory}
       showList={showList}
       toggleShowList={toggleShowList}
-      handleFlyTo={flyTo}
     />
   );
 
   const map = (
     <Map
-      ref={mapRef}
       stakeholders={stakeholders}
       categoryIds={categoryIds}
       toggleCategory={toggleCategory}
       loading={loading}
-      searchMapArea={searchMapArea}
     />
   );
 
@@ -171,7 +155,6 @@ const SearchResults = () => {
       stakeholders={stakeholders || []}
       loading={loading}
       handleReset={resetOrigin}
-      handleFlyTo={flyTo}
     />
   );
 

diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js b/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
@@ -20,7 +20,6 @@ const MobileLayout = ({ filters, map, list, showList }) => {
   const initialY = showList ? 5 : 57;
   const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
   const dispatch = useAppDispatch();
-
   const [position, setPosition] = useState({
     x: 0,
     y: initialY * (window.innerHeight / 100),
@@ -34,15 +33,6 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     document.body.style.overflow = "hidden";
   }, []);
 
-  // List goes up when clicking the map
-  useEffect(() => {
-    setPosition({
-      x: 0,
-      y: initialY * (window.innerHeight / 100),
-    });
-
-  }, [initialY]);
-
   useEffect(() => {
     dispatch({ type: "POSITION", position: position });
   }, [position, dispatch]);
@@ -54,8 +44,9 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     } else if (hasAdvancedFilterFeatureFlag) {
       newY = showList ? (100 / window.innerHeight) * 60 : 54;
     } else {
-      newY = showList ? 0 : 54;
+      newY = showList ? 17 : 54;
     }
+
     setPosition({ x: 0, y: newY * (window.innerHeight / 100) });
   }, [showList, filterPanelOpen, hasAdvancedFilterFeatureFlag]);
 

diff --git a/client/src/hooks/useMapbox.js b/client/src/hooks/useMapbox.js
@@ -0,0 +1,40 @@
+import { useRef } from "react";
+import { useListPanel } from "../appReducer";
+import useBreakpoints from "./useBreakpoints";
+import { useMap } from "react-map-gl";
+
+export const useMapbox = () => {
+  const mapRef = useRef();
+  const isListPanelOpen = useListPanel();
+  const { isMobile } = useBreakpoints();
+  const mapbox = useMap();
+
+  const getViewport = () => {
+    const map = mapbox.default.getMap();
+
+    const { lat: latitude, lng: longitude } = map.getCenter();
+    const zoom = map.getZoom();
+    const { width, height } = map.getContainer().getBoundingClientRect();
+
+    return {
+      center: { latitude, longitude },
+      zoom,
+      dimensions: { width, height },
+    };
+  };
+
+  const flyTo = ({ latitude, longitude }) => {
+    if (!mapbox.default) {
+      return;
+    }
+    mapbox.default.flyTo({
+      center: [
+        isListPanelOpen && !isMobile ? longitude - 0.08 : longitude,
+        isMobile ? latitude - 0.05 : latitude,
+      ],
+      duration: 2000,
+    });
+  };
+
+  return { mapRef, getViewport, flyTo };
+};