[OUR415-280] Moves algolia provider to wrap entire page (#201)

app/App.tsx

@@ -11,11 +11,11 @@ import {
   websiteConfig,
   AppProvider,
 } from "./utils";
-import { Footer, Navigation } from "./components/ui";
+import { Footer, Navigation, Loader } from "./components/ui";
 
-import config from "./config";
 import MetaImage from "./assets/img/Our415_OG.png";
 import styles from "./App.module.scss";
+import config from "./config";
 
 const { siteUrl, title } = websiteConfig;
 export const OUTER_CONTAINER_ID = "outer-container";
@@ -47,6 +47,10 @@ export const App = () => {
     });
   }, [history]);
 
+  if (!userLocation) {
+    return <Loader />;
+  }
+
   return (
     <div id={OUTER_CONTAINER_ID} className={styles.outerContainer}>
       <AppProvider userLocation={userLocation}>

app/components/listing/MapOfLocations.tsx

@@ -40,8 +40,8 @@ export const MapOfLocations = ({
           {locations.map(({ address, id }, i) => (
             <CustomMarker
               key={id}
-              lat={Number(address?.latitude || 0)}
-              lng={Number(address?.longitude || 0)}
+              lat={Number(address?.latitude) || 0}
+              lng={Number(address?.longitude) || 0}
               text={`${i + 1}`}
             />
           ))}

app/components/search/Pagination/ResultsPagination.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Pagination } from "react-instantsearch";
 import websiteConfig from "utils/websiteConfig";
 
-import styles from "./ResultsPagination.module.scss";
+import styles from "../SearchResults/SearchResults.module.scss";
 
 const {
   appImages: { algolia },

app/components/search/Refinements/ClearAllFilters.tsx

@@ -2,24 +2,21 @@ import React from "react";
 
 import { Button } from "components/ui/inline/Button/Button";
 import { useClearRefinements } from "react-instantsearch";
-import { AroundRadius } from "algoliasearch";
+import { useAppContextUpdater } from "utils";
 
 /**
  * Filter clearing component that handles both facet clearing and map boundary reset
  */
-const ClearAllFilter = ({
-  setSearchRadius,
-}: {
-  setSearchRadius: (radius: AroundRadius) => void;
-}) => {
+const ClearAllFilter = () => {
+  const { setAroundRadius } = useAppContextUpdater();
   const { refine } = useClearRefinements();
   return (
     <Button
       tabIndex={0}
       variant="linkBlue"
       onClick={() => {
         refine();
-        setSearchRadius("all");
+        setAroundRadius("all");
       }}
       mobileFullWidth={false}
       size="lg"

app/components/search/Refinements/ClearSearchButton.tsx

@@ -1,9 +1,17 @@
 import React from "react";
 import { Button } from "components/ui/inline/Button/Button";
+import { useSearchBox } from "react-instantsearch-core";
 
 const ClearSearchButton = () => {
+  const { clear } = useSearchBox();
+
   return (
-    <Button variant="linkBlue" size="lg" href="/search" mobileFullWidth={false}>
+    <Button
+      variant="linkBlue"
+      size="lg"
+      mobileFullWidth={false}
+      onClick={clear}
+    >
       Clear Search
     </Button>
   );

app/components/search/Refinements/SearchRefinementList.tsx

@@ -73,7 +73,7 @@ const SearchRefinementList = ({ attribute, mapping }: Props) => {
                 type="checkbox"
                 className={styles.refinementInput}
                 onChange={() => changeRefinement(mappingLabel)}
-                checked={checked[mappingLabel]}
+                checked={checked[mappingLabel] || false}
                 disabled={!mappingHasResults}
               />
             </label>

app/components/search/SearchMap/SearchMap.tsx

@@ -1,10 +1,9 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useState } from "react";
 import GoogleMap from "google-map-react";
 import { Tooltip } from "react-tippy";
 import "react-tippy/dist/tippy.css";
 import SearchEntry from "components/search/SearchMap/SearchEntry";
-import { useAppContext } from "utils";
-import { Loader } from "components/ui";
+import { useAppContext, useAppContextUpdater } from "utils";
 import { Button } from "components/ui/inline/Button/Button";
 import {
   createMapOptions,
@@ -17,34 +16,40 @@ import config from "../../../config";
 
 export const SearchMap = ({
   hits,
-  mapObject,
-  setMapObject,
-  setAroundLatLng,
   mobileMapIsCollapsed,
 }: {
   hits: TransformedSearchHit[];
-  mapObject: google.maps.Map | null;
-  setMapObject: (map: google.maps.Map) => void;
-  setAroundLatLng: (latLng: { lat: number; lng: number }) => void;
   mobileMapIsCollapsed: boolean;
 }) => {
-  const { userLocation } = useAppContext();
-  if (userLocation === null) {
-    return (
-      <div className="mapLoaderContainer">
-        <Loader />
-      </div>
-    );
-  }
+  const [googleMapObject, setMapObject] = useState<google.maps.Map | null>(
+    null
+  );
+  const { userLocation, aroundLatLng } = useAppContext();
+  const { setAroundLatLng } = useAppContextUpdater();
 
   function handleSearchThisAreaClick() {
-    const center = mapObject?.getCenter() || null;
+    const center = googleMapObject?.getCenter();
     if (center?.lat() && center?.lng()) {
-      setAroundLatLng({ lat: center.lat(), lng: center.lng() });
+      setAroundLatLng(`${center.lat()}, ${center.lng()}`);
     }
   }
 
-  const { lat, lng } = userLocation;
+  const aroundLatLngToMapCenter = {
+    lat: Number(aroundLatLng.split(",")[0]),
+    lng: Number(aroundLatLng.split(",")[1]),
+  };
+
+  // Center the map to the user's choice (`aroundLatLng`) with a fallback to our best guess when sniffing their
+  // location on app start (`userLocation`)
+  const googleMapsCenter = () => {
+    if (aroundLatLng) {
+      return aroundLatLngToMapCenter;
+    } else if (userLocation) {
+      return { lat: userLocation?.lat, lng: userLocation?.lng };
+    } else {
+      return undefined;
+    }
+  };
 
   return (
     <div className="results-map">
@@ -69,7 +74,7 @@ export const SearchMap = ({
           bootstrapURLKeys={{
             key: config.GOOGLE_API_KEY,
           }}
-          center={{ lat, lng }}
+          center={googleMapsCenter()}
           defaultZoom={14}
           onGoogleApiLoaded={({ map }) => {
             // SetMapObject shares the Google Map object across parent/sibling components
@@ -78,7 +83,11 @@ export const SearchMap = ({
           }}
           options={createMapOptions}
         >
-          <UserLocationMarker lat={lat} lng={lng} key={1} />
+          <UserLocationMarker
+            lat={userLocation?.lat}
+            lng={userLocation?.lng}
+            key={1}
+          />
           {hits.reduce((markers, hit) => {
             // Add a marker for each address of each hit
             hit.locations.forEach((location) => {

app/components/search/SearchResults/SearchResults.module.scss

@@ -13,7 +13,7 @@
   display: grid;
   gap: $general-spacing-md;
   margin: $spacing-0 $general-spacing-lg;
-  flex: 0 0 40em;
+  flex: 0 0 640px;
 
   @media screen and (max-width: $break-desktop-s) {
     margin: $spacing-0 $general-spacing-md;
@@ -247,49 +247,60 @@
   }
 }
 
-@media print {
-  :global(.searchResultsPage) {
-    visibility: hidden;
-
-    :global(.results-map) {
-      display: none;
-    }
-
-    a,
-    button,
-    input,
-    textarea {
-      transition: none !important;
+.paginationContainer {
+  position: relative;
+  z-index: 2;
+  padding: 24px;
+  background-color: $gray-50;
+
+  :global(.ais-Pagination-link) {
+    display: inline-block;
+    width: 35px;
+    margin: 0 3px;
+    text-align: center;
+    color: $black;
+    padding: $general-spacing-md $spacing-0;
+
+    &:hover {
+      color: $black;
     }
+  }
 
-    a[href]::after {
-      content: "" !important;
-    }
+  :global(.ais-Pagination-item--selected) {
+    font-weight: 900;
+    font-size: 18px;
   }
 
-  .searchResultsContainer {
-    visibility: visible;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: 50px auto;
-    width: 6.5in;
-    display: block;
+  :global(.ais-Pagination-item--nextPage),
+  :global(.ais-Pagination-item--previousPage) {
+    margin: 0 3px;
+    font-size: 0.87rem;
   }
 
-  .searchResult {
-    display: block;
-    padding: 20px 0;
-    border-left: 0;
+  :global(.ais-Pagination-item--disabled) {
+    opacity: 0.5;
+    border: 0;
   }
 
-  .sideLink {
+  &.hidePagination {
     display: none;
-    &.showInPrintView {
-      display: block;
-      padding-top: 20px;
-    }
+  }
+}
+
+.resultsPagination {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.algoliaImgWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0 0;
+
+  & > img {
+    height: 16px;
   }
 }