typing

Author: vtamara

apps/nextjs/app/[lang]/[pathPrefix]/[pathSuffix]/__tests__/page.test.tsx

@@ -9,6 +9,7 @@ import React from 'react'
 import { SessionProvider } from 'next-auth/react'
 import { WagmiProvider, createConfig, http, useAccount } from 'wagmi'
 import { celo } from 'viem/chains'
+import { useParams } from 'next/navigation'
 
 import { useGuideData } from '@/lib/hooks/useGuideData'
 
@@ -33,6 +34,15 @@ vi.mock('next-auth/react', async (importOriginal) => {
   }
 })
 
+// Mock next/navigation to provide useParams
+vi.mock('next/navigation', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('next/navigation')>()
+  return {
+    ...actual,
+    useParams: vi.fn(),
+  }
+})
+
 // Mock useAccount to provide a consistent address
 vi.mock('wagmi', async (importOriginal) => {
   const actualWagmi = await importOriginal<typeof import('wagmi')>()
@@ -61,6 +71,7 @@ describe('Page', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    vi.mocked(useParams).mockReturnValue({ lang: 'en', pathPrefix: 'guia', pathSuffix: 'celo-ubi' })
     mockUnified.mockReturnValue({
       use: mockUse,
       parse: mockParse,
@@ -99,7 +110,7 @@ describe('Page', () => {
       render(
         <WagmiProvider config={config}>
           <SessionProvider session={mockSession as any}>
-            <Page params={params} />
+            <Page />
           </SessionProvider>
         </WagmiProvider>
       )

apps/nextjs/app/[lang]/[pathPrefix]/[pathSuffix]/page.tsx

@@ -3,6 +3,7 @@
 import axios, { AxiosError } from 'axios'
 import { useSession, getCsrfToken } from 'next-auth/react'
 import Link from 'next/link'
+import { useParams } from 'next/navigation'
 import { useEffect, useState, useCallback } from 'react'
 import remarkParse from 'remark-parse'
 import remarkGfm from 'remark-gfm'
@@ -19,18 +20,11 @@ import { Button } from '@/components/ui/button'
 import { useGuideData } from '@/lib/hooks/useGuideData'
 import { remarkFillInTheBlank } from '@/lib/remarkFillInTheBlank.mjs'
 
-type PageProps = {
-  params: {
-    lang: string
-    pathPrefix: string
-    pathSuffix: string
-  }
-}
-
-export default function Page({ params }: PageProps) {
+export default function Page() {
+  const params = useParams()
   const { address } = useAccount()
   const { data: session } = useSession()
-  const { lang, pathPrefix, pathSuffix } = params
+  const { lang, pathPrefix, pathSuffix } = params as { lang: string; pathPrefix: string; pathSuffix: string }
   const [csrfToken, setCsrfToken] = useState('')
 
   const {