fix/refactor useRefinements

Author: jicruz96

components/search/bills/useBillRefinements.tsx

@@ -1,6 +1,6 @@
 import { generalCourts } from "functions/src/shared"
 import { RefinementListItem } from "instantsearch.js/es/connectors/refinement-list/connectRefinementList"
-import { useCallback, useMemo } from "react"
+import { useMemo } from "react"
 import { useRefinements } from "../useRefinements"
 import { useTranslation } from "next-i18next"
 
@@ -18,49 +18,35 @@ import { useTranslation } from "next-i18next"
 //   searchablePlaceholder: "Legislative Session",
 
 export const useBillRefinements = () => {
-  const baseProps = { limit: 500, searchable: true }
   const { t } = useTranslation("search")
-  const propsList = useMemo(
-    () =>
-      [
-        {
-          transformItems: useCallback(
-            (items: RefinementListItem[]) =>
+
+  return useRefinements({
+    hierarchicalMenuProps: { attributes: ["topics.lvl0", "topics.lvl1"] },
+    refinementProps: useMemo(
+      () =>
+        [
+          {
+            transformItems: (items: RefinementListItem[]) =>
               items
                 .map(i => ({
                   ...i,
                   label: generalCourts[parseInt(i.value, 10)]?.Name ?? i.label
                 }))
                 .sort((a, b) => Number(b.value) - Number(a.value)),
-            []
-          ),
-          attribute: "court"
-        },
-        { attribute: "currentCommittee" },
-        { attribute: "city" },
-        { attribute: "primarySponsor" },
-        { attribute: "cosponsors" }
-      ].map(props => ({
-        searchablePlaceholder: t(`refinements.bill.${props.attribute}`),
-        ...baseProps,
-        ...props
-      })),
-    [t]
-  )
 
-  const hierarchicalPropsList = [
-    {
-      attribute: "topics.lvl0",
-      ...baseProps
-    },
-    {
-      attribute: "topics.lvl1",
-      ...baseProps
-    }
-  ]
-
-  return useRefinements({
-    hierarchicalMenuProps: hierarchicalPropsList,
-    refinementProps: propsList
+            attribute: "court"
+          },
+          { attribute: "currentCommittee" },
+          { attribute: "city" },
+          { attribute: "primarySponsor" },
+          { attribute: "cosponsors" }
+        ].map(props => ({
+          limit: 500,
+          searchable: true,
+          searchablePlaceholder: t(`refinements.bill.${props.attribute}`),
+          ...props
+        })),
+      [t]
+    )
   })
 }

components/search/testimony/useTestimonyRefinements.tsx

@@ -1,32 +1,31 @@
 import { RefinementListItem } from "instantsearch.js/es/connectors/refinement-list/connectRefinementList"
 import { useRefinements } from "../useRefinements"
-import { useCallback, useMemo } from "react"
+import { useMemo } from "react"
 import { useTranslation } from "next-i18next"
 
 export const useTestimonyRefinements = () => {
   const { t } = useTranslation("search")
-  const refinementProps = useMemo(
-    () =>
-      [
-        {
-          transformItems: useCallback(
-            (i: RefinementListItem[]) => i.filter(i => i.label !== "private"),
-            []
-          ),
-          attribute: "authorDisplayName"
-        },
-        { attribute: "court" },
-        { attribute: "position" },
-        { attribute: "billId" },
-        { attribute: "authorRole", searchable: false, hidden: true }
-      ].map(props => ({
-        limit: 500,
-        searchable: props.searchable ?? true,
-        searchablePlaceholder: t(`refinements.testimony.${props.attribute}`),
-        ...props
-      })),
-    [t]
-  )
 
-  return useRefinements({ refinementProps })
+  return useRefinements({
+    refinementProps: useMemo(
+      () =>
+        [
+          {
+            transformItems: (i: RefinementListItem[]) =>
+              i.filter(i => i.label !== "private"),
+            attribute: "authorDisplayName"
+          },
+          { attribute: "court" },
+          { attribute: "position" },
+          { attribute: "billId" },
+          { attribute: "authorRole", searchable: false, hidden: true }
+        ].map(props => ({
+          limit: 500,
+          searchable: true,
+          searchablePlaceholder: t(`refinements.testimony.${props.attribute}`),
+          ...props
+        })),
+      [t]
+    )
+  })
 }

components/search/useRefinements.tsx

@@ -1,12 +1,19 @@
 import { useTranslation } from "next-i18next"
-import { RefinementList, useInstantSearch } from "react-instantsearch"
+import {
+  RefinementList,
+  RefinementListProps,
+  useInstantSearch
+} from "react-instantsearch"
 import { faFilter } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useCallback, useState } from "react"
 import styled from "styled-components"
 import { useMediaQuery } from "usehooks-ts"
 import { Button, Offcanvas } from "../bootstrap"
-import { MultiselectHierarchicalMenu } from "./HierarchicalMenuWidget"
+import {
+  MultiselectHierarchicalMenu,
+  MultiselectHierarchicalMenuParams
+} from "./HierarchicalMenuWidget"
 import { SearchContainer } from "./SearchContainer"
 
 export const FilterButton = styled(Button)`
@@ -27,8 +34,8 @@ export const useRefinements = ({
   hierarchicalMenuProps,
   refinementProps
 }: {
-  hierarchicalMenuProps?: any[]
-  refinementProps: any[]
+  hierarchicalMenuProps?: MultiselectHierarchicalMenuParams
+  refinementProps: RefinementListProps[]
 }) => {
   const inline = useMediaQuery("(min-width: 768px)")
   const [show, setShow] = useState(false)
@@ -38,25 +45,16 @@ export const useRefinements = ({
   const refinements = (
     <>
       {refinementProps.map((p, i) => (
-        <RefinementList className="mb-4" key={i} {...(p as any)} />
+        <RefinementList className="mb-4" key={i} {...p} />
       ))}
     </>
   )
 
-  let hierarchicalMenu = <></>
-
-  if (hierarchicalMenuProps) {
-    hierarchicalMenu = (
-      <>
-        <MultiselectHierarchicalMenu
-          attributes={[
-            hierarchicalMenuProps[0].attribute,
-            hierarchicalMenuProps[1].attribute
-          ]}
-        />
-      </>
-    )
-  }
+  const hierarchicalMenu = hierarchicalMenuProps ? (
+    <MultiselectHierarchicalMenu {...hierarchicalMenuProps} />
+  ) : (
+    <></>
+  )
 
   const hasRefinements = useHasRefinements()