feat: Fix map

app/App.test.tsx

@@ -34,7 +34,7 @@ describe("<App />", () => {
         coords: { lat: 37.7749, lng: -122.4194 },
         inSanFrancisco: false,
       },
-      aroundUserLocationRadius: "all",
+      aroundUserLocationRadius: 1600,
       setAroundRadius: expect.any(Function),
       setAroundLatLng: expect.any(Function),
     });

app/App.tsx

@@ -22,9 +22,9 @@ export const App = () => {
   const location = useLocation();
   const [userLocation, setUserLocation] = useState<UserLocation | null>(null);
   const [aroundLatLng, setAroundLatLng] = useState<string>("");
-  const [aroundUserLocationRadius, setAroundRadius] = useState<AroundRadius>(
-    "all" as const
-  );
+  const [aroundUserLocationRadius, setAroundRadius] =
+    useState<AroundRadius>(1600);
+  const [boundingBox, setBoundingBox] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     getLocation().then((userLocation) => {
@@ -60,6 +60,8 @@ export const App = () => {
     setAroundLatLng,
     aroundUserLocationRadius,
     setAroundRadius,
+    boundingBox,
+    setBoundingBox,
   };
 
   return (

app/components/SearchAndBrowse/SearchMap/SearchMap.tsx

@@ -31,14 +31,43 @@ export const SearchMap = ({
     null
   );
   const { userLocation, aroundLatLng } = useAppContext();
-  const { setAroundLatLng } = useAppContextUpdater();
+  const { setAroundLatLng, setAroundRadius, setBoundingBox } =
+    useAppContextUpdater();
+
+  // Dynamically calculate search radius based on zoom level
 
   function handleSearchThisAreaClick() {
-    const center = googleMapObject?.getCenter();
-    if (center?.lat() && center?.lng()) {
-      setAroundLatLng(`${center.lat()}, ${center.lng()}`);
+    const map = googleMapObject;
+    if (map) {
+      // Get the visible bounds of the map
+      const bounds = map.getBounds();
+      if (bounds) {
+        const ne = bounds.getNorthEast();
+        const sw = bounds.getSouthWest();
+
+        // Format as Algolia expects: "lat1,lng1,lat2,lng2"
+        // Where (lat1, lng1) is the top-left (NW) corner and (lat2, lng2) is the bottom-right (SE) corner
+        const boundingBoxString = `${ne.lat()},${sw.lng()},${sw.lat()},${ne.lng()}`;
+
+        // Update the bounding box for search
+        setBoundingBox(boundingBoxString);
+
+        // Set aroundRadius to "all" to disable radius-based filtering
+        setAroundRadius("all");
+
+        // Keep center point updated for reference (used for map centering)
+        const center = map.getCenter();
+        if (center) {
+          const centerStr = `${center.lat()}, ${center.lng()}`;
+          setAroundLatLng(centerStr);
+        }
+
+        // Notify SearchResultsPage component to reset pagination
+        handleSearchMapAction(SearchMapActions.SearchThisArea);
+      }
+    } else {
+      handleSearchMapAction(SearchMapActions.SearchThisArea);
     }
-    handleSearchMapAction(SearchMapActions.SearchThisArea);
   }
 
   const aroundLatLngToMapCenter = {
@@ -127,6 +156,23 @@ export const SearchMap = ({
             // SetMapObject shares the Google Map object across parent/sibling components
             // so that they can adjustments to markers, coordinates, layout, etc.,
             setMapObject(map);
+
+            // Set initial bounding box when map is first loaded
+            const idleListener = map.addListener("idle", () => {
+              // Remove the listener so it only fires once
+              google.maps.event.removeListener(idleListener);
+
+              const bounds = map.getBounds();
+              if (bounds) {
+                const ne = bounds.getNorthEast();
+                const sw = bounds.getSouthWest();
+                const boundingBoxString = `${ne.lat()},${sw.lng()},${sw.lat()},${ne.lng()}`;
+                setBoundingBox(boundingBoxString);
+
+                // Notify that map is initialized
+                handleSearchMapAction(SearchMapActions.MapInitialized);
+              }
+            });
           }}
           options={createMapOptions}
         >

app/components/SearchAndBrowse/SearchResults/SearchResults.module.scss

@@ -64,10 +64,10 @@
 .searchResultsHeader {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
 
   h2 {
-    font-size: 20px;
+    font-size: 16px;
   }
 
   @media screen and (max-width: $break-tablet-p) {
@@ -80,7 +80,7 @@
     border-bottom: 1px solid $border-gray;
 
     h2 {
-      font-size: 18px;
+      font-size: 14px;
     }
 
     a {

app/components/SearchAndBrowse/SearchResults/SearchResults.tsx

@@ -14,17 +14,20 @@ import styles from "./SearchResults.module.scss";
 import ClearSearchButton from "../Refinements/ClearSearchButton";
 import { Loader } from "components/ui/Loader";
 import ResultsPagination from "components/SearchAndBrowse/Pagination/ResultsPagination";
+import { SearchResultsHeader } from "components/ui/SearchResultsHeader";
 
 export enum SearchMapActions {
   SearchThisArea,
+  MapInitialized,
 }
 
 const SearchResults = ({
   mobileMapIsCollapsed,
 }: {
   mobileMapIsCollapsed: boolean;
 }) => {
-  const { refine: refinePagination } = usePagination();
+  const { refine: refinePagination, currentRefinement: currentPage } =
+    usePagination();
   const {
     // Results type is algoliasearchHelper.SearchResults<SearchHit>
     results: searchResults,
@@ -55,15 +58,6 @@ const SearchResults = ({
     </div>
   );
 
-  const searchResultsHeader = () => {
-    return (
-      <div className={styles.searchResultsHeader}>
-        <h2>{searchResults.nbHits} results</h2>
-        <ClearSearchButton />
-      </div>
-    );
-  };
-
   const handleAction = (searchMapAction: SearchMapActions) => {
     switch (searchMapAction) {
       case SearchMapActions.SearchThisArea:
@@ -83,7 +77,10 @@ const SearchResults = ({
           <NoResultsDisplay />
         ) : (
           <>
-            {searchResultsHeader()}
+            <SearchResultsHeader
+              currentPage={currentPage}
+              totalResults={searchResults.nbHits}
+            />
             {searchMapHitData.hits.map((hit: TransformedSearchHit, index) => (
               <SearchResult
                 hit={hit}

app/components/SearchAndBrowse/Sidebar/Sidebar.tsx

@@ -40,7 +40,7 @@ const Sidebar = ({
   const { setAroundRadius } = useAppContextUpdater();
 
   useClickOutside(
-    filterMenuRef,
+    filterMenuRef as React.RefObject<HTMLElement>,
     () => setFilterMenuVisible(false),
     filterMenuVisible
   );

app/components/ui/Navigation/MobileNavigation.tsx

@@ -36,7 +36,7 @@ export const MobileNavigation = ({ menuData }: MobileNavigationProps) => {
   const mobileNavTextDisplay = mobileNavigationIsOpen ? "Close" : "Menu";
 
   useClickOutside(
-    filterMenuRef,
+    filterMenuRef as React.RefObject<HTMLElement>,
     (event: MouseEvent) => {
       // Prevents collison between handling the outside click and clicking on the
       // "Close" button

app/components/ui/SearchResultsHeader.tsx

@@ -1,10 +1,32 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import styles from "components/SearchAndBrowse/SearchResults/SearchResults.module.scss";
+import ClearSearchButton from "components/SearchAndBrowse/Refinements/ClearSearchButton";
+import { HITS_PER_PAGE } from "pages/SearchResultsPage/SearchResultsPage";
 
 /**
  * Layout component for the header above the search results list that allows for
  * flexible composition of child components.
  */
-export const SearchResultsHeader = ({ children }: { children: ReactNode }) => (
-  <div className={styles.searchResultsHeader}>{children}</div>
-);
+export const SearchResultsHeader = ({
+  currentPage,
+  totalResults,
+}: {
+  currentPage: number;
+  totalResults: number;
+}) => {
+  const firstResultIndex = currentPage * HITS_PER_PAGE + 1;
+  const lastResultIndex = Math.min(
+    (currentPage + 1) * HITS_PER_PAGE,
+    totalResults
+  );
+  return (
+    <div className={styles.searchResultsHeader}>
+      <h2 style={{ fontWeight: 500, fontSize: 16 }}>
+        Showing <span style={{ fontWeight: 700 }}>{firstResultIndex}</span> -{" "}
+        <span style={{ fontWeight: 700 }}>{lastResultIndex}</span> of{" "}
+        <span style={{ fontWeight: 700 }}>{totalResults}</span> results
+      </h2>
+      <ClearSearchButton />
+    </div>
+  );
+};

app/pages/BrowseResultsPage/BrowseResultsPage.module.scss

@@ -1 +1,16 @@
 @use "~components/SearchAndBrowse/SearchAndBrowseResultsPage.module.scss";
+
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+
+  p {
+    margin-top: 1rem;
+    font-size: 1.1rem;
+    color: #666;
+  }
+}