uncross the streams

Author: mertbagt

components/search/testimony/useTestimonyRefinements.tsx

@@ -1,5 +1,5 @@
 import { RefinementListItem } from "instantsearch.js/es/connectors/refinement-list/connectRefinementList"
-import { useRefinements } from "../useRefinements"
+import { useBasicRefinements } from "../useRefinements"
 import { useCallback } from "react"
 
 export const useTestimonyRefinements = () => {
@@ -37,5 +37,5 @@ export const useTestimonyRefinements = () => {
     }
   ]
 
-  return useRefinements({ refinementProps: propsList })
+  return useBasicRefinements({ refinementProps: propsList })
 }

components/search/useRefinements.tsx

@@ -87,3 +87,53 @@ export const useRefinements = ({
     )
   }
 }
+
+export const useBasicRefinements = ({
+  refinementProps
+}: {
+  refinementProps: any[]
+}) => {
+  const inline = useMediaQuery("(min-width: 768px)")
+  const [show, setShow] = useState(false)
+  const handleClose = useCallback(() => setShow(false), [])
+  const handleOpen = useCallback(() => setShow(true), [])
+
+  const refinements = (
+    <>
+      {refinementProps.map((p, i) => (
+        <RefinementList className="mb-4" key={i} {...(p as any)} />
+      ))}
+    </>
+  )
+
+  const hasRefinements = useHasRefinements()
+
+  const { t } = useTranslation("billSearch")
+
+  return {
+    options: inline ? (
+      <>
+        <div>{refinements}</div>
+      </>
+    ) : (
+      <Offcanvas show={show} onHide={handleClose}>
+        <Offcanvas.Header closeButton>
+          <Offcanvas.Title>{t("filter")}</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body>
+          <SearchContainer>{refinements}</SearchContainer>
+        </Offcanvas.Body>
+      </Offcanvas>
+    ),
+    show: inline ? null : (
+      <FilterButton
+        variant="secondary"
+        active={show}
+        onClick={handleOpen}
+        className={hasRefinements ? "ais-FilterButton-has-refinements" : ""}
+      >
+        <FontAwesomeIcon icon={faFilter} /> {t("filter")}
+      </FilterButton>
+    )
+  }
+}