Merge pull request #1753 from mertbagt/bill-search-filters-reorg

Reordered and Renamed Bill Search filters

Author: Mephistic

components/search/bills/BillSearch.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "next-i18next"
 import {
   CurrentRefinements,
   Hits,
@@ -105,6 +106,8 @@ const Layout: FC<
   const hierarchicalMenu = useBillHierarchicalMenu()
   const status = useSearchStatus()
 
+  const { t } = useTranslation("billSearch")
+
   return (
     <SearchContainer>
       <Row>
@@ -129,9 +132,9 @@ const Layout: FC<
           />
           {status === "empty" ? (
             <NoResults>
-              Your search has yielded zero results!
+              {t("zero_results")}
               <br />
-              <b>Try another search term</b>
+              <b>{t("another_term")}</b>
             </NoResults>
           ) : (
             <Hits hitComponent={BillHit} />

components/search/bills/useBillRefinements.tsx

@@ -3,6 +3,19 @@ import { RefinementListItem } from "instantsearch.js/es/connectors/refinement-li
 import { useCallback } from "react"
 import { useRefinements } from "../useRefinements"
 
+// for legacy code purposes, things like:
+//
+//   `legislative session` and `session`
+//
+// are used by variables that are named things like:
+//
+//   `general court` and `court`
+//
+// see example below:
+//
+//   attribute: "court",
+//   searchablePlaceholder: "Legislative Session",
+
 export const useBillRefinements = () => {
   const baseProps = { limit: 500, searchable: true }
   const propsList = [
@@ -18,7 +31,7 @@ export const useBillRefinements = () => {
         []
       ),
       attribute: "court",
-      searchablePlaceholder: "General Court",
+      searchablePlaceholder: "Legislative Session",
       ...baseProps
     },
     {

components/search/useHierarchicalMenu.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "next-i18next"
 import { useInstantSearch } from "react-instantsearch"
 import { faFilter } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
@@ -42,13 +43,15 @@ export const useHierarchicalMenu = ({
   )
   const hasRefinements = useHasRefinements()
 
+  const { t } = useTranslation("billSearch")
+
   return {
     options: inline ? (
       <div>{hierarchicalMenu}</div>
     ) : (
       <Offcanvas show={show} onHide={handleClose}>
         <Offcanvas.Header closeButton>
-          <Offcanvas.Title>Filter</Offcanvas.Title>
+          <Offcanvas.Title>{t("topics")}</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body>
           <SearchContainer>{hierarchicalMenu}</SearchContainer>
@@ -62,7 +65,7 @@ export const useHierarchicalMenu = ({
         onClick={handleOpen}
         className={hasRefinements ? "ais-FilterButton-has-refinements" : ""}
       >
-        <FontAwesomeIcon icon={faFilter} /> Filter
+        <FontAwesomeIcon icon={faFilter} /> {t("topics")}
       </FilterButton>
     )
   }

components/search/useRefinements.tsx

@@ -1,3 +1,4 @@
+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"
@@ -39,13 +40,15 @@ export const useRefinements = ({
   )
   const hasRefinements = useHasRefinements()
 
+  const { t } = useTranslation("billSearch")
+
   return {
     options: inline ? (
       <div>{refinements}</div>
     ) : (
       <Offcanvas show={show} onHide={handleClose}>
         <Offcanvas.Header closeButton>
-          <Offcanvas.Title>Filter</Offcanvas.Title>
+          <Offcanvas.Title>{t("filter")}</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body>
           <SearchContainer>{refinements}</SearchContainer>
@@ -59,7 +62,7 @@ export const useRefinements = ({
         onClick={handleOpen}
         className={hasRefinements ? "ais-FilterButton-has-refinements" : ""}
       >
-        <FontAwesomeIcon icon={faFilter} /> Filter
+        <FontAwesomeIcon icon={faFilter} /> {t("filter")}
       </FilterButton>
     )
   }

pages/bills/index.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "next-i18next"
 import { Container } from "components/bootstrap"
 import { createPage } from "components/page"
 import { BillSearch } from "components/search"
@@ -6,9 +7,11 @@ import { createGetStaticTranslationProps } from "components/translations"
 export default createPage({
   title: "Browse Bills",
   Page: () => {
+    const { t } = useTranslation("billSearch")
+
     return (
       <Container fluid="md" className="mt-3">
-        <h1>Browse Bills</h1>
+        <h1>{t("browse_bills")}</h1>
         <BillSearch />
       </Container>
     )
@@ -17,6 +20,7 @@ export default createPage({
 
 export const getStaticProps = createGetStaticTranslationProps([
   "auth",
+  "billSearch",
   "common",
   "footer",
   "testimony"

public/locales/en/billSearch.json

@@ -0,0 +1,7 @@
+{
+  "another_term" : "Try another search term",
+  "browse_bills" : "Browse Bills",
+  "filter" : "Filter",
+  "topics" : "Topics",
+  "zero_results" : "Your search has yielded zero results!"
+}