cleaned up code

Author: mertbagt

components/search/testimony/useTestimonyRefinements.tsx

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

components/search/useRefinements.tsx

@@ -27,7 +27,7 @@ export const useRefinements = ({
   hierarchicalMenuProps,
   refinementProps
 }: {
-  hierarchicalMenuProps: any[]
+  hierarchicalMenuProps?: any[]
   refinementProps: any[]
 }) => {
   const inline = useMediaQuery("(min-width: 768px)")
@@ -43,68 +43,20 @@ export const useRefinements = ({
     </>
   )
 
-  const hierarchicalMenu = (
-    <>
-      <MultiselectHierarchicalMenu
-        attributes={[
-          hierarchicalMenuProps[0].attribute,
-          hierarchicalMenuProps[1].attribute
-        ]}
-      />
-    </>
-  )
-
-  const hasRefinements = useHasRefinements()
-
-  const { t } = useTranslation("billSearch")
+  let hierarchicalMenu = <></>
 
-  return {
-    options: inline ? (
+  if (hierarchicalMenuProps) {
+    hierarchicalMenu = (
       <>
-        <div>{hierarchicalMenu}</div>
-        <div>{refinements}</div>
+        <MultiselectHierarchicalMenu
+          attributes={[
+            hierarchicalMenuProps[0].attribute,
+            hierarchicalMenuProps[1].attribute
+          ]}
+        />
       </>
-    ) : (
-      <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 : (
-      <FilterButton
-        variant="secondary"
-        active={show}
-        onClick={handleOpen}
-        className={hasRefinements ? "ais-FilterButton-has-refinements" : ""}
-      >
-        <FontAwesomeIcon icon={faFilter} /> {t("filter")}
-      </FilterButton>
     )
   }
-}
-
-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()
 
@@ -113,6 +65,7 @@ export const useBasicRefinements = ({
   return {
     options: inline ? (
       <>
+        <div>{hierarchicalMenu}</div>
         <div>{refinements}</div>
       </>
     ) : (
@@ -121,6 +74,7 @@ export const useBasicRefinements = ({
           <Offcanvas.Title>{t("filter")}</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body>
+          <SearchContainer>{hierarchicalMenu}</SearchContainer>
           <SearchContainer>{refinements}</SearchContainer>
         </Offcanvas.Body>
       </Offcanvas>