Search component translations (#1883)

* extract translate-able strings -- bill sort

* rename billSearch.json to search.json and update refs

* extract translate-able strings from TestimonyHit component

* extract translate-able strings from search components

* fix build error

* extract translate-able strings from refinement components

* fix/refactor useRefinements

* remove unused hierarchical menu components

* debug testimonyHit translations

* remove unused CurrentCommitteeCard component and its associated stories

* remove unused code from formatting.tsx

* Revert "[1753] Replace custom routing with react-instantsearch-router-nextjs"

* chore(transcriptions): Update firestore rules to allow read-only access to transcription paragraphs

---------

Co-authored-by: Mephistic <[email protected]>

Author: jicruz96

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
 }

components/search/bills/useBillSort.tsx

@@ -1,6 +1,6 @@
 import { Hit } from "instantsearch.js"
 import Link from "next/link"
-import { useTranslation } from "next-i18next"
+import { Trans, useTranslation } from "next-i18next"
 import { Image } from "react-bootstrap"
 import { useMediaQuery } from "usehooks-ts"
 
@@ -25,8 +25,6 @@ export const TestimonyHit = ({ hit }: { hit: Hit<Testimony> }) => {
 }
 
 const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
-  const { t } = useTranslation(["auth"])
-
   const date = new Date(
     parseInt(hit.publishedAt.toString())
   ).toLocaleDateString("en-US", {
@@ -37,12 +35,6 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
   const { loading, error, result: bill } = useBill(hit.court, hit.billId)
   const committee = bill?.currentCommittee
   const isOrg = hit.authorRole === "organization"
-  const writtenBy =
-    isOrg || hit.public ? (
-      <Link href={`/profile?id=${hit.authorUid}`}>{hit.fullName}</Link>
-    ) : (
-      hit.fullName
-    )
   const { user } = useAuth()
   const { followOrg } = useFlags()
   const isCurrentUser = user?.uid === hit.authorUid
@@ -67,12 +59,25 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
       >
         <Image
           src={isOrg ? "/profile-org-icon.svg" : "/profile-individual-icon.svg"}
-          alt={t("profileIcon")}
+          alt={useTranslation("auth").t("profileIcon")}
           height="30px"
           width="30px"
         />
         <span style={{ flexGrow: 1 }}>
-          <b>Written by {writtenBy}</b>
+          <b>
+            <Trans
+              ns="testimony"
+              i18nKey="testimonyHit.writtenBy"
+              values={{ author: hit.fullName }}
+              components={[
+                isOrg || hit.public ? (
+                  <Link href={`/profile?id=${hit.authorUid}`} />
+                ) : (
+                  <></>
+                )
+              ]}
+            />
+          </b>
         </span>
         {hit.public && !isCurrentUser && followOrg && user && (
           <FollowUserButton profileId={hit.authorUid} />
@@ -95,7 +100,11 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
           <div style={{ display: "flex", alignItems: "center", gap: "15px" }}>
             {/* <Link href={maple.bill({ court: hit.court, id: hit.billId })}> */}
             {/* <a> */}
-            <h2>Bill #{formatBillId(hit.billId)}</h2>
+            <h2>
+              {useTranslation("testimony").t("testimonyHit.bill", {
+                billId: formatBillId(hit.billId)
+              })}
+            </h2>
             {/* </a> */}
             {/* </Link> */}
             {committee && (