Frontend/i18n: Use namespace constants (#9168)

Author: tristanlabelle

app/web/components/FlipCard.tsx

@@ -1,8 +1,8 @@
 import { Box, Stack, Typography } from "@mui/material";
+import { useTranslation } from "i18n";
+import { GLOBAL } from "i18n/namespaces";
 import { ReactNode, useCallback, useState } from "react";
 
-import { useTranslation } from "../i18n";
-
 export interface FlipCardProps {
   icon: ReactNode;
   title: ReactNode;
@@ -20,7 +20,7 @@ export default function FlipCard({
   children,
   height = { xs: 300, md: 320 },
 }: FlipCardProps) {
-  const { t } = useTranslation(["GLOBAL"]);
+  const { t } = useTranslation([GLOBAL]);
   const [flipped, setFlipped] = useState(false);
   const toggle = useCallback(() => setFlipped((f) => !f), []);
 

app/web/components/Navigation/ReportButton.tsx

@@ -9,6 +9,7 @@ import {
 import Button from "components/Button";
 import { BugIcon } from "components/Icons";
 import { useTranslation } from "i18n";
+import { GLOBAL } from "i18n/namespaces";
 import { useState } from "react";
 import { theme } from "theme";
 
@@ -40,7 +41,7 @@ export default function ReportButton({
   isMenuLink?: boolean;
   sx?: SxProps<Theme>;
 }) {
-  const { t } = useTranslation("global");
+  const { t } = useTranslation(GLOBAL);
   const isBelowMd = useMediaQuery(theme.breakpoints.down("md"));
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 

app/web/components/Navigation/ReportDialog.tsx

@@ -14,6 +14,7 @@ import StyledLink from "components/StyledLink";
 import TextField from "components/TextField";
 import { RpcError } from "grpc-web";
 import { useTranslation } from "i18n";
+import { GLOBAL } from "i18n/namespaces";
 import { ReportBugRes } from "proto/bugs_pb";
 import { ComponentPropsWithRef, forwardRef, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -56,7 +57,7 @@ const StyledReportTypeButton = styled(Button)(() => ({
 }));
 
 export default function ReportDialog({ open, onClose }: DialogProps) {
-  const { t } = useTranslation("global");
+  const { t } = useTranslation(GLOBAL);
 
   const [type, setType] = useState<"initial" | "bug">("initial");
   const {

app/web/components/TOSLink.tsx

@@ -1,4 +1,5 @@
 import { styled } from "@mui/material";
+import { GLOBAL } from "i18n/namespaces";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { tosRoute } from "routes";
@@ -9,7 +10,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
 }));
 
 export default function TOSLink() {
-  const { t } = useTranslation("global");
+  const { t } = useTranslation(GLOBAL);
   return (
     <StyledLink href={tosRoute} target="_blank">
       {t("terms_of_service")}

app/web/features/profile/view/userLabels.tsx

@@ -82,7 +82,7 @@ export const ResponseRateLabel = ({ user }: Props) => {
   const {
     t,
     i18n: { language },
-  } = useTranslation("profile");
+  } = useTranslation(PROFILE);
   // Localize the humanized durations at the call site (no global dayjs locale).
   const dayjsLocale = i18nToDayjsLocale(language);
 
@@ -163,7 +163,7 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
     gender,
     pronouns,
   } = user;
-  const { t } = useTranslation("profile");
+  const { t } = useTranslation(PROFILE);
 
   const getBirthdateVerificationIcon = (
     status: BirthdateVerificationStatus,
@@ -233,7 +233,7 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
 };
 
 export const AgeGenderLanguagesLabels = ({ user }: Props) => {
-  const { t } = useTranslation("profile");
+  const { t } = useTranslation(PROFILE);
   const { languages } = useLanguages();
 
   return (