Merge pull request #1927 from codeforboston/main

Deploy to PROD 8/25/25

Author: Mephistic

.all-contributorsrc

@@ -740,6 +740,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "rockyroed",
+      "name": "roed",
+      "avatar_url": "https://avatars.githubusercontent.com/u/108738926?v=4",
+      "profile": "https://github.com/rockyroed",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitType": "docs"

README.md

@@ -236,10 +236,11 @@ Thanks to all our contributors!
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mvictor55"><img src="https://avatars.githubusercontent.com/u/71357256?v=4?s=100" width="100px;" alt="mvictor55"/><br /><sub><b>mvictor55</b></sub></a><br /><a href="#business-mvictor55" title="Business development">💼</a> <a href="#projectManagement-mvictor55" title="Project Management">📆</a> <a href="#fundingFinding-mvictor55" title="Funding Finding">🔍</a> <a href="https://github.com/codeforboston/maple/commits?author=mvictor55" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/pranay8297"><img src="https://avatars.githubusercontent.com/u/47974414?v=4?s=100" width="100px;" alt="pranay"/><br /><sub><b>pranay</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=pranay8297" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ren0nie0"><img src="https://avatars.githubusercontent.com/u/32780767?v=4?s=100" width="100px;" alt="ren0nie0"/><br /><sub><b>ren0nie0</b></sub></a><br /><a href="#research-ren0nie0" title="Research">🔬</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rockyroed"><img src="https://avatars.githubusercontent.com/u/108738926?v=4?s=100" width="100px;" alt="roed"/><br /><sub><b>roed</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=rockyroed" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/sammymyi"><img src="https://avatars.githubusercontent.com/u/105759252?v=4?s=100" width="100px;" alt="sammymyi"/><br /><sub><b>sammymyi</b></sub></a><br /><a href="#design-sammymyi" title="Design">🎨</a> <a href="#userTesting-sammymyi" title="User Testing">📓</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sashamaryl"><img src="https://avatars.githubusercontent.com/u/30247522?v=4?s=100" width="100px;" alt="sashamaryl"/><br /><sub><b>sashamaryl</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=sashamaryl" title="Code">💻</a> <a href="#mentoring-sashamaryl" title="Mentoring">🧑‍🏫</a> <a href="#research-sashamaryl" title="Research">🔬</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sashamaryl"><img src="https://avatars.githubusercontent.com/u/30247522?v=4?s=100" width="100px;" alt="sashamaryl"/><br /><sub><b>sashamaryl</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=sashamaryl" title="Code">💻</a> <a href="#mentoring-sashamaryl" title="Mentoring">🧑‍🏫</a> <a href="#research-sashamaryl" title="Research">🔬</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/shannonh800"><img src="https://avatars.githubusercontent.com/u/113308101?v=4?s=100" width="100px;" alt="shannonh800"/><br /><sub><b>shannonh800</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=shannonh800" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/yasminekarni"><img src="https://avatars.githubusercontent.com/u/47721405?v=4?s=100" width="100px;" alt="yasminekarni"/><br /><sub><b>yasminekarni</b></sub></a><br /><a href="https://github.com/codeforboston/maple/commits?author=yasminekarni" title="Code">💻</a></td>
     </tr>

components/HearingsScheduled/HearingsScheduled.tsx

@@ -219,8 +219,8 @@ export const HearingsScheduled = () => {
               wrap={false}
               activeIndex={monthIndex}
               onSelect={handleSelect}
-              prevIcon={<CarouselControlNextIcon aria-hidden="true" />}
-              nextIcon={<CarouselControlPrevIcon aria-hidden="true" />}
+              prevIcon={<CarouselControlPrevIcon aria-hidden="true" />}
+              nextIcon={<CarouselControlNextIcon aria-hidden="true" />}
             >
               {monthsList?.map(month => {
                 return (

components/search/NoResults.tsx

@@ -19,11 +19,11 @@ const Container = styled.div`
 export const NoResults: React.FC<React.PropsWithChildren<unknown>> = ({
   children
 }) => {
-  const { t } = useTranslation("common")
+  const { t } = useTranslation("search")
   return (
     <Container>
-      <Image src="/no-results.svg" alt={t("noResults")} />
-      <div className="fs-3">Looks Pretty Empty Here</div>
+      <Image src="/no-results.svg" alt={t("no_results")} />
+      <div className="fs-3">{t("looks_pretty_empty_here")}</div>
       <div className="text-center">{children}</div>
     </Container>
   )

components/search/ResultCount.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "next-i18next"
 import { useStats } from "react-instantsearch"
 import styled from "styled-components"
 
@@ -13,7 +14,11 @@ export function ResultCount(props: any) {
 
   return (
     <ResultContainer {...props}>
-      Showing {pageStart}-{pageEnd} of {nbHits} Results
+      {useTranslation("search").t("result_count", {
+        pageStart,
+        pageEnd,
+        nbHits
+      })}
     </ResultContainer>
   )
 }

components/search/SearchErrorBoundary.tsx

@@ -1,9 +1,10 @@
 import React, { ReactNode } from "react"
 import { Alert } from "react-bootstrap"
+import { withTranslation, WithTranslation } from "next-i18next"
 
-export class SearchErrorBoundary extends React.Component<{
-  children?: ReactNode
-}> {
+class SearchErrorBoundaryBase extends React.Component<
+  { children?: ReactNode } & WithTranslation
+> {
   state: { error: string | null } = { error: null }
 
   promiseRejectionHandler = (event: PromiseRejectionEvent) => {
@@ -16,8 +17,7 @@ export class SearchErrorBoundary extends React.Component<{
     if (this.state.error) {
       return (
         <Alert variant="danger">
-          Something went wrong. Please try again. Original message:{" "}
-          {this.state.error}
+          {this.props.t("search_error", { error: this.state.error })}
         </Alert>
       )
     }
@@ -44,3 +44,7 @@ export class SearchErrorBoundary extends React.Component<{
     )
   }
 }
+
+export const SearchErrorBoundary = withTranslation("search")(
+  SearchErrorBoundaryBase
+)

components/search/bills/BillSearch.tsx

@@ -147,7 +147,7 @@ const Layout: FC<
   const refinements = useBillRefinements()
   const status = useSearchStatus()
 
-  const { t } = useTranslation("billSearch")
+  const { t } = useTranslation("search")
 
   return (
     <SearchContainer>

components/search/bills/useBillHierarchicalMenu.tsx

@@ -1,7 +1,8 @@
 import { generalCourts } from "functions/src/shared"
 import { RefinementListItem } from "instantsearch.js/es/connectors/refinement-list/connectRefinementList"
-import { useCallback } from "react"
+import { useMemo } from "react"
 import { useRefinements } from "../useRefinements"
+import { useTranslation } from "next-i18next"
 
 // for legacy code purposes, things like:
 //
@@ -17,58 +18,35 @@ import { useRefinements } from "../useRefinements"
 //   searchablePlaceholder: "Legislative Session",
 
 export const useBillRefinements = () => {
-  const baseProps = { limit: 500, searchable: true }
-  const propsList = [
-    {
-      transformItems: useCallback(
-        (i: RefinementListItem[]) =>
-          i
-            .map(i => ({
-              ...i,
-              label: generalCourts[i.value as any]?.Name ?? i.label
-            }))
-            .sort((a, b) => Number(b.value) - Number(a.value)),
-        []
-      ),
-      attribute: "court",
-      searchablePlaceholder: "Legislative Session",
-      ...baseProps
-    },
-    {
-      attribute: "currentCommittee",
-      ...baseProps,
-      searchablePlaceholder: "Current Committee"
-    },
-    {
-      attribute: "city",
-      searchablePlaceholder: "City",
-      ...baseProps
-    },
-    {
-      attribute: "primarySponsor",
-      ...baseProps,
-      searchablePlaceholder: "Primary Sponsor"
-    },
-    {
-      attribute: "cosponsors",
-      ...baseProps,
-      searchablePlaceholder: "Cosponsor"
-    }
-  ]
-
-  const hierarchicalPropsList = [
-    {
-      attribute: "topics.lvl0",
-      ...baseProps
-    },
-    {
-      attribute: "topics.lvl1",
-      ...baseProps
-    }
-  ]
+  const { t } = useTranslation("search")
 
   return useRefinements({
-    hierarchicalMenuProps: hierarchicalPropsList,
-    refinementProps: propsList
+    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 => ({
+          limit: 500,
+          searchable: true,
+          searchablePlaceholder: t(`refinements.bill.${props.attribute}`),
+          ...props
+        })),
+      [t]
+    )
   })
 }

components/search/bills/useBillRefinements.tsx

@@ -1,31 +1,33 @@
 import { useMemo, useRef } from "react"
 import { SortByWithConfigurationItem } from "../SortBy"
+import { useTranslation } from "next-i18next"
 
 export const useBillSort = () => {
   const now = useRef(new Date().getTime())
+  const { t } = useTranslation("search")
 
   // refer to
   // https://github.com/typesense/typesense-instantsearch-adapter#with-react-instantsearch
   const items: SortByWithConfigurationItem[] = useMemo(
     () => [
       {
-        label: "Sort by Most Recent Testimony",
+        label: t("sort_by.most_recent_testimony"),
         value: "bills/sort/latestTestimonyAt:desc"
       },
       {
-        label: "Sort by Relevance",
+        label: t("sort_by.relevance"),
         value: "bills/sort/_text_match:desc,testimonyCount:desc"
       },
       {
-        label: "Sort by Testimony Count",
+        label: t("sort_by.testimony_count"),
         value: "bills/sort/testimonyCount:desc"
       },
       {
-        label: "Sort by Cosponsor Count",
+        label: t("sort_by.cosponsor_count"),
         value: "bills/sort/cosponsorCount:desc"
       },
       {
-        label: "Sort by Next Hearing Date",
+        label: t("sort_by.next_hearing_date"),
         value: "bills/sort/nextHearingAt:asc",
         configure: {
           numericRefinements: {
@@ -36,7 +38,7 @@ export const useBillSort = () => {
         }
       }
     ],
-    []
+    [t]
   )
   return items
 }