debug testimonyHit translations

Author: jicruz96

components/search/testimony/TestimonyHit.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", "testimony"])
-
   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 author =
-    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>{t("testimonyHit.writtenBy", { author })}</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} />
@@ -96,7 +101,7 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
             {/* <Link href={maple.bill({ court: hit.court, id: hit.billId })}> */}
             {/* <a> */}
             <h2>
-              {t("testimonyHit.bill", {
+              {useTranslation("testimony").t("testimonyHit.bill", {
                 billId: formatBillId(hit.billId)
               })}
             </h2>

public/locales/en/testimony.json

@@ -1,9 +1,9 @@
 {
   "counts": {
     "endorsements": "The total number of testimonies that endorse the bill.",
-    "neutral":"The total number of testimonies that are neutral towards the bill.",
-    "oppose":"The total number of testimonies that oppose the bill."
-    },
+    "neutral": "The total number of testimonies that are neutral towards the bill.",
+    "oppose": "The total number of testimonies that oppose the bill."
+  },
   "link": {
     "tweetContent": "I provided testimony on Bill {{billNumber}}. See {{link}} for details.",
     "twitter": "Tweet Your Published Testimony"
@@ -30,7 +30,7 @@
     }
   },
   "testimonyHit": {
-    "writtenBy": "Written by {{author}}",
+    "writtenBy": "Written by <0>{{author}}</0>",
     "bill": "Bill #{{billId}}"
   },
   "testimonyDetail": {
@@ -65,7 +65,7 @@
     "reporting": "Reporting",
     "report": "Report",
     "rescind": "You may request that your testimony be deleted by completing this form. Since MAPLE is an archive, deletion requests will only be granted if the testimony was submitted on the wrong bill, if it contained sensitive personal information, or if the user is below 18 years old.",
-    "personalInformation": "Personal Information", 
+    "personalInformation": "Personal Information",
     "wrongBill": "Submitted to wrong bill",
     "offensive": "Offensive",
     "violent": "Violent",