feat: adding query params in character, tag, company, person detail page

Author: KUN1007

app/company/[id]/page.tsx

@@ -2,12 +2,16 @@ import { generateKunMetadataTemplate } from './metadata'
 import { CompanyDetailContainer } from '~/components/company/detail/Container'
 import { kunGetCompanyByIdActions, kunCompanyGalgameActions } from './actions'
 import { ErrorComponent } from '~/components/error/ErrorComponent'
+import { pageSearchParamsCache } from '~/components/nuqs/page'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import type { Metadata } from 'next'
+import type { SearchParams } from 'nuqs/server'
 
 export const revalidate = 5
 
 interface Props {
   params: Promise<{ id: string }>
+  searchParams: Promise<SearchParams>
 }
 
 export const generateMetadata = async ({
@@ -21,8 +25,9 @@ export const generateMetadata = async ({
   return generateKunMetadataTemplate(company)
 }
 
-export default async function Kun({ params }: Props) {
+export default async function Kun({ params, searchParams }: Props) {
   const { id } = await params
+  const { page } = await pageSearchParamsCache.parse(searchParams)
 
   const company = await kunGetCompanyByIdActions({ companyId: Number(id) })
   if (typeof company === 'string') {
@@ -31,18 +36,20 @@ export default async function Kun({ params }: Props) {
 
   const response = await kunCompanyGalgameActions({
     companyId: Number(id),
-    page: 1,
+    page,
     limit: 24
   })
   if (typeof response === 'string') {
     return <ErrorComponent error={response} />
   }
 
   return (
-    <CompanyDetailContainer
-      initialCompany={company}
-      initialPatches={response.galgames}
-      total={response.total}
-    />
+    <NuqsAdapter>
+      <CompanyDetailContainer
+        initialCompany={company}
+        initialPatches={response.galgames}
+        total={response.total}
+      />
+    </NuqsAdapter>
   )
 }

app/galgame/page.tsx

@@ -2,7 +2,7 @@ import { CardContainer } from '~/components/galgame/Container'
 import { kunGetActions } from './actions'
 import { ErrorComponent } from '~/components/error/ErrorComponent'
 import { kunMetadata } from './metadata'
-import { galgameSearchParamsCache } from '~/components/galgame/_searchParams'
+import { galgameSearchParamsCache } from '~/components/nuqs/galgame'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import type { Metadata } from 'next'
 import type { SearchParams } from 'nuqs/server'

app/tag/[id]/page.tsx

@@ -2,12 +2,16 @@ import { TagDetailContainer } from '~/components/tag/detail/Container'
 import { generateKunMetadataTemplate } from './metadata'
 import { kunGetTagByIdActions, kunTagGalgameActions } from './actions'
 import { ErrorComponent } from '~/components/error/ErrorComponent'
+import { pageSearchParamsCache } from '~/components/nuqs/page'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import type { Metadata } from 'next'
+import type { SearchParams } from 'nuqs/server'
 
 export const revalidate = 5
 
 interface Props {
   params: Promise<{ id: string }>
+  searchParams: Promise<SearchParams>
 }
 
 export const generateMetadata = async ({
@@ -21,8 +25,9 @@ export const generateMetadata = async ({
   return generateKunMetadataTemplate(tag)
 }
 
-export default async function Kun({ params }: Props) {
+export default async function Kun({ params, searchParams }: Props) {
   const { id } = await params
+  const { page } = await pageSearchParamsCache.parse(searchParams)
 
   const tag = await kunGetTagByIdActions({ tagId: Number(id) })
   if (typeof tag === 'string') {
@@ -31,18 +36,20 @@ export default async function Kun({ params }: Props) {
 
   const response = await kunTagGalgameActions({
     tagId: Number(id),
-    page: 1,
+    page,
     limit: 24
   })
   if (typeof response === 'string') {
     return <ErrorComponent error={response} />
   }
 
   return (
-    <TagDetailContainer
-      initialTag={tag}
-      initialPatches={response.galgames}
-      total={response.total}
-    />
+    <NuqsAdapter>
+      <TagDetailContainer
+        initialTag={tag}
+        initialPatches={response.galgames}
+        total={response.total}
+      />
+    </NuqsAdapter>
   )
 }

components/company/detail/Container.tsx

@@ -1,9 +1,8 @@
 'use client'
 
 import { useState, useTransition, useEffect } from 'react'
-import { useRouter } from '@bprogress/next'
+import { useQueryState, parseAsInteger } from 'nuqs'
 import { Chip } from '@heroui/react'
-import { useDisclosure } from '@heroui/modal'
 import { Link } from '@heroui/link'
 import { KunPagination } from '~/components/kun/KunPagination'
 import { useMounted } from '~/hooks/useMounted'
@@ -28,11 +27,18 @@ export const CompanyDetailContainer: FC<Props> = ({
   total
 }) => {
   const isMounted = useMounted()
-  const [page, setPage] = useState(1)
+  const [loading, startTransition] = useTransition()
+
+  const [page, setPage] = useQueryState(
+    'page',
+    parseAsInteger.withDefault(1).withOptions({
+      shallow: false,
+      startTransition
+    })
+  )
 
-  const [company, setCompany] = useState(initialCompany)
+  const [company] = useState(initialCompany)
   const [patches, setPatches] = useState<GalgameCard[]>(initialPatches)
-  const [loading, startTransition] = useTransition()
 
   const fetchPatches = () => {
     startTransition(async () => {
@@ -55,6 +61,11 @@ export const CompanyDetailContainer: FC<Props> = ({
     fetchPatches()
   }, [page])
 
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage)
+    window.scrollTo(0, 0)
+  }
+
   return (
     <div className="w-ful space-y-8 my-4">
       <KunHeader
@@ -135,7 +146,7 @@ export const CompanyDetailContainer: FC<Props> = ({
               <KunPagination
                 total={Math.ceil(total / 24)}
                 page={page}
-                onChange={setPage}
+                onChange={handlePageChange}
                 isDisabled={loading}
               />
             </div>

components/galgame/Container.tsx

@@ -9,8 +9,8 @@ import { useMounted } from '~/hooks/useMounted'
 import { KunLoading } from '~/components/kun/Loading'
 import { KunHeader } from '../kun/Header'
 import { KunPagination } from '~/components/kun/KunPagination'
-import { galgameParsers } from './_searchParams'
-import type { SortDirection, SortOption } from './_searchParams'
+import { galgameParsers } from '~/components/nuqs/galgame'
+import type { SortDirection, SortOption } from '~/components/nuqs/galgame'
 
 interface Props {
   initialGalgames: GalgameCard[]

components/galgame/FilterBar.tsx

@@ -23,7 +23,7 @@ import {
   GALGAME_SORT_YEARS_MAP,
   GALGAME_SORT_MONTHS
 } from '~/constants/galgame'
-import type { SortDirection, SortOption } from './_searchParams'
+import type { SortDirection, SortOption } from '~/components/nuqs/galgame'
 
 interface Props {
   selectedType: string

components/galgame/_searchParams.ts components/nuqs/galgame.tscomponents/galgame/_searchParams.ts renamed to components/nuqs/galgame.ts

@@ -0,0 +1,7 @@
+import { createSearchParamsCache, parseAsInteger } from 'nuqs/server'
+
+export const pageParsers = {
+  page: parseAsInteger.withDefault(1)
+}
+
+export const pageSearchParamsCache = createSearchParamsCache(pageParsers)

components/nuqs/page.ts

@@ -1,6 +1,7 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useTransition } from 'react'
+import { useQueryState, parseAsInteger } from 'nuqs'
 import { KunPagination } from '~/components/kun/KunPagination'
 import { kunFetchGet } from '~/utils/kunFetch'
 import { Chip } from '@heroui/chip'
@@ -23,9 +24,17 @@ export const TagDetailContainer = ({
   total
 }: Props) => {
   const isMounted = useMounted()
-  const [page, setPage] = useState(1)
+  const [isPending, startTransition] = useTransition()
 
-  const [tag, setTag] = useState(initialTag)
+  const [page, setPage] = useQueryState(
+    'page',
+    parseAsInteger.withDefault(1).withOptions({
+      shallow: false,
+      startTransition
+    })
+  )
+
+  const [tag] = useState(initialTag)
   const [patches, setPatches] = useState<GalgameCard[]>(initialPatches)
   const [loading, setLoading] = useState(false)
 
@@ -52,6 +61,11 @@ export const TagDetailContainer = ({
     fetchPatches()
   }, [page])
 
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage)
+    window.scrollTo(0, 0)
+  }
+
   return (
     <div className="w-full space-y-8 my-4">
       <KunHeader
@@ -77,7 +91,7 @@ export const TagDetailContainer = ({
         </div>
       )}
 
-      {loading ? (
+      {loading || isPending ? (
         <KunLoading hint="正在获取 Galgame 中..." />
       ) : (
         <>
@@ -92,8 +106,8 @@ export const TagDetailContainer = ({
               <KunPagination
                 total={Math.ceil(total / 24)}
                 page={page}
-                onChange={setPage}
-                isDisabled={loading}
+                onChange={handlePageChange}
+                isDisabled={loading || isPending}
               />
             </div>
           )}