Switch to using t from useLingui for translations in frontend components

frontend/src/admin/AdminDomainList.js

@@ -1,16 +1,15 @@
 import React from 'react'
 import { IconButton, Text } from '@chakra-ui/react'
 import { ListOf } from '../components/ListOf'
-import { Trans } from "@lingui/react/macro"
+import { Trans } from '@lingui/react/macro'
 import { EditIcon, MinusIcon } from '@chakra-ui/icons'
 import { AdminDomainCard } from './AdminDomainCard'
-import { array, bool, func, object, string } from 'prop-types'
+import { array, bool, func, string } from 'prop-types'
 
 export function AdminDomainList({
   nodes,
   verified,
   permission,
-  i18n,
   setSelectedRemoveProps,
   removeOnOpen,
   setModalProps,
@@ -25,7 +24,20 @@ export function AdminDomainList({
         </Text>
       )}
     >
-      {({ id: domainId, domain, claimTags, archived, rcode, organizations, assetState, cvdEnrollment, highAvailability }, index) => (
+      {(
+        {
+          id: domainId,
+          domain,
+          claimTags,
+          archived,
+          rcode,
+          organizations,
+          assetState,
+          cvdEnrollment,
+          highAvailability,
+        },
+        index,
+      ) => (
         <React.Fragment key={`admindomain-${index}`}>
           <AdminDomainCard
             url={domain}
@@ -35,7 +47,6 @@ export function AdminDomainList({
             rcode={rcode}
             cvdEnrollment={cvdEnrollment}
             highAvailability={highAvailability}
-            locale={i18n.locale}
             flexGrow={1}
             fontSize={{ base: '75%', sm: '100%' }}
           >
@@ -86,7 +97,6 @@ AdminDomainList.propTypes = {
   nodes: array.isRequired,
   verified: bool,
   permission: string,
-  i18n: object.isRequired,
   setSelectedRemoveProps: func.isRequired,
   removeOnOpen: func.isRequired,
   setModalProps: func.isRequired,

frontend/src/admin/AdminDomainModal.js

@@ -1,7 +1,5 @@
 import React, { useRef } from 'react'
-import { t } from "@lingui/core/macro"
-import { Trans } from "@lingui/react/macro"
-import { useLingui } from '@lingui/react'
+import { Trans, useLingui } from '@lingui/react/macro'
 import {
   Badge,
   Box,
@@ -60,13 +58,13 @@ export function AdminDomainModal({
 }) {
   const toast = useToast()
   const initialFocusRef = useRef()
-  const { i18n } = useLingui()
+  const { t } = useLingui()
 
   const [createDomain] = useMutation(CREATE_DOMAIN, {
     refetchQueries: ['PaginatedOrgDomains', 'FindAuditLogs'],
     onError(error) {
       toast({
-        title: i18n._(t`An error occurred.`),
+        title: t`An error occurred.`,
         description: error.message,
         status: 'error',
         duration: 9000,
@@ -78,16 +76,16 @@ export function AdminDomainModal({
       if (createDomain.result.__typename === 'Domain') {
         onClose()
         toast({
-          title: i18n._(t`Domain added`),
-          description: i18n._(t`${createDomain.result.domain} was added to ${orgSlug}`),
+          title: t`Domain added`,
+          description: t`${createDomain.result.domain} was added to ${orgSlug}`,
           status: 'success',
           duration: 9000,
           isClosable: true,
           position: 'top-left',
         })
       } else if (createDomain.result.__typename === 'DomainError') {
         toast({
-          title: i18n._(t`Unable to create new domain.`),
+          title: t`Unable to create new domain.`,
           description: createDomain.result.description,
           status: 'error',
           duration: 9000,
@@ -96,8 +94,8 @@ export function AdminDomainModal({
         })
       } else {
         toast({
-          title: i18n._(t`Incorrect send method received.`),
-          description: i18n._(t`Incorrect createDomain.result typename.`),
+          title: t`Incorrect send method received.`,
+          description: t`Incorrect createDomain.result typename.`,
           status: 'error',
           duration: 9000,
           isClosable: true,
@@ -112,7 +110,7 @@ export function AdminDomainModal({
     refetchQueries: ['FindAuditLogs'],
     onError(error) {
       toast({
-        title: i18n._(t`An error occurred.`),
+        title: t`An error occurred.`,
         description: error.message,
         status: 'error',
         duration: 9000,
@@ -124,16 +122,16 @@ export function AdminDomainModal({
       if (updateDomain.result.__typename === 'Domain') {
         onClose()
         toast({
-          title: i18n._(t`Domain updated`),
-          description: i18n._(t`${editingDomainUrl} from ${orgSlug} successfully updated.`),
+          title: t`Domain updated`,
+          description: t`${editingDomainUrl} from ${orgSlug} successfully updated.`,
           status: 'success',
           duration: 9000,
           isClosable: true,
           position: 'top-left',
         })
       } else if (updateDomain.result.__typename === 'DomainError') {
         toast({
-          title: i18n._(t`Unable to update domain.`),
+          title: t`Unable to update domain.`,
           description: updateDomain.result.description,
           status: 'error',
           duration: 9000,
@@ -142,8 +140,8 @@ export function AdminDomainModal({
         })
       } else {
         toast({
-          title: i18n._(t`Incorrect send method received.`),
-          description: i18n._(t`Incorrect updateDomain.result typename.`),
+          title: t`Incorrect send method received.`,
+          description: t`Incorrect updateDomain.result typename.`,
           status: 'error',
           duration: 9000,
           isClosable: true,
@@ -367,6 +365,8 @@ export function AdminDomainModal({
 }
 
 const ArchiveDomainSwitch = withSuperAdmin(({ defaultChecked, handleChange, orgCount }) => {
+  const { t } = useLingui()
+
   return (
     <Box>
       <Flex align="center">
@@ -400,6 +400,8 @@ const ArchiveDomainSwitch = withSuperAdmin(({ defaultChecked, handleChange, orgC
 })
 
 const HighAvailabilitySwitch = withSuperAdmin(({ defaultChecked, handleChange }) => {
+  const { t } = useLingui()
+
   return (
     <Box>
       <Flex align="center">

frontend/src/admin/AdminDomains.js

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { t } from '@lingui/core/macro'
-import { Trans } from '@lingui/react/macro'
+import { Trans, useLingui } from '@lingui/react/macro'
 import {
   Box,
   Button,
@@ -26,7 +25,6 @@ import {
 } from '@chakra-ui/react'
 import { AddIcon, EditIcon, HamburgerIcon, PlusSquareIcon } from '@chakra-ui/icons'
 import { useMutation } from '@apollo/client'
-import { useLingui } from '@lingui/react'
 import { array, bool, number, string } from 'prop-types'
 
 import { AdminDomainModal } from './AdminDomainModal'
@@ -51,7 +49,7 @@ import { AdminDomainList } from './AdminDomainList'
 export function AdminDomains({ orgSlug, orgId, verified, permission, availableTags }) {
   const [showUpdateList, setShowUpdateList] = useState(false)
   const toast = useToast()
-  const { i18n } = useLingui()
+  const { t } = useLingui()
 
   const [newDomainUrl, setNewDomainUrl] = useState('')
   const [domainsPerPage, setDomainsPerPage] = useState(50)
@@ -132,7 +130,7 @@ export function AdminDomains({ orgSlug, orgId, verified, permission, availableTa
     },
     onError(error) {
       toast({
-        title: i18n._(t`An error occurred.`),
+        title: t`An error occurred.`,
         description: error.message,
         status: 'error',
         duration: 9000,
@@ -144,16 +142,16 @@ export function AdminDomains({ orgSlug, orgId, verified, permission, availableTa
       if (removeDomain.result.__typename === 'DomainResult') {
         removeOnClose()
         toast({
-          title: i18n._(t`Domain removed`),
-          description: i18n._(t`Domain removed from ${orgSlug}`),
+          title: t`Domain removed`,
+          description: t`Domain removed from ${orgSlug}`,
           status: 'success',
           duration: 9000,
           isClosable: true,
           position: 'top-left',
         })
       } else if (removeDomain.result.__typename === 'DomainError') {
         toast({
-          title: i18n._(t`Unable to remove domain.`),
+          title: t`Unable to remove domain.`,
           description: removeDomain.result.description,
           status: 'error',
           duration: 9000,
@@ -162,8 +160,8 @@ export function AdminDomains({ orgSlug, orgId, verified, permission, availableTa
         })
       } else {
         toast({
-          title: i18n._(t`Incorrect send method received.`),
-          description: i18n._(t`Incorrect removeDomain.result typename.`),
+          title: t`Incorrect send method received.`,
+          description: t`Incorrect removeDomain.result typename.`,
           status: 'error',
           duration: 9000,
           isClosable: true,
@@ -319,7 +317,6 @@ export function AdminDomains({ orgSlug, orgId, verified, permission, availableTa
             permission={permission}
             orgId={orgId}
             orgSlug={orgSlug}
-            i18n={i18n}
             setSelectedRemoveProps={setSelectedRemoveProps}
             removeOnOpen={removeOnOpen}
             setModalProps={setModalProps}
@@ -353,7 +350,6 @@ export function AdminDomains({ orgSlug, orgId, verified, permission, availableTa
               nodes={nodes}
               verified={verified}
               permission={permission}
-              i18n={i18n}
               setSelectedRemoveProps={setSelectedRemoveProps}
               removeOnOpen={removeOnOpen}
               setModalProps={setModalProps}
@@ -415,8 +411,8 @@ export function AdminDomains({ orgSlug, orgId, verified, permission, availableTa
                 borderColor="black"
                 id="Search-for-domain-field"
                 type="text"
-                placeholder={i18n._(t`Domain URL`)}
-                aria-label={i18n._(t`Search by Domain URL`)}
+                placeholder={t`Domain URL`}
+                aria-label={t`Search by Domain URL`}
                 onChange={(e) => {
                   setNewDomainUrl(e.target.value)
                   resetToFirstPage()

frontend/src/admin/AdminPage.js

@@ -1,11 +1,9 @@
 import React, { useCallback, useState, useEffect } from 'react'
 import { Button, Flex, Stack, Text, useToast, Select } from '@chakra-ui/react'
 import { AddIcon } from '@chakra-ui/icons'
-import { t } from "@lingui/core/macro"
-import { Trans } from "@lingui/react/macro"
+import { Trans, useLingui } from '@lingui/react/macro'
 import { useQuery } from '@apollo/client'
 import { Link as RouteLink, useNavigate, useParams } from 'react-router-dom'
-import { useLingui } from '@lingui/react'
 
 import { AdminPanel } from './AdminPanel'
 import { OrganizationInformation } from './OrganizationInformation'
@@ -31,7 +29,7 @@ export default function AdminPage() {
   const { activeMenu } = useParams()
   const toast = useToast()
   const navigate = useNavigate()
-  const { i18n } = useLingui()
+  const { t } = useLingui()
 
   const memoizedSetDebouncedSearchTermCallback = useCallback(() => {
     setDebouncedSearchTerm(searchTerm)
@@ -88,10 +86,10 @@ export default function AdminPage() {
   if (loading) {
     dropdown = (
       <Dropdown
-        label={i18n._(t`Organization: `)}
+        label={t`Organization: `}
         labelDirection="row"
         options={[]}
-        placeholder={i18n._(t`Select an organization`)}
+        placeholder={t`Select an organization`}
         onSearch={(val) => setSearchTerm(val)}
         searchValue={searchTerm}
       />
@@ -105,10 +103,10 @@ export default function AdminPage() {
     dropdown = (
       <Dropdown
         className="dropdown"
-        label={i18n._(t`Organization: `)}
+        label={t`Organization: `}
         labelDirection="row"
         options={options}
-        placeholder={i18n._(t`Select an organization`)}
+        placeholder={t`Select an organization`}
         onSearch={(val) => setSearchTerm(val)}
         searchValue={searchTerm}
         onChange={(opt) => {
@@ -235,10 +233,18 @@ const SuperAdminMenu = withSuperAdmin(({ activeMenu, changeActiveMenu }) => {
           defaultValue={activeMenu}
           onChange={(e) => changeActiveMenu(e.target.value)}
         >
-          <option value="organizations">{t`Organizations`}</option>
-          <option value="users">{t`Users`}</option>
-          <option value="audit-logs">{t`Audit Logs`}</option>
-          <option value="domain-tags">{t`Domain Tags`}</option>
+          <option value="organizations">
+            <Trans>Organizations</Trans>
+          </option>
+          <option value="users">
+            <Trans>Users</Trans>
+          </option>
+          <option value="audit-logs">
+            <Trans>Audit Logs</Trans>
+          </option>
+          <option value="domain-tags">
+            <Trans>Domain Tags</Trans>
+          </option>
         </Select>
       </Flex>
     </label>

frontend/src/auth/SignInPage.js

@@ -1,11 +1,9 @@
 import React from 'react'
-import { t } from "@lingui/core/macro"
-import { Trans } from "@lingui/react/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
 import { Box, Button, Checkbox, Flex, Heading, Link, Text, useToast } from '@chakra-ui/react'
 import { Link as RouteLink, useNavigate, useLocation } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
 import { Formik } from 'formik'
-import { useLingui } from '@lingui/react'
 
 import { EmailField } from '../components/fields/EmailField'
 import { PasswordField } from '../components/fields/PasswordField'
@@ -16,7 +14,7 @@ import { SIGN_IN } from '../graphql/mutations'
 
 export default function SignInPage() {
   const { login } = useUserVar()
-  const { i18n } = useLingui()
+  const { t } = useLingui()
   const navigate = useNavigate()
   const location = useLocation()
   const toast = useToast()
@@ -56,8 +54,8 @@ export default function SignInPage() {
         navigate(from)
         // Display a welcome message
         toast({
-          title: i18n._(t`Sign In.`),
-          description: i18n._(t`Welcome, you are successfully signed in!`),
+          title: t`Sign In.`,
+          description: t`Welcome, you are successfully signed in!`,
           status: 'success',
           duration: 9000,
           isClosable: true,