fix miscellaneous translations + build warnings (#1934)

* misc translations intermediary commit

* silence react-hooks/exhaustive-deps warnings

* silence build warnings

* format files

* fix testimony counts translation string

* debug policy page translation

* Add key to policy tabs

* fix i18n key bug in PolicyPage values section

* simplify translation approach for ArchiveTestimonyConfirmation

* refactor translation keys in QuickInfo component for consistency and clarity

* add errorLabel translation to testimony.json and update usage in PublishTestimony component

* add character count translation to reportModal in testimony.json and update usage in ReportModal component

* update error handling in PublishTestimony component to use errorMessage translation key

* update publish button text to use new translation key for conditional rendering

* remove unnecessary whitespace in CopyButton label in SelectRecipients component

* fix publish button translation string

* fix edit limit notice

Author: jicruz96

components/HearingsScheduled/HearingsScheduled.tsx

@@ -3,7 +3,7 @@ import { Container, Carousel, Spinner } from "react-bootstrap"
 import styled from "styled-components"
 import { Col, Row } from "../bootstrap"
 import { useCalendarEvents } from "./calendarEvents"
-import { useTranslation } from "react-i18next"
+import { useTranslation } from "next-i18next"
 
 export type EventData = {
   index: number

components/Legislative/Legislative.tsx

@@ -1,6 +1,6 @@
 import { Container } from "react-bootstrap"
 import { TestimonyCardList } from "components/LearnTestimonyComponents/TestimonyCardComponents"
-import { useTranslation } from "react-i18next"
+import { useTranslation } from "next-i18next"
 
 const LegislativeContent = [
   {

components/Policies/PolicyPage.tsx

@@ -1,63 +1,42 @@
 import { PolicyContent } from "./PolicyContent"
 import { Button, Stack, Container, Image, Row, Col } from "react-bootstrap"
-import { ButtonHTMLAttributes, useEffect, useState } from "react"
 import style from "./PolicyPage.module.css"
 import Router from "next/router"
 import classNames from "classnames"
+import { useTranslation } from "next-i18next"
 
-const policies = ["copyright", "privacy-policy", "code-of-conduct"] as const
+const policies = ["privacy-policy", "copyright", "code-of-conduct"] as const
 export type Policy = (typeof policies)[number]
 
 export default function PolicyPage({
   policy = "privacy-policy"
 }: {
   policy?: Policy
 }) {
-  const handleOnClick = (p: Policy) => {
-    Router.push(`/policies/${p}`)
-  }
-
+  const { t } = useTranslation("policies")
   return (
     <Container fluid className={style.policyContent}>
-      <h1>Policies</h1>
+      <h1>{t("title")}</h1>
       <Stack direction="horizontal">
-        <Button
-          className={`${
-            style[policy === "privacy-policy" ? "currentTab" : "tab"]
-          }`}
-          id="privacy-policy"
-          onClick={e => handleOnClick("privacy-policy")}
-        >
-          Privacy <br /> Policy
-        </Button>
-        <Button
-          className={`${style[policy === "copyright" ? "currentTab" : "tab"]}`}
-          id="copyright"
-          onClick={e => handleOnClick("copyright")}
-        >
-          Terms of Service <br />
-        </Button>
-
-        <Button
-          className={`${
-            style[policy === "code-of-conduct" ? "currentTab" : "tab"]
-          }`}
-          id="code-of-conduct"
-          onClick={e => handleOnClick("code-of-conduct")}
-        >
-          Code of <br /> Conduct
-        </Button>
+        {policies.map(p => (
+          <Button
+            className={`${style[policy === p ? "currentTab" : "tab"]}`}
+            id={p}
+            key={p}
+            onClick={() => Router.push(`/policies/${p}`)}
+          >
+            {t(`tabs.${p}`)}
+          </Button>
+        ))}
       </Stack>
 
       <PolicyContent policy={policy} />
 
       <div className={style.sharedValues}>
-        <p className={style.subHeading}>Our Shared Values</p>
+        <p className={style.subHeading}>{t("values.heading")}</p>
         <hr className={style.bottomBorder}></hr>
-        <p className={style.text1}>
-          How we interact with each other determines what we can accomplish
-        </p>
-        <p className={style.text2}>On this website, we ask you to act with:</p>
+        <p className={style.text1}>{t("values.description1")}</p>
+        <p className={style.text2}>{t("values.description2")}</p>
       </div>
 
       <Container fluid>
@@ -71,19 +50,19 @@ export default function PolicyPage({
         >
           <Col xs={12} className={style.blueBox}>
             <Image src="/handShake.jpg" alt="" className={style.symbol}></Image>
-            <p className={style.values}>Humility</p>
+            <p className={style.values}>{t("values.humility")}</p>
           </Col>
           <Col xs={12} className={style.blueBox}>
             <Image
               src="/compassion.png"
               alt=""
               className={style.symbol}
             ></Image>
-            <p className={style.values}>Compassion</p>
+            <p className={style.values}>{t("values.compassion")}</p>
           </Col>
           <Col xs={12} className={style.blueBox}>
             <Image src="/lightBulb.png" alt="" className={style.symbol}></Image>
-            <p className={style.values}>Curiosity</p>
+            <p className={style.values}>{t("values.curiosity")}</p>
           </Col>
         </Row>
       </Container>

components/PriorityBillsCard/PriorityBillsCard.tsx

@@ -82,7 +82,3 @@ const Position = (stance: string) => {
     </div>
   )
 }
-
-const EditBtnStyle = styled.p`
-  color: #8999d6;
-`

components/TestimonyCard/ReportModal.tsx

@@ -95,8 +95,10 @@ export function ReportModal({
             />
           </FloatingLabel>
           <div className="text-muted">
-            {additionalInformation.length}/{ADDITIONAL_INFO_MAX_LENGTH_CHARS}{" "}
-            characters
+            {t("character_count", {
+              count: additionalInformation.length,
+              limit: ADDITIONAL_INFO_MAX_LENGTH_CHARS
+            })}
           </div>
         </Modal.Body>
         <Modal.Footer>

components/bill/Status.tsx

@@ -5,6 +5,7 @@ import { Button, Modal } from "../bootstrap"
 import { StyledBillTitle, StyledModalTitle } from "./HistoryModal"
 import { HistoryTable } from "./HistoryTable"
 import { BillProps } from "./types"
+import { useTranslation } from "next-i18next"
 
 const StyledButton = styled(Button)`
   border-radius: 3rem 0 0 3rem;
@@ -17,6 +18,7 @@ const StyledButton = styled(Button)`
 export const CourtContext = createContext(1)
 
 export const Status = ({ bill }: BillProps) => {
+  const { t } = useTranslation("common")
   const [showBillHistory, setShowBillHistory] = useState(false)
 
   const handleShowBillHistory = () => setShowBillHistory(true)
@@ -36,7 +38,7 @@ export const Status = ({ bill }: BillProps) => {
         </StyledButton>
         <Modal show={showBillHistory} onHide={handleCloseBillHistory} size="lg">
           <Modal.Header closeButton onClick={handleCloseBillHistory}>
-            <StyledModalTitle>Status & History</StyledModalTitle>
+            <StyledModalTitle>{t("bill.status_and_history")}</StyledModalTitle>
           </Modal.Header>
           <StyledBillTitle>
             {bill.id + " - " + bill.content.Title}

components/bill/TestimonyCounts.tsx

@@ -63,7 +63,9 @@ export const TestimonyCounts = ({
 
   return (
     <Stack className={`align-self-center mx-auto`}>
-      <CountTotal className={`ms-2`}>{total} Total Testimonies</CountTotal>
+      <CountTotal className={`ms-2`}>
+        {t("counts.total", { count: total })}
+      </CountTotal>
       <CountDirection className={`me-1 ms-4 my-1`}>
         <Col className={`px-2`}>
           <CountCategory>{t("counts.endorsements.title")}</CountCategory>

components/buttons.tsx

@@ -310,6 +310,7 @@ export const CopyButton = ({
   tooltipDurationMs?: number
   format?: string
 }) => {
+  const { t } = useTranslation("common")
   const [show, setShow] = useState(false)
   const target = useRef(null)
   const closeTimeout = useRef<any>()
@@ -334,7 +335,7 @@ export const CopyButton = ({
         </Button>
       </CopyToClipboard>
       <Overlay target={target} show={show} placement="top">
-        {props => <Tooltip {...props}>Copied to Clipboard!</Tooltip>}
+        {props => <Tooltip {...props}>{t("copiedToClipboard")}</Tooltip>}
       </Overlay>
     </>
   )

components/dashboard/ResourcesCard.tsx

@@ -9,19 +9,19 @@ export function ResourcesCard({}: Props) {
     <Container>
       <Wrapper>
         <LanguagesContainer>
-          <span>Languages</span>
+          <span>{t("languages")}</span>
 
           <Languages>
-            <span>Spanish </span> | <span> English</span>
+            <span>{t("spanish")} </span> | <span> {t("english")}</span>
           </Languages>
         </LanguagesContainer>
 
         <PrivacyContainer>
           <span>
-            <Links href="#">Privacy Policy</Links>
+            <Links href="#">{t("privacyPolicy")}</Links>
           </span>
           <span>
-            <Links href="#">Terms and Conditions </Links>
+            <Links href="#">{t("termsAndConditions")} </Links>
           </span>
         </PrivacyContainer>
         <SocialContainer>

components/db/testimony/useEditTestimony.ts

@@ -263,7 +263,7 @@ function useSaveDraft(
           })
         }
       },
-      [billId, dispatch, draftLoading, draftRef, uid, court]
+      [billId, dispatch, draftLoading, draftRef, uid, court, draft, publication]
     ),
     { onError: error => dispatch({ type: "error", error }) }
   )