feat: Migrate from pages directory to app router

README.md

@@ -65,6 +65,7 @@ See [docs/chromatic-setup.md](docs/chromatic-setup.md) for more details on our C
 #### Update PR Branches
 
 We provide a GitHub Actions workflow to automatically update open PR branches with the latest changes from `main`. This is useful for:
+
 - Keeping long-running PRs up-to-date
 - Reducing merge conflicts
 - Repository maintenance

pages/admin/add-unclaimed-node.tsx → app/admin/add-unclaimed-node/page.tsx

@@ -1,12 +1,11 @@
+'use client'
 import { Breadcrumb } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { HiHome } from 'react-icons/hi'
 import withAdmin from '@/components/common/HOC/authAdmin'
 import { AdminCreateNodeFormModal } from '@/components/nodes/AdminCreateNodeFormModal'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
-export default withAdmin(AddUnclaimedNodePage)
-
 function AddUnclaimedNodePage() {
   const { t } = useNextTranslation()
   const router = useRouter()
@@ -53,3 +52,9 @@ function AddUnclaimedNodePage() {
     </div>
   )
 }
+
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(AddUnclaimedNodePage)
+export default AddUnclaimedNodePage
+
+export const dynamic = 'force-dynamic'

pages/admin/claim-nodes.tsx → app/admin/claim-nodes/page.tsx

@@ -1,6 +1,7 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import { Breadcrumb, Button, Spinner } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { HiHome, HiPlus } from 'react-icons/hi'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
@@ -12,27 +13,26 @@ import {
 import { UNCLAIMED_ADMIN_PUBLISHER_ID } from '@/src/constants'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
-export default withAdmin(ClaimNodesPage)
 function ClaimNodesPage() {
   const { t } = useNextTranslation()
   const router = useRouter()
+  const searchParams = useSearchParams()
   const queryClient = useQueryClient()
   const pageSize = 36
+
   // Get page from URL query params, defaulting to 1
-  const currentPage = router.query.page
-    ? parseInt(router.query.page as string, 10)
+  const currentPage = searchParams?.get('page')
+    ? parseInt(searchParams?.get('page')!, 10)
     : 1
 
   const handlePageChange = (page: number) => {
     // Update URL with new page parameter
-    router.push(
-      { pathname: router.pathname, query: { ...router.query, page } },
-      undefined,
-      { shallow: true }
-    )
+    const params = new URLSearchParams(searchParams?.toString())
+    params.set('page', page.toString())
+    router.push(`/admin/claim-nodes?${params.toString()}`)
   }
 
-  // Use the page from router.query for the API call
+  // Use the page from searchParams for the API call
   const { data, isError, isLoading } = useListNodesForPublisherV2(
     UNCLAIMED_ADMIN_PUBLISHER_ID,
     { page: currentPage, limit: pageSize }
@@ -147,3 +147,10 @@ function ClaimNodesPage() {
     </div>
   )
 }
+
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(ClaimNodesPage)
+
+export default ClaimNodesPage
+
+export const dynamic = 'force-dynamic'

pages/admin/node-version-compatibility.tsx → app/admin/node-version-compatibility/page.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import {
@@ -12,7 +13,7 @@ import {
   TextInput,
   Tooltip,
 } from 'flowbite-react'
-import router from 'next/router'
+import { useRouter } from 'next/navigation'
 import DIE, { DIES } from 'phpdie'
 import React, { Suspense, useEffect, useMemo, useState } from 'react'
 import { HiHome } from 'react-icons/hi'
@@ -50,10 +51,9 @@ import { useSearchParameter } from '@/src/hooks/useSearchParameter'
 import { NodeVersionStatusToReadable } from '@/src/mapper/nodeversion'
 
 // This page allows admins to update node version compatibility fields
-export default withAdmin(NodeVersionCompatibilityAdmin)
-
 function NodeVersionCompatibilityAdmin() {
   const { t } = useNextTranslation()
+  const router = useRouter()
   const [_page, setPage] = usePage()
 
   // search
@@ -636,3 +636,10 @@ function isNodeCompatibilityInfoOutdated(node: Node | null) {
     false
   )
 }
+
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(NodeVersionCompatibilityAdmin)
+
+export default NodeVersionCompatibilityAdmin
+
+export const dynamic = 'force-dynamic'

pages/admin/nodes.tsx → app/admin/nodes/page.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import {
@@ -10,9 +11,9 @@ import {
   TextInput,
 } from 'flowbite-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { omit } from 'rambda'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { HiHome, HiOutlineX, HiPencil } from 'react-icons/hi'
 import { MdOpenInNew } from 'react-icons/md'
 import { toast } from 'react-toastify'
@@ -32,6 +33,7 @@ import { useNextTranslation } from '@/src/hooks/i18n'
 function NodeList() {
   const { t } = useNextTranslation()
   const router = useRouter()
+  const searchParams = useSearchParams()
   const [page, setPage] = React.useState<number>(1)
   const [editingNode, setEditingNode] = useState<Node | null>(null)
   const [editFormData, setEditFormData] = useState({
@@ -44,10 +46,11 @@ function NodeList() {
 
   // Handle page from URL
   React.useEffect(() => {
-    if (router.query.page) {
-      setPage(parseInt(router.query.page as string))
+    const pageParam = searchParams?.get('page')
+    if (pageParam) {
+      setPage(parseInt(pageParam))
     }
-  }, [router.query.page])
+  }, [searchParams])
 
   // Status filter functionality
   const statusFlags = {
@@ -73,7 +76,7 @@ function NodeList() {
   const allStatuses = [...Object.values(statusFlags)].sort()
 
   const defaultSelectedStatuses = [
-    (router.query as any)?.status ?? Object.keys(statusFlags),
+    searchParams?.get('status') ?? Object.keys(statusFlags),
   ]
     .flat()
     .map((status) => statusFlags[status])
@@ -91,29 +94,28 @@ function NodeList() {
     const checkedAll =
       allStatuses.join(',').toString() ===
       [...statuses].sort().join(',').toString()
-    const searchParams = checkedAll
-      ? undefined
-      : ({
-          status: Object.entries(statusFlags)
-            .filter(([status, s]) => statuses.includes(s))
-            .map(([status]) => status),
-        } as any)
-    const search = new URLSearchParams({
-      ...(omit('status')(router.query) as object),
-      ...searchParams,
-    })
-      .toString()
-      .replace(/^(?!$)/, '?')
-    const hash = router.asPath.split('#')[1]
-      ? `#${router.asPath.split('#')[1]}`
-      : ''
-    router.push(`${router.pathname}${search}${hash}`)
+
+    const params = new URLSearchParams(searchParams?.toString())
+
+    if (!checkedAll) {
+      // Remove existing status params
+      params.delete('status')
+      // Add new status params
+      Object.entries(statusFlags)
+        .filter(([status, s]) => statuses.includes(s))
+        .forEach(([status]) => {
+          params.append('status', status)
+        })
+    } else {
+      params.delete('status')
+    }
+
+    const hash = window.location.hash
+    router.push(`/admin/nodes?${params.toString()}${hash}`)
   }
 
   // Search filter
-  const queryForNodeId = Array.isArray(router.query.nodeId)
-    ? router.query.nodeId[0]
-    : router.query.nodeId
+  const queryForNodeId = searchParams?.get('nodeId')
 
   const getAllNodesQuery = useListAllNodes({
     page: page,
@@ -163,14 +165,9 @@ function NodeList() {
 
   const handlePageChange = (newPage: number) => {
     setPage(newPage)
-    router.push(
-      {
-        pathname: router.pathname,
-        query: { ...router.query, page: newPage },
-      },
-      undefined,
-      { shallow: true }
-    )
+    const params = new URLSearchParams(searchParams?.toString())
+    params.set('page', newPage.toString())
+    router.push(`/admin/nodes?${params.toString()}`)
   }
 
   const openEditModal = (node: Node) => {
@@ -305,16 +302,16 @@ function NodeList() {
               'filter-node-id'
             ) as HTMLInputElement
             const nodeId = inputElement.value.trim()
-            const searchParams = new URLSearchParams({
-              ...(omit(['nodeId'])(router.query) as object),
-              ...(nodeId ? { nodeId } : {}),
-            })
-              .toString()
-              .replace(/^(?!$)/, '?')
-            const hash = router.asPath.split('#')[1]
-              ? `#${router.asPath.split('#')[1]}`
-              : ''
-            router.push(router.pathname + searchParams + hash)
+            const params = new URLSearchParams(searchParams?.toString())
+
+            if (nodeId) {
+              params.set('nodeId', nodeId)
+            } else {
+              params.delete('nodeId')
+            }
+
+            const hash = window.location.hash
+            router.push(`/admin/nodes?${params.toString()}${hash}`)
           }}
         >
           <TextInput
@@ -656,4 +653,9 @@ function NodeList() {
   )
 }
 
-export default withAdmin(NodeList)
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(NodeList)
+
+export default NodeList
+
+export const dynamic = 'force-dynamic'