Persist search query

src/components/Map/Map.tsx

@@ -4,7 +4,7 @@ import {
   useMap
 } from '@vis.gl/react-google-maps';
 import { usePostHog } from 'posthog-js/react';
-import { type CSSProperties, useEffect } from 'react';
+import { type CSSProperties, useLayoutEffect } from 'react';
 import useIsMobile from 'hooks/useIsMobile';
 import { CITY_HALL_COORDINATES } from 'constants/defaults';
 import PinWaterActive from 'components/icons/PinWaterActive';
@@ -16,8 +16,8 @@ import { type ResourceEntry } from 'types/ResourceEntry';
 import { ResourceType } from 'hooks/useResourceType';
 import useSelectedResource from 'hooks/useSelectedResource';
 import useGetUserLocationQuery from 'hooks/queries/useGetUserLocationQuery';
-import { useActiveSearchLocationContext } from 'contexts/ActiveSearchMarkerContext';
 import useActiveResources from 'hooks/useActiveResources';
+import useActiveSearchLocation from 'hooks/useActiveSearchLocation';
 
 const style: CSSProperties = {
   width: '100%',
@@ -32,22 +32,27 @@ const Map = () => {
   const posthog = usePostHog();
   const { selectedResource, setSelectedResource } = useSelectedResource();
   const { data: userLocation } = useGetUserLocationQuery();
-  const { activeSearchLocation } = useActiveSearchLocationContext();
+  const { activeSearchLocation } = useActiveSearchLocation();
 
   const map = useMap();
 
   const { data: resources } = useActiveResources();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!map) {
       return;
     }
-    if (!userLocation) {
+
+    if (activeSearchLocation) {
+      map.panTo(activeSearchLocation);
       return;
     }
 
-    map.panTo(userLocation);
-  }, [userLocation, map]);
+    if (userLocation) {
+      map.panTo(userLocation);
+      return;
+    }
+  }, [userLocation, map, activeSearchLocation]);
 
   const onMarkerClick = (resource: ResourceEntry) => {
     setSelectedResource(resource);

src/components/Providers/Providers.tsx

@@ -4,7 +4,6 @@ import { APIProvider } from '@vis.gl/react-google-maps';
 import type { PropsWithChildren } from 'react';
 import ToolbarContextProvider from './ToolbarContextProvider';
 import queryClient from 'services/queryClient';
-import ActiveSearchLocationProvider from './ActiveSearchLocationProvider';
 import ThemeProvider from './ThemeProvider';
 
 const Providers = ({ children }: PropsWithChildren) => (
@@ -14,12 +13,10 @@ const Providers = ({ children }: PropsWithChildren) => (
       libraries={['places']}
     >
       <ToolbarContextProvider>
-        <ActiveSearchLocationProvider>
-          <ThemeProvider>
-            <CssBaseline />
-            {children}
-          </ThemeProvider>
-        </ActiveSearchLocationProvider>
+        <ThemeProvider>
+          <CssBaseline />
+          {children}
+        </ThemeProvider>
       </ToolbarContextProvider>
     </APIProvider>
   </QueryClientProvider>

src/components/SearchBar/SearchBar.tsx

@@ -4,12 +4,13 @@ import { SearchIcon } from 'icons';
 import styles from './SearchBar.module.scss';
 import useGooglePlacesAutocomplete from 'hooks/useGooglePlacesAutocomplete';
 import { toLatLngLiteral, useMap } from '@vis.gl/react-google-maps';
-import { useActiveSearchLocationContext } from 'contexts/ActiveSearchMarkerContext';
+import useActiveSearchLocation from 'hooks/useActiveSearchLocation';
 
 const SearchBar = () => {
-  const { onChangeActiveSearchLocation } = useActiveSearchLocationContext();
+  const { onChangeActiveSearchLocation } = useActiveSearchLocation();
   const map = useMap();
-  const { isFetching, onChange, suggestions } = useGooglePlacesAutocomplete();
+  const { isFetching, onDebouncedChange, suggestions } =
+    useGooglePlacesAutocomplete();
 
   const onSelect = async (place: google.maps.places.Place) => {
     if (!place.id) {
@@ -26,8 +27,6 @@ const SearchBar = () => {
     }
 
     const location = toLatLngLiteral(results.place.location);
-    map.panTo(location);
-    map.setZoom(16);
 
     onChangeActiveSearchLocation(location);
   };
@@ -36,7 +35,7 @@ const SearchBar = () => {
     <Autocomplete
       fullWidth={false}
       onInputChange={(_event, value) => {
-        onChange(value);
+        onDebouncedChange(value);
       }}
       options={suggestions}
       loading={isFetching}

src/hooks/useActiveSearchLocation.ts

@@ -0,0 +1,39 @@
+import { useSearchParams } from 'react-router';
+
+const LOCATION_QUERY_PARAM = 'q';
+
+const useActiveSearchLocation = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeSearchLocationParam = searchParams.get(LOCATION_QUERY_PARAM);
+  const [lat, lng] = (activeSearchLocationParam || '')
+    .split(',')
+    .map(Number)
+    .filter((val, index) => index <= 1 && !Number.isNaN(val));
+
+  const isValidLocation = Boolean(lat) && Boolean(lng);
+  const activeSearchLocation: google.maps.LatLngLiteral | null = isValidLocation
+    ? {
+        lat,
+        lng
+      }
+    : null;
+
+  const onChangeActiveSearchLocation = (
+    location: google.maps.LatLngLiteral | null
+  ) => {
+    if (!location) {
+      return;
+    }
+
+    const value = [location.lat, location.lng].filter(Boolean).join(',');
+    setSearchParams(prev => {
+      prev.set(LOCATION_QUERY_PARAM, value);
+
+      return prev;
+    });
+  };
+
+  return { activeSearchLocation, onChangeActiveSearchLocation };
+};
+
+export default useActiveSearchLocation;