unified filter buttons

Author: mertbagt

components/search/bills/BillSearch.tsx

@@ -18,7 +18,6 @@ import { SearchErrorBoundary } from "../SearchErrorBoundary"
 import { useRouting } from "../useRouting"
 import { BillHit } from "./BillHit"
 import { useBillRefinements } from "./useBillRefinements"
-import { useBillHierarchicalMenu } from "./useBillHierarchicalMenu"
 import { SortBy, SortByWithConfigurationItem } from "../SortBy"
 import { getServerConfig } from "../common"
 import { useBillSort } from "./useBillSort"
@@ -103,7 +102,6 @@ const Layout: FC<
   React.PropsWithChildren<{ items: SortByWithConfigurationItem[] }>
 > = ({ items }) => {
   const refinements = useBillRefinements()
-  const hierarchicalMenu = useBillHierarchicalMenu()
   const status = useSearchStatus()
 
   const { t } = useTranslation("billSearch")
@@ -115,14 +113,12 @@ const Layout: FC<
       </Row>
       <Row>
         <Col xs={3} lg={3}>
-          {hierarchicalMenu.options}
           {refinements.options}
         </Col>
         <Col className="d-flex flex-column">
           <RefinementRow>
             <ResultCount className="flex-grow-1 m-1" />
             <SortBy items={items} />
-            {hierarchicalMenu.show}
             {refinements.show}
           </RefinementRow>
           <CurrentRefinements

components/search/bills/useBillHierarchicalMenu.tsx

@@ -56,5 +56,19 @@ export const useBillRefinements = () => {
     }
   ]
 
-  return useRefinements({ refinementProps: propsList })
+  const hierarchoicalPropsList = [
+    {
+      attribute: "topics.lvl0",
+      ...baseProps
+    },
+    {
+      attribute: "topics.lvl1",
+      ...baseProps
+    }
+  ]
+
+  return useRefinements({
+    hierarchicalMenuProps: hierarchoicalPropsList,
+    refinementProps: propsList
+  })
 }

components/search/bills/useBillRefinements.tsx

@@ -2,10 +2,11 @@ import { useTranslation } from "next-i18next"
 import { RefinementList, useInstantSearch } from "react-instantsearch"
 import { faFilter } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useState } from "react"
 import styled from "styled-components"
 import { useMediaQuery } from "usehooks-ts"
-import { Button, Col, Offcanvas } from "../bootstrap"
+import { Button, Offcanvas } from "../bootstrap"
+import { MultiselectHierarchicalMenu } from "./HierarchicalMenuWidget"
 import { SearchContainer } from "./SearchContainer"
 
 export const FilterButton = styled(Button)`
@@ -15,15 +16,18 @@ export const FilterButton = styled(Button)`
   padding: 0.25rem 0.5rem 0.25rem 0.5rem;
   align-self: flex-start;
 `
+
 const useHasRefinements = () => {
   const { results } = useInstantSearch()
   const refinements = results.getRefinements()
   return refinements.length !== 0
 }
 
 export const useRefinements = ({
+  hierarchicalMenuProps,
   refinementProps
 }: {
+  hierarchicalMenuProps: any[]
   refinementProps: any[]
 }) => {
   const inline = useMediaQuery("(min-width: 768px)")
@@ -38,19 +42,35 @@ export const useRefinements = ({
       ))}
     </>
   )
+
+  const hierarchicalMenu = (
+    <>
+      <MultiselectHierarchicalMenu
+        attributes={[
+          hierarchicalMenuProps[0].attribute,
+          hierarchicalMenuProps[1].attribute
+        ]}
+      />
+    </>
+  )
+
   const hasRefinements = useHasRefinements()
 
   const { t } = useTranslation("billSearch")
 
   return {
     options: inline ? (
-      <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>