migrate hooks and translations

Author: pettinarip

docs/best-practices.md

@@ -66,7 +66,7 @@ Markdown will be translated as whole pages of content, so no specific action is
   - **Method two: `t()`**
 
     ```tsx
-    import { useTranslation } from "next-i18next"
+    import { useTranslation } from "@/hooks/useTranslation"
 
     // Utilize anywhere in JS using
     const { t } = useTranslation()

src/components/AdoptionChart.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from "next-i18next"
 import { useTheme } from "next-themes"
 
 import type { ChildOnlyProp } from "@/lib/types"
@@ -7,6 +6,8 @@ import { cn } from "@/lib/utils/cn"
 
 import { Flex } from "./ui/flex"
 
+import useTranslation from "@/hooks/useTranslation"
+
 type CellProps = ChildOnlyProp & {
   color?: string
   className?: string

src/components/AssetDownload/AssetDownloadArtist.tsx

@@ -1,12 +1,12 @@
-import { useTranslation } from "next-i18next"
-
 import Emoji from "@/components/Emoji"
 
 import { cn } from "@/lib/utils/cn"
 
 import { Flex } from "../ui/flex"
 import { BaseLink } from "../ui/Link"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type AssetDownloadArtistProps = {
   artistName: string
   artistUrl?: string

src/components/AssetDownload/index.tsx

@@ -2,7 +2,6 @@ import { extname } from "path"
 
 import { BaseHTMLAttributes } from "react"
 import type { ImageProps, StaticImageData } from "next/image"
-import { useTranslation } from "next-i18next"
 
 import AssetDownloadArtist from "@/components/AssetDownload/AssetDownloadArtist"
 import AssetDownloadImage from "@/components/AssetDownload/AssetDownloadImage"
@@ -13,6 +12,8 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 import { ButtonLink } from "../ui/buttons/Button"
 import { Flex, Stack } from "../ui/flex"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type AssetDownloadProps = {
   title: string
   alt: string

src/components/Banners/DismissableBanner/index.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react"
-import { useTranslation } from "next-i18next"
 import { MdClose } from "react-icons/md"
 
 import { Button } from "@/components/ui/buttons/Button"
@@ -9,6 +8,8 @@ import { cn } from "@/lib/utils/cn"
 
 import BannerNotification from "../BannerNotification"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type DismissableBannerProps = React.HTMLAttributes<HTMLDivElement> & {
   storageKey: string
 }

src/components/BigNumber/index.tsx

@@ -1,6 +1,5 @@
 import { type ReactNode } from "react"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
+import { useLocale } from "next-intl"
 import { MdInfoOutline } from "react-icons/md"
 
 import { cn } from "@/lib/utils/cn"
@@ -9,6 +8,8 @@ import { isValidDate } from "@/lib/utils/date"
 import Tooltip from "../Tooltip"
 import Link from "../ui/Link"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type BigNumberProps = {
   children: ReactNode
   value?: ReactNode
@@ -27,7 +28,7 @@ const BigNumber = ({
   className,
 }: BigNumberProps) => {
   const { t } = useTranslation("common")
-  const { locale } = useRouter()
+  const locale = useLocale()
   const lastUpdatedDisplay =
     lastUpdated && isValidDate(lastUpdated)
       ? new Intl.DateTimeFormat(locale, {

src/components/Breadcrumbs/index.tsx

@@ -1,6 +1,5 @@
 import { Fragment } from "react"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
+import { useLocale } from "next-intl"
 
 import type { Lang } from "@/lib/types"
 
@@ -16,6 +15,9 @@ import {
   BreadcrumbSeparator,
 } from "../ui/breadcrumb"
 
+import { useTranslation } from "@/hooks/useTranslation"
+import { usePathname } from "@/i18n/routing"
+
 export type BreadcrumbsProps = BreadcrumbProps & {
   slug: string
   startDepth?: number
@@ -41,10 +43,11 @@ type Crumb = {
 // ]
 const Breadcrumbs = ({ slug, startDepth = 0, ...props }: BreadcrumbsProps) => {
   const { t } = useTranslation("common")
-  const { locale, asPath } = useRouter()
+  const locale = useLocale()
+  const pathname = usePathname()
   const dir = isLangRightToLeft(locale! as Lang) ? "rtl" : "ltr"
 
-  const hasHome = asPath !== "/"
+  const hasHome = pathname !== "/"
   const slugChunk = slug.split("/")
   const sliced = slugChunk.filter((item) => !!item)
 

src/components/BugBountyCards.tsx

@@ -1,5 +1,4 @@
 import { BaseHTMLAttributes } from "react"
-import { useTranslation } from "next-i18next"
 
 import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
 
@@ -8,6 +7,8 @@ import { cn } from "@/lib/utils/cn"
 import { ButtonLink, ButtonLinkProps } from "./ui/buttons/Button"
 import { Center, Flex, Stack } from "./ui/flex"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 type FlexProps = BaseHTMLAttributes<HTMLDivElement>
 
 const CardRow = ({ children }: ChildOnlyProp) => (

src/components/Callout.tsx

@@ -1,12 +1,12 @@
-import { useTranslation } from "next-i18next"
-
 import type { TranslationKey } from "@/lib/types"
 
 import Emoji from "@/components/Emoji"
 import { type ImageProps, TwImage } from "@/components/Image"
 
 import { cn } from "@/lib/utils/cn"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 export type CalloutProps = {
   children?: React.ReactNode
   image?: ImageProps["src"]

src/components/CalloutBanner.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from "next-i18next"
-
 import type { TranslationKey } from "@/lib/types"
 
 import { type ImageProps, TwImage } from "@/components/Image"
 
 import { cn } from "@/lib/utils/cn"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 export type CalloutBannerProps = React.HTMLAttributes<HTMLDivElement> & {
   image: ImageProps["src"]
   imageWidth?: number