refactor(lingui): Prefer using i18n instead of custom hook

Author: PrettyCoffee

src/components/ui/calendar/calendar.tsx

@@ -2,7 +2,7 @@ import { type Dispatch, type SetStateAction, useState } from "react"
 
 import { msg } from "@lingui/core/macro"
 
-import { useLanguage, useTrans } from "../../../locales"
+import { i18n, useLanguage } from "../../../locales"
 import { hstack, vstack } from "../../../styles/stack"
 import { cn } from "../../../utils/cn"
 import { ChevronLeft, ChevronRight } from "../../icons"
@@ -119,8 +119,8 @@ const ViewSwitch = ({ month, min, max, setMonth }: ViewSwitchProps) => {
   const prevDisabled = month.valueOf() <= minMonth.valueOf()
   const nextDisabled = month.valueOf() >= maxMonth.valueOf()
 
-  const nextCaption = useTrans(magnitudeCaptions[magnitude].next)
-  const prevCaption = useTrans(magnitudeCaptions[magnitude].prev)
+  const nextCaption = i18n._(magnitudeCaptions[magnitude].next)
+  const prevCaption = i18n._(magnitudeCaptions[magnitude].prev)
 
   return (
     <div className="flex">

src/components/ui/date-input.tsx

@@ -6,16 +6,15 @@ import { CalendarDaysIcon } from "../icons"
 import { Button } from "./button"
 import { Calendar, type CalendarProps } from "./calendar"
 import { Popover } from "./popover"
-import { useLocale, useTrans } from "../../locales"
+import { i18n, useLocale } from "../../locales"
 import { type ClassNameProp } from "../../types/base-props"
 import { cn } from "../../utils/cn"
 import { ErrorBoundary } from "../utility/error-boundary"
 
 const DateValue = ({ date }: { date: Temporal.PlainDate }) => {
-  const trans = useTrans()
   const locale = useLocale()
 
-  if (date.equals(Temporal.Now.plainDateISO())) return trans._(msg`Today`)
+  if (date.equals(Temporal.Now.plainDateISO())) return i18n._(msg`Today`)
   return date.toLocaleString(locale, {
     year: "numeric",
     month: "2-digit",

src/components/ui/dialog/dialog.tsx

@@ -2,7 +2,7 @@ import { type PropsWithChildren, type ReactNode } from "react"
 
 import { msg } from "@lingui/core/macro"
 
-import { useTrans } from "../../../locales"
+import { i18n } from "../../../locales"
 import { hstack, vstack } from "../../../styles/stack"
 import { surface } from "../../../styles/surface"
 import { zIndex } from "../../../styles/z-index"
@@ -38,7 +38,6 @@ const DialogActions = ({
   confirm,
   cancel,
 }: Pick<DialogProps, "confirm" | "cancel">) => {
-  const trans = useTrans()
   if (!confirm && !cancel) return null
 
   return (
@@ -50,7 +49,7 @@ const DialogActions = ({
             disabled={confirm.disabled}
             onClick={confirm.onClick}
           >
-            {confirm.caption ?? trans._(msg`Confirm`)}
+            {confirm.caption ?? i18n._(msg`Confirm`)}
           </Button>
         </DialogPrimitive.Close>
       )}
@@ -61,7 +60,7 @@ const DialogActions = ({
             disabled={cancel.disabled}
             onClick={cancel.onClick}
           >
-            {cancel.caption ?? trans._(msg`Cancel`)}
+            {cancel.caption ?? i18n._(msg`Cancel`)}
           </Button>
         </DialogPrimitive.Close>
       )}
@@ -125,7 +124,7 @@ export const Dialog = ({
 
         <DialogPrimitive.Close>
           <IconButton
-            title={useTrans(msg`Close`)}
+            title={i18n._(msg`Close`)}
             className="absolute top-1 right-1"
             hideTitle
             icon={XIcon}

src/components/ui/file-input/file-input.tsx

@@ -3,7 +3,7 @@ import { useState } from "react"
 import { msg } from "@lingui/core/macro"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { useTrans } from "../../../locales"
+import { i18n } from "../../../locales"
 import { alert as alertStyles } from "../../../styles/alert"
 import { focusOutline } from "../../../styles/focus-outline"
 import { interactive } from "../../../styles/interactive"
@@ -59,7 +59,6 @@ export const FileInput = ({
   ...props
 }: Omit<FileInputProps, "onDragStart" | "onDragEnd">) => {
   const [dragging, setDragging] = useState<DraggingState>("idle")
-  const trans = useTrans()
 
   return (
     <ErrorBoundary>
@@ -79,7 +78,7 @@ export const FileInput = ({
           className={cn(fileInput({ dragging, alert: alert?.kind }), className)}
         >
           <AnimatedUploadIcon status={dragging} />
-          {label ?? trans._(msg`Drop File`)}
+          {label ?? i18n._(msg`Drop File`)}
           {alert && (
             <Icon icon={alertStyles[alert.kind].icon} color={alert.kind} />
           )}

src/components/ui/pagination.tsx

@@ -4,7 +4,7 @@ import { msg } from "@lingui/core/macro"
 
 import { Button } from "./button"
 import { Select } from "./select"
-import { useTrans } from "../../locales"
+import { i18n } from "../../locales"
 import { hstack } from "../../styles/stack"
 import { type ClassNameProp } from "../../types/base-props"
 import { clamp } from "../../utils/clamp"
@@ -23,7 +23,7 @@ const PageSizeSelect = ({
 }: PageSizeSelectProps) => (
   <Select.Root
     value={String(value)}
-    placeholder={useTrans(msg`Size`)}
+    placeholder={i18n._(msg`Size`)}
     onChange={value => onPageSizeChange?.(Number(value))}
   >
     {pageSizes.map(size => (
@@ -113,7 +113,6 @@ export const Pagination = ({
   onPageSizeChange,
   className,
 }: PaginationProps) => {
-  const trans = useTrans()
   const numberOfPages = getNumberOfPages(items, pageSize)
 
   return (
@@ -128,7 +127,7 @@ export const Pagination = ({
         {pageSizeOptions && (
           <>
             <div className="flex-1" />
-            <span className="mr-2">{trans._(msg`Page size:`)}</span>
+            <span className="mr-2">{i18n._(msg`Page size:`)}</span>
             <PageSizeSelect
               pageSizes={pageSizeOptions}
               value={pageSize}

src/components/ui/text-input.tsx

@@ -15,7 +15,7 @@ import { SearchIcon, XIcon } from "../icons"
 import { InputAlertIcon } from "./fragments/input-alert-icon"
 import { InputBorder } from "./fragments/input-border"
 import { IconButton } from "./icon-button"
-import { useTrans } from "../../locales"
+import { i18n } from "../../locales"
 import { type AlertKind } from "../../types/alert"
 import { type ClassNameProp, type DisableProp } from "../../types/base-props"
 import { mergeRefs } from "../../utils/merge-refs"
@@ -47,7 +47,6 @@ export const TextInput = ({
   className,
   ...props
 }: TextInputProps) => {
-  const trans = useTrans()
   const textRef = useRef<HTMLInputElement>(null)
   const isSearch = type === "search"
   const isMasked = type === "password" && !!props.value
@@ -78,7 +77,7 @@ export const TextInput = ({
           <span className="grid size-10 shrink-0 place-content-center [:not(:hover,:focus-within)>&]:opacity-0">
             <IconButton
               hideTitle
-              title={trans._(msg`Clear text field`)}
+              title={i18n._(msg`Clear text field`)}
               icon={XIcon}
               size="sm"
               onClick={event => {

src/components/ui/toaster/toast.tsx

@@ -6,7 +6,7 @@ import { keyframes } from "goober"
 import { XIcon } from "../../icons"
 import { Icon } from "../icon"
 import { type ToastDataProps } from "./toaster-data"
-import { useTrans } from "../../../locales"
+import { i18n } from "../../../locales"
 import { alert } from "../../../styles/alert"
 import { hstack } from "../../../styles/stack"
 import { surface } from "../../../styles/surface"
@@ -123,7 +123,7 @@ export const Toast = ({
           </div>
           <IconButton
             icon={XIcon}
-            title={useTrans(msg`Close message`)}
+            title={i18n._(msg`Close message`)}
             hideTitle
             look="flat"
             onClick={() => void exit()}

src/components/utility/error-boundary.tsx

@@ -2,12 +2,12 @@ import { Component, type ReactNode } from "react"
 
 import { msg } from "@lingui/core/macro"
 
-import { useTrans } from "../../locales"
+import { i18n } from "../../locales"
 
 const DefaultFallback = () => (
   <div
     className="grid size-10 place-content-center"
-    title={useTrans(msg`An unexpected error occurred here`)}
+    title={i18n._(msg`An unexpected error occurred here`)}
   >
     💥
   </div>

src/locales/l10n-provider.tsx

@@ -1,14 +1,14 @@
 import { type PropsWithChildren, useEffect, useMemo, useState } from "react"
 
-import { type I18n, type MessageDescriptor, setupI18n } from "@lingui/core"
+import { type I18n, setupI18n } from "@lingui/core"
 
 import { messages as de } from "./_de.json"
 import { messages as en } from "./_en.json"
 import { createContext } from "../utils/create-context"
 
 const defaultLanguage = "en"
 const catalog = { en, de }
-const i18n = setupI18n({
+export const i18n = setupI18n({
   locales: Object.keys(catalog),
   locale: defaultLanguage,
   messages: catalog,
@@ -51,11 +51,3 @@ const useL10n = () => Context.useRequiredValue()
 
 export const useLocale = () => useL10n().locale
 export const useLanguage = () => useL10n().language
-
-export function useTrans(): typeof i18n
-export function useTrans(msg: MessageDescriptor): string
-export function useTrans(msg?: MessageDescriptor) {
-  const { i18n } = useL10n()
-  if (msg) return i18n._(msg)
-  return i18n
-}