Merge pull request #1780 from kiminkim724/fix-mobile-filters

Fix Mobile Filters

Author: Mephistic

components/search/bills/BillSearch.tsx

@@ -19,9 +19,8 @@ import { useRouting } from "../useRouting"
 import { BillHit } from "./BillHit"
 import { useBillRefinements } from "./useBillRefinements"
 import { SortBy, SortByWithConfigurationItem } from "../SortBy"
-import { getServerConfig } from "../common"
+import { getServerConfig, VirtualFilters } from "../common"
 import { useBillSort } from "./useBillSort"
-import { useMediaQuery } from "usehooks-ts"
 import { FC, useState } from "react"
 
 const searchClient = new TypesenseInstantSearchAdapter({
@@ -72,7 +71,9 @@ export const BillSearch = () => {
         }}
         searchClient={searchClient}
         routing={useRouting()}
+        future={{ preserveSharedStateOnUnmount: true }}
       >
+        <VirtualFilters type="bill" />
         <Layout items={items} />
       </InstantSearch>
     </SearchErrorBoundary>
@@ -148,16 +149,14 @@ const Layout: FC<
 
   const { t } = useTranslation("billSearch")
 
-  const inline = useMediaQuery("(min-width: 768px)")
-
   return (
     <SearchContainer>
       <Row>
         <SearchBox placeholder="Search For Bills" className="mt-2 mb-3" />
       </Row>
       <Row>
-        <Col xs={3} lg={3}>
-          {inline ? refinements.options : null}
+        <Col xs={0} lg={3}>
+          {refinements.options}
         </Col>
         <Col className="d-flex flex-column">
           <RefinementRow>

components/search/common.tsx

@@ -1,3 +1,4 @@
+import { useRefinementList } from "react-instantsearch"
 import { TypesenseInstantsearchAdapterOptions } from "typesense-instantsearch-adapter"
 
 const devConfig = {
@@ -27,3 +28,30 @@ export function getServerConfig(): TypesenseInstantsearchAdapterOptions["server"
     ]
   }
 }
+
+function RefinementList({ attribute }: { attribute: string }) {
+  useRefinementList({ attribute })
+  return null
+}
+
+export function VirtualFilters({ type }: { type: "bill" | "testimony" }) {
+  const refinementAttributes =
+    type === "testimony"
+      ? ["authorDisplayName", "court", "position", "billId", "authorRole"]
+      : [
+          "court",
+          "currentCommittee",
+          "city",
+          "primarySponsor",
+          "cosponsors",
+          "topics.lvl1"
+        ]
+
+  return (
+    <>
+      {refinementAttributes.map(attribute => (
+        <RefinementList key={attribute} attribute={attribute} />
+      ))}
+    </>
+  )
+}

components/search/testimony/TestimonySearch.tsx

@@ -22,7 +22,7 @@ import { ResultCount } from "../ResultCount"
 import { SearchContainer } from "../SearchContainer"
 import { SearchErrorBoundary } from "../SearchErrorBoundary"
 import { SortBy } from "../SortBy"
-import { getServerConfig } from "../common"
+import { getServerConfig, VirtualFilters } from "../common"
 import { useRouting } from "../useRouting"
 import { TestimonyHit } from "./TestimonyHit"
 import { useTestimonyRefinements } from "./useTestimonyRefinements"
@@ -64,7 +64,9 @@ export const TestimonySearch = () => (
       }}
       searchClient={searchClient}
       routing={useRouting()}
+      future={{ preserveSharedStateOnUnmount: true }}
     >
+      <VirtualFilters type="testimony" />
       <Layout />
     </InstantSearch>
   </SearchErrorBoundary>
@@ -149,7 +151,7 @@ const Layout = () => {
             />
           </Row>
           <Row>
-            <Col xs={3} lg={3}>
+            <Col xs={0} lg={3}>
               {refinements.options}
             </Col>
             <Col className="d-flex flex-column">

components/search/useRefinements.tsx

@@ -69,28 +69,25 @@ export const useRefinements = ({
         <div>{refinements}</div>
       </>
     ) : (
-      <>
-        <div>{hierarchicalMenu}</div>
-        <div>{refinements}</div>
-      </>
-      //   <Offcanvas show={show} onHide={handleClose}>
-      //     <Offcanvas.Header closeButton>
-      //       <Offcanvas.Title>{t("filter")}</Offcanvas.Title>
-      //     </Offcanvas.Header>
-      //     <Offcanvas.Body>
-      //       <SearchContainer>{hierarchicalMenu}</SearchContainer>
-      //       <SearchContainer>{refinements}</SearchContainer>
-      //     </Offcanvas.Body>
-      //   </Offcanvas>
+      <Offcanvas show={show} onHide={handleClose}>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>{t("filter")}</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          <SearchContainer>{hierarchicalMenu}</SearchContainer>
+          <SearchContainer>{refinements}</SearchContainer>
+        </Offcanvas.Body>
+      </Offcanvas>
     ),
-    show: inline ? null : null
-    // <FilterButton
-    //   variant="secondary"
-    //   active={show}
-    //   onClick={handleOpen}
-    //   className={hasRefinements ? "ais-FilterButton-has-refinements" : ""}
-    // >
-    //   <FontAwesomeIcon icon={faFilter} /> {t("filter")}
-    // </FilterButton>
+    show: inline ? null : (
+      <FilterButton
+        variant="secondary"
+        active={show}
+        onClick={handleOpen}
+        className={hasRefinements ? "ais-FilterButton-has-refinements" : ""}
+      >
+        <FontAwesomeIcon icon={faFilter} /> {t("filter")}
+      </FilterButton>
+    )
   }
 }

pages/testimony/index.tsx

@@ -17,6 +17,7 @@ export default createPage({
 
 export const getStaticProps = createGetStaticTranslationProps([
   "auth",
+  "billSearch",
   "common",
   "footer",
   "testimony",