make search details and location sharable (#2492)

Co-authored-by: Whitney <whitney@Whitneys-MBP.fios-router.home>

Author: whitneywind

client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.jsx

@@ -1,42 +1,19 @@
 import { Box, Stack, Typography } from "@mui/material";
 import Grid2 from "@mui/material/Unstable_Grid2";
 import AddressDropDown from "components/FoodSeeker/AddressDropDown";
-import {
-  FOOD_PANTRY_CATEGORY_ID,
-  MEAL_PROGRAM_CATEGORY_ID,
-} from "constants/stakeholder";
 import PropTypes from "prop-types";
-import { useCallback } from "react";
-import * as analytics from "services/analytics";
-import CategoryButton from "./CategoryButton";
 import SwitchViewsButton from "./SwitchViewsButton";
-import useFeatureFlag from "hooks/useFeatureFlag";
 import { TENANT_CONFIG } from "../../../../helpers/Constants";
 import Geolocate from "./Geolocate";
 import useBreakpoints from "hooks/useBreakpoints";
 
 const ResultsFilters = ({
-  categoryIds,
-  toggleCategory,
   showList,
   toggleShowList,
 }) => {
-  const isMealsSelected = categoryIds.indexOf(MEAL_PROGRAM_CATEGORY_ID) >= 0;
-  const isPantrySelected = categoryIds.indexOf(FOOD_PANTRY_CATEGORY_ID) >= 0;
   const { taglineText } = TENANT_CONFIG;
-  const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
   const { isMobile } = useBreakpoints();
 
-  const toggleMeal = useCallback(() => {
-    toggleCategory(MEAL_PROGRAM_CATEGORY_ID);
-    analytics.postEvent("toggleMealFilter", {});
-  }, [toggleCategory]);
-
-  const togglePantry = useCallback(() => {
-    toggleCategory(FOOD_PANTRY_CATEGORY_ID);
-    analytics.postEvent("togglePantryFilter", {});
-  }, [toggleCategory]);
-
   return (
     <Grid2
       container

client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.jsx

@@ -29,6 +29,8 @@ import {
   useSearchCoordinates,
   useSelectedOrganization,
   useUserCoordinates,
+  useOrgNameFilter,
+  useOpenTimeFilter
 } from "../../../../appReducer";
 import { useMapbox } from "../../../../hooks/useMapbox";
 import AdvancedFilters from "../AdvancedFilters/AdvancedFilters";
@@ -47,11 +49,13 @@ import {
 } from "constants/stakeholder";
 import debounceFn from "debounce-fn";
 
-const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
+const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading, initialZoom }) => {
   const [markersLoaded, setMarkersLoaded] = useState(false);
   const [cursor, setCursor] = useState("auto");
   const searchCoordinates = useSearchCoordinates();
   const selectedOrganization = useSelectedOrganization();
+  const orgNameFilter = useOrgNameFilter();
+  const openTimeFilter = useOpenTimeFilter();
   const navigate = useNavigate();
   const location = useLocation();
   const { isMobile } = useBreakpoints();
@@ -72,7 +76,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const [viewport, setViewport] = useState({
     latitude,
     longitude,
-    zoom: DEFAULT_VIEWPORT.zoom,
+    zoom: initialZoom || DEFAULT_VIEWPORT.zoom,
   });
   const dispatch = useAppDispatch();
   const neighborhood = useNeighborhood();
@@ -94,6 +98,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
       ...viewport,
       latitude: latitude,
       longitude,
+      zoom: initialZoom ? initialZoom : viewport.zoom,
     }));
   }, [searchCoordinates, longitude, latitude, isMobile]);
 
@@ -108,6 +113,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
       flyTo({
         longitude: startIconCoordinates.longitude,
         latitude: startIconCoordinates.latitude,
+        initialZoom,
       });
   }, [startIconCoordinates, flyTo, mapRef]);
 
@@ -318,6 +324,52 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
     };
   }, []);
 
+function updateUrlParams(updates = {}) {
+  const params = new URLSearchParams(window.location.search);
+
+  Object.entries(updates).forEach(([key, value]) => {
+    if (value === null || value === undefined || value === "") {
+      params.delete(key);
+    } else {
+      params.set(key, value);
+    }
+  });
+
+  const newUrl = `${window.location.pathname}?${params.toString()}`;
+  window.history.replaceState(null, "", newUrl);
+}
+
+useEffect(() => {
+  updateUrlParams({
+    name: orgNameFilter || null,
+    pantry: isPantrySelected ? "1" : "0",
+    meal: isMealSelected ? "1" : "0",
+    openRadio:
+      openTimeFilter.radio !== "Show All" ? openTimeFilter.radio : null,
+    openDay:
+      openTimeFilter.radio === "Customized" ? openTimeFilter.day : null,
+    openTime:
+      openTimeFilter.radio === "Customized" ? openTimeFilter.time : null,
+  });
+}, [
+  orgNameFilter,
+  isPantrySelected,
+  isMealSelected,
+  openTimeFilter,
+]);
+
+useEffect(() => {
+  const timeout = setTimeout(() => {
+    updateUrlParams({
+      lat: viewport.latitude?.toFixed(7),
+      lng: viewport.longitude?.toFixed(7),
+      zoom: viewport.zoom ? (Math.round(viewport.zoom * 10) / 10).toString() : null,
+    });
+  }, 100);
+
+  return () => clearTimeout(timeout);
+}, [viewport]);
+
   return (
     <div
       style={{ position: "relative", height: "100%", width: "100%" }}

client/src/components/FoodSeeker/SearchResults/SearchResults.jsx

@@ -2,6 +2,7 @@ import useBreakpoints from "hooks/useBreakpoints";
 import useCategoryIds from "hooks/useCategoryIds";
 import useNeighborhoodsGeoJSON from "hooks/useNeighborhoodsGeoJSON";
 import useOrganizationBests from "hooks/useOrganizationBests";
+import { useInitializeCategoryFilter } from "hooks/useInitializeCategoryFilter";
 import { FOOD_PANTRY_CATEGORY_ID, MEAL_PROGRAM_CATEGORY_ID } from "constants/stakeholder";
 import { useCallback, useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
@@ -24,16 +25,58 @@ const SearchResults = () => {
   const { isDesktop } = useBreakpoints();
   const { selectAll, loading } = useOrganizationBests();
   const { categoryIds, toggleCategory } = useCategoryIds([FOOD_PANTRY_CATEGORY_ID, MEAL_PROGRAM_CATEGORY_ID]);
+  useInitializeCategoryFilter({ categoryIds, toggleCategory });
   const { getGeoJSONById } = useNeighborhoodsGeoJSON();
   const [showList, setShowList] = useState(true);
   const searchCoordinates = useSearchCoordinates();
   const dispatch = useAppDispatch();
   const location = useLocation();
-  const neighborhoodId = new URLSearchParams(location.search).get(
-    "neighborhood_id"
-  );
+  const params = new URLSearchParams(location.search);
+  const organizationId = params.get("id");
+  const neighborhoodId = params.get("neighborhood_id");
+
+  const lat = parseFloat(params.get("lat") || "");
+  const lng = parseFloat(params.get("lng") || "");
+  const initialZoom = parseFloat(params.get("zoom")) || 11;
+  const longitudeOffset = 0.08 * Math.pow(2, 11 - initialZoom);
+
+  const orgNameFilter = params.get("name") || "";
+  const radio = params.get("openRadio");
+  const day = params.get("openDay") || "";
+  const time = params.get("openTime") || "";
+
+  useEffect(() => {
+    try {
+      if (!isNaN(lat) && !isNaN(lng)) {
+        dispatch({
+          type: "SEARCH_COORDINATES_UPDATED",
+          coordinates: { latitude: lat, longitude: lng + longitudeOffset },
+        });
+      }
+
+      if (orgNameFilter) {
+        dispatch({
+          type: "ORG_NAME_FILTER_UPDATED",
+          orgNameFilter,
+        });
+      } 
+
+      if (radio && radio !== "Show All") {
+        dispatch({
+          type: "OPEN_TIME_FILTER_UPDATED",
+          openTimeFilter: {
+            radio,
+            day,
+            time,
+          },
+        });
+      }
+    } catch(err) {
+      console.error(err)
+    }
+  }, []);
+
   const stakeholders = useStakeholders();
-  const organizationId = new URLSearchParams(location.search).get("id");
   const positionDraggable = usePosition();
 
   useEffect(() => {
@@ -175,6 +218,7 @@ const SearchResults = () => {
           categoryIds={categoryIds}
           toggleCategory={toggleCategory}
           loading={loading}
+          initialZoom={initialZoom}
         />
       ) : (
         <Mobile showList={showList} filters={filters} map={map} list={list} />

client/src/components/FoodSeeker/SearchResults/layouts/Desktop.jsx

@@ -16,6 +16,7 @@ const DesktopLayout = ({
   categoryIds,
   toggleCategory,
   loading,
+  initialZoom,
 }) => {
   const isFilterPanelOpen = useFilterPanel();
   const isListPanelOpen = useListPanel();
@@ -116,6 +117,7 @@ const DesktopLayout = ({
             categoryIds={categoryIds}
             toggleCategory={toggleCategory}
             loading={loading}
+            initialZoom={initialZoom}
           />
         </Box>
       </Box>

client/src/hooks/useInitializeCategoryFilter.ts

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import {
+  FOOD_PANTRY_CATEGORY_ID,
+  MEAL_PROGRAM_CATEGORY_ID,
+} from "constants/stakeholder";
+
+type Props = {
+  categoryIds: number[];
+  toggleCategory: (id: number) => void;
+};
+
+export const useInitializeCategoryFilter = ({
+  categoryIds,
+  toggleCategory,
+}: Props) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const pantryParam = params.get("pantry");
+    const mealParam = params.get("meal");
+
+    if (pantryParam === "0" && categoryIds.includes(FOOD_PANTRY_CATEGORY_ID)) {
+      toggleCategory(FOOD_PANTRY_CATEGORY_ID);
+    }
+    if (mealParam === "0" && categoryIds.includes(MEAL_PROGRAM_CATEGORY_ID)) {
+      toggleCategory(MEAL_PROGRAM_CATEGORY_ID);
+    }
+  }, []);
+};