[OUR415-286] Adds back print styling, extracts out pagination css (ag…

…ain 😅), and fixes search input redirect to /search page (#212)

app/components/search/Pagination/ResultsPagination.module.scss

@@ -0,0 +1,48 @@
+@import "~styles/utils/_helpers.scss";
+
+.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;
+    }
+  }
+
+  :global(.ais-Pagination-item--selected) {
+    font-weight: 900;
+    font-size: 18px;
+  }
+
+  :global(.ais-Pagination-item--nextPage),
+  :global(.ais-Pagination-item--previousPage) {
+    margin: 0 3px;
+    font-size: 0.87rem;
+  }
+
+  :global(.ais-Pagination-item--disabled) {
+    opacity: 0.5;
+    border: 0;
+  }
+
+  &.hidePagination {
+    display: none;
+  }
+}
+
+.resultsPagination {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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 "../SearchResults/SearchResults.module.scss";
+import styles from "./ResultsPagination.module.scss";
 
 const {
   appImages: { algolia },

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

@@ -247,60 +247,61 @@
   }
 }
 
-.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;
-    }
-  }
+.algoliaImgWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0 0;
 
-  :global(.ais-Pagination-item--selected) {
-    font-weight: 900;
-    font-size: 18px;
+  & > img {
+    height: 16px;
   }
+}
 
-  :global(.ais-Pagination-item--nextPage),
-  :global(.ais-Pagination-item--previousPage) {
-    margin: 0 3px;
-    font-size: 0.87rem;
-  }
+// Reformats page to only show search results
+@media print {
+  :global(.searchResultsPage) {
+    visibility: hidden;
 
-  :global(.ais-Pagination-item--disabled) {
-    opacity: 0.5;
-    border: 0;
-  }
+    :global(.results-map) {
+      display: none;
+    }
 
-  &.hidePagination {
-    display: none;
+    a,
+    button,
+    input,
+    textarea {
+      transition: none !important;
+    }
+
+    a[href]::after {
+      content: "" !important;
+    }
   }
-}
 
-.resultsPagination {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .searchResultsContainer {
+    visibility: visible;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 50px auto;
+    width: 6.5in;
+    display: block;
+  }
 
-.algoliaImgWrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 20px 0 0;
+  .searchResult {
+    display: block;
+    padding: 20px 0;
+    border-left: 0;
+  }
 
-  & > img {
-    height: 16px;
+  .sideLink {
+    display: none;
+    &.showInPrintView {
+      display: block;
+      padding-top: 20px;
+    }
   }
 }

app/components/ui/SiteSearchInput.tsx

@@ -2,6 +2,7 @@ import React, { FormEvent, useEffect, useState } from "react";
 import cn from "classnames";
 import { useClearRefinements, useSearchBox } from "react-instantsearch";
 import styles from "./SiteSearchInput.module.scss";
+import { useHistory } from "react-router-dom";
 
 /**
  * Sitewide listing search component that controls the search query input
@@ -13,16 +14,20 @@ export const SiteSearchInput = () => {
   const { query, refine } = useSearchBox();
   const { refine: clearRefine } = useClearRefinements();
   const [inputValue, setInputValue] = useState(query);
+  const history = useHistory();
 
   function setQuery(newQuery: string) {
     setInputValue(newQuery);
   }
 
+  // Sets query, clears refinments, and then redirects to the search page. If the user is already on the
+  // search page the last step is basically a noop.
   const submitSearch = (e: FormEvent) => {
     e.preventDefault();
 
     refine(inputValue);
     clearRefine();
+    history.push("/search");
 
     return false;
   };

app/pages/SearchResultsPage/SearchResultsPage.tsx

@@ -5,13 +5,15 @@ import { Header } from "components/search/Header/Header";
 import styles from "./SearchResultsPage.module.scss";
 import { DEFAULT_AROUND_PRECISION, useAppContext } from "utils";
 import { Configure } from "react-instantsearch-core";
+import classNames from "classnames";
 
+// NOTE: The .searchResultsPage is added plain so that it can be targeted by print-specific css
 export const SearchResultsPage = () => {
   const [isMapCollapsed, setIsMapCollapsed] = useState(false);
   const { aroundUserLocationRadius, aroundLatLng } = useAppContext();
 
   return (
-    <div className={styles.container}>
+    <div className={classNames(styles.container, "searchResultsPage")}>
       <Configure
         aroundLatLng={aroundLatLng}
         aroundRadius={aroundUserLocationRadius}