Replace useRouter with usePathname for ListenToPlayer slug

Author: corwintines

src/layouts/Static.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router"
 import { useLocale } from "next-intl"
 import type { HTMLAttributes } from "react"
 
@@ -89,7 +88,6 @@ export const StaticLayout = ({
   lastEditLocaleTimestamp,
   contentNotTranslated,
 }: StaticLayoutProps) => {
-  const { asPath } = useRouter()
   const locale = useLocale()
   const pathname = usePathname()
 
@@ -123,7 +121,7 @@ export const StaticLayout = ({
                   {lastEditLocaleTimestamp}
                 </p>
               )}
-              <ListenToPlayer slug={asPath} />
+              <ListenToPlayer slug={pathname} />
             </Stack>
           )}
 

src/pages/[locale]/eth.tsx

@@ -1,5 +1,4 @@
 import { GetStaticProps } from "next"
-import { useRouter } from "next/router"
 import type { ComponentProps, HTMLAttributes } from "react"
 
 import type { BasePageProps, ChildOnlyProp, Lang, Params } from "@/lib/types"
@@ -35,6 +34,7 @@ import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants"
 
 import { useTranslation } from "@/hooks/useTranslation"
 import loadNamespaces from "@/i18n/loadNamespaces"
+import { usePathname } from "@/i18n/routing"
 import eth from "@/public/images/eth.png"
 import ethCat from "@/public/images/eth-gif-cat.png"
 import defi from "@/public/images/finance_transparent.png"
@@ -208,7 +208,7 @@ export const getStaticProps = (async ({ params }) => {
 
 const EthPage = () => {
   const { t } = useTranslation("page-eth")
-  const { asPath } = useRouter()
+  const pathname = usePathname()
 
   const tokens = [
     {
@@ -335,7 +335,7 @@ const EthPage = () => {
       <GrayContainer>
         <Content>
           <div className="mb-8">
-            <ListenToPlayer slug={asPath} />
+            <ListenToPlayer slug={pathname} />
           </div>
           <Intro>
             <Text>{t("page-eth-description")} </Text>

src/pages/[locale]/wallets/index.tsx

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef } from "react"
 import { GetStaticProps } from "next"
-import { useRouter } from "next/router"
+import { useLocale } from "next-intl"
 
 import { BasePageProps, Lang, Params } from "@/lib/types"
 
@@ -32,6 +32,7 @@ import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants"
 
 import { useTranslation } from "@/hooks/useTranslation"
 import loadNamespaces from "@/i18n/loadNamespaces"
+import { usePathname } from "@/i18n/routing"
 import DappsImage from "@/public/images/doge-computer.png"
 import ETHImage from "@/public/images/eth-logo.png"
 import FindWalletImage from "@/public/images/wallets/find-wallet.png"
@@ -76,7 +77,8 @@ export const getStaticProps = (async ({ params }) => {
 }) satisfies GetStaticProps<BasePageProps, Params>
 
 const WalletsPage = () => {
-  const { locale, asPath } = useRouter()
+  const pathname = usePathname()
+  const locale = useLocale()
   const { t } = useTranslation("page-wallets")
 
   const heroContent = {
@@ -227,7 +229,7 @@ const WalletsPage = () => {
 
       <div className="mt-4 w-full border-t bg-background-highlight px-0 py-16 lg:mt-8">
         <div className="-mb-8 w-full px-8 py-4 pb-0">
-          <ListenToPlayer slug={asPath} />
+          <ListenToPlayer slug={pathname} />
         </div>
         <div className="w-full px-8 py-4 pb-0">
           <h2 className="mb-0 mt-12 text-2xl leading-[1.4] md:text-[2rem]">

src/pages/[locale]/what-is-ethereum.tsx

@@ -1,6 +1,6 @@
 import { GetStaticProps, InferGetStaticPropsType } from "next"
 import type { ImageProps } from "next/image"
-import { useRouter } from "next/router"
+import { useLocale } from "next-intl"
 import type { HTMLAttributes } from "react"
 import { MdInfoOutline } from "react-icons/md"
 
@@ -58,6 +58,7 @@ import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants"
 
 import useTranslation from "@/hooks/useTranslation"
 import loadNamespaces from "@/i18n/loadNamespaces"
+import { usePathname } from "@/i18n/routing"
 import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
 import dogeComputerImg from "@/public/images/doge-computer.png"
 import ethImg from "@/public/images/eth.png"
@@ -220,7 +221,8 @@ const WhatIsEthereumPage = ({
   data,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { t } = useTranslation(["page-what-is-ethereum", "learn-quizzes"])
-  const { locale, asPath } = useRouter()
+  const pathname = usePathname()
+  const locale = useLocale()
   const localeForNumberFormat = getLocaleForNumberFormat(locale! as Lang)
 
   const formatNumber = (
@@ -358,7 +360,7 @@ const WhatIsEthereumPage = ({
         <div className="w-full bg-background-highlight">
           <Section>
             <div className="mb-8">
-              <ListenToPlayer slug={asPath} />
+              <ListenToPlayer slug={pathname} />
             </div>
             <Stack className="gap-14">
               <TwoColumnContent id="summary">