Skip to content

Commit ba20351

Browse files
KUN1007KUN1007
committed
mod: replacing all page paginations impl
1 parent 715c3db commit ba20351

File tree

16 files changed

+593
-637
lines changed

16 files changed

+593
-637
lines changed

‎components/character/Container.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useEffect, useState, useTransition } from 'react'
44
import { useDebounce } from 'use-debounce'
5-
import { Pagination } from '@heroui/pagination'
5+
import { KunPagination } from '~/components/kun/KunPagination'
66
import { useMounted } from '~/hooks/useMounted'
77
import { kunFetchGet, kunFetchPost } from '~/utils/kunFetch'
88
import { CharList } from './CharList'
@@ -85,13 +85,11 @@ export const CharContainer = ({
8585

8686
{total > 72 && !query && (
8787
<div className="flex justify-center">
88-
<Pagination
88+
<KunPagination
8989
total={Math.ceil(total / 72)}
9090
page={page}
9191
onChange={setPage}
92-
showControls
93-
color="primary"
94-
size="lg"
92+
isDisabled={loading}
9593
/>
9694
</div>
9795
)}

‎components/comment/Container.tsx‎

Lines changed: 102 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,102 @@
1-
'use client'
2-
3-
import { useEffect, useState } from 'react'
4-
import { Pagination } from '@heroui/pagination'
5-
import { kunFetchGet } from '~/utils/kunFetch'
6-
import { CommentCard } from './CommentCard'
7-
import { FilterBar } from './FilterBar'
8-
import { useMounted } from '~/hooks/useMounted'
9-
import { KunLoading } from '~/components/kun/Loading'
10-
import { KunHeader } from '../kun/Header'
11-
import { useRouter, useSearchParams } from 'next/navigation'
12-
import type { SortDirection, SortOption } from './_sort'
13-
import type { PatchComment } from '~/types/api/comment'
14-
15-
interface Props {
16-
initialComments: PatchComment[]
17-
initialTotal: number
18-
}
19-
20-
export const CardContainer = ({ initialComments, initialTotal }: Props) => {
21-
const [comments, setComments] = useState<PatchComment[]>(initialComments)
22-
const [total, setTotal] = useState(initialTotal)
23-
const [loading, setLoading] = useState(false)
24-
const [sortField, setSortField] = useState<SortOption>('created')
25-
const [sortOrder, setSortOrder] = useState<SortDirection>('desc')
26-
const isMounted = useMounted()
27-
const router = useRouter()
28-
const searchParams = useSearchParams()
29-
const [page, setPage] = useState(Number(searchParams.get('page')) || 1)
30-
31-
const fetchData = async () => {
32-
setLoading(true)
33-
34-
const { comments } = await kunFetchGet<{
35-
comments: PatchComment[]
36-
total: number
37-
}>('/comment', {
38-
sortField,
39-
sortOrder,
40-
page,
41-
limit: 50
42-
})
43-
44-
setComments(comments)
45-
setTotal(total)
46-
setLoading(false)
47-
}
48-
49-
useEffect(() => {
50-
if (!isMounted) {
51-
return
52-
}
53-
fetchData()
54-
}, [sortField, sortOrder, page])
55-
56-
const handlePageChange = (newPage: number) => {
57-
setPage(newPage)
58-
setTimeout(() => {
59-
window.scrollTo(0, 0)
60-
})
61-
const params = new URLSearchParams(window.location.search)
62-
params.set('page', newPage.toString())
63-
router.push(`?${params.toString()}`)
64-
}
65-
66-
return (
67-
<div className="container mx-auto my-4 space-y-6">
68-
<KunHeader
69-
name="Galgame 评论"
70-
description="这里展示了所有的 Galgame 评论"
71-
/>
72-
73-
<FilterBar
74-
sortField={sortField}
75-
setSortField={setSortField}
76-
sortOrder={sortOrder}
77-
setSortOrder={setSortOrder}
78-
/>
79-
80-
{loading ? (
81-
<KunLoading hint="正在获取评论数据..." />
82-
) : (
83-
<div className="space-y-4">
84-
{comments.map((comment) => (
85-
<CommentCard key={comment.id} comment={comment} />
86-
))}
87-
</div>
88-
)}
89-
90-
{total > 50 && (
91-
<div className="flex justify-center">
92-
<Pagination
93-
total={Math.ceil(total / 50)}
94-
page={page}
95-
onChange={handlePageChange}
96-
showControls
97-
color="primary"
98-
size="lg"
99-
/>
100-
</div>
101-
)}
102-
</div>
103-
)
104-
}
1+
'use client'
2+
3+
import { useEffect, useState } from 'react'
4+
import { KunPagination } from '~/components/kun/KunPagination'
5+
import { kunFetchGet } from '~/utils/kunFetch'
6+
import { CommentCard } from './CommentCard'
7+
import { FilterBar } from './FilterBar'
8+
import { useMounted } from '~/hooks/useMounted'
9+
import { KunLoading } from '~/components/kun/Loading'
10+
import { KunHeader } from '../kun/Header'
11+
import { useRouter, useSearchParams } from 'next/navigation'
12+
import type { SortDirection, SortOption } from './_sort'
13+
import type { PatchComment } from '~/types/api/comment'
14+
15+
interface Props {
16+
initialComments: PatchComment[]
17+
initialTotal: number
18+
}
19+
20+
export const CardContainer = ({ initialComments, initialTotal }: Props) => {
21+
const [comments, setComments] = useState<PatchComment[]>(initialComments)
22+
const [total, setTotal] = useState(initialTotal)
23+
const [loading, setLoading] = useState(false)
24+
const [sortField, setSortField] = useState<SortOption>('created')
25+
const [sortOrder, setSortOrder] = useState<SortDirection>('desc')
26+
const isMounted = useMounted()
27+
const router = useRouter()
28+
const searchParams = useSearchParams()
29+
const [page, setPage] = useState(Number(searchParams.get('page')) || 1)
30+
31+
const fetchData = async () => {
32+
setLoading(true)
33+
34+
const { comments } = await kunFetchGet<{
35+
comments: PatchComment[]
36+
total: number
37+
}>('/comment', {
38+
sortField,
39+
sortOrder,
40+
page,
41+
limit: 50
42+
})
43+
44+
setComments(comments)
45+
setTotal(total)
46+
setLoading(false)
47+
}
48+
49+
useEffect(() => {
50+
if (!isMounted) {
51+
return
52+
}
53+
fetchData()
54+
}, [sortField, sortOrder, page])
55+
56+
const handlePageChange = (newPage: number) => {
57+
setPage(newPage)
58+
setTimeout(() => {
59+
window.scrollTo(0, 0)
60+
})
61+
const params = new URLSearchParams(window.location.search)
62+
params.set('page', newPage.toString())
63+
router.push(`?${params.toString()}`)
64+
}
65+
66+
return (
67+
<div className="container mx-auto my-4 space-y-6">
68+
<KunHeader
69+
name="Galgame 评论"
70+
description="这里展示了所有的 Galgame 评论"
71+
/>
72+
73+
<FilterBar
74+
sortField={sortField}
75+
setSortField={setSortField}
76+
sortOrder={sortOrder}
77+
setSortOrder={setSortOrder}
78+
/>
79+
80+
{loading ? (
81+
<KunLoading hint="正在获取评论数据..." />
82+
) : (
83+
<div className="space-y-4">
84+
{comments.map((comment) => (
85+
<CommentCard key={comment.id} comment={comment} />
86+
))}
87+
</div>
88+
)}
89+
90+
{total > 50 && (
91+
<div className="flex justify-center">
92+
<KunPagination
93+
total={Math.ceil(total / 50)}
94+
page={page}
95+
onChange={handlePageChange}
96+
isDisabled={loading}
97+
/>
98+
</div>
99+
)}
100+
</div>
101+
)
102+
}

‎components/company/Container.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useState, useEffect, useTransition } from 'react'
44
import { useDebounce } from 'use-debounce'
5-
import { Pagination } from '@heroui/pagination'
5+
import { KunPagination } from '~/components/kun/KunPagination'
66
import { SearchCompanies } from './SearchCompanies'
77
import { CompanyList } from './CompanyList'
88
import { useMounted } from '~/hooks/useMounted'
@@ -94,13 +94,11 @@ export const Container: FC<Props> = ({ initialCompanies, initialTotal }) => {
9494

9595
{total > 100 && !query && (
9696
<div className="flex justify-center">
97-
<Pagination
97+
<KunPagination
9898
total={Math.ceil(total / 100)}
9999
page={page}
100-
onChange={(newPage: number) => setPage(newPage)}
101-
showControls
102-
color="primary"
103-
size="lg"
100+
onChange={setPage}
101+
isDisabled={loading}
104102
/>
105103
</div>
106104
)}

‎components/company/detail/Container.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useRouter } from '@bprogress/next'
55
import { Chip } from '@heroui/react'
66
import { useDisclosure } from '@heroui/modal'
77
import { Link } from '@heroui/link'
8-
import { Pagination } from '@heroui/pagination'
8+
import { KunPagination } from '~/components/kun/KunPagination'
99
import { useMounted } from '~/hooks/useMounted'
1010
import { KunHeader } from '~/components/kun/Header'
1111
import { KunLoading } from '~/components/kun/Loading'
@@ -132,17 +132,11 @@ export const CompanyDetailContainer: FC<Props> = ({
132132

133133
{total > 24 && (
134134
<div className="flex justify-center">
135-
<Pagination
135+
<KunPagination
136136
total={Math.ceil(total / 24)}
137137
page={page}
138138
onChange={setPage}
139-
showControls
140-
size="lg"
141-
radius="lg"
142-
classNames={{
143-
wrapper: 'gap-2',
144-
item: 'w-10 h-10'
145-
}}
139+
isDisabled={loading}
146140
/>
147141
</div>
148142
)}

‎components/message/Container.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useEffect, useState } from 'react'
44
import { useMounted } from '~/hooks/useMounted'
5-
import { Pagination } from '@heroui/pagination'
5+
import { KunPagination } from '~/components/kun/KunPagination'
66
import { KunLoading } from '~/components/kun/Loading'
77
import { MessageCard } from './MessageCard'
88
import { kunFetchGet } from '~/utils/kunFetch'
@@ -70,13 +70,11 @@ export const MessageContainer = ({ initialMessages, total, type }: Props) => {
7070

7171
{total > 30 && (
7272
<div className="flex justify-center">
73-
<Pagination
73+
<KunPagination
7474
total={Math.ceil(total / 30)}
7575
page={page}
76-
onChange={(newPage: number) => setPage(newPage)}
77-
showControls
78-
color="primary"
79-
size="lg"
76+
onChange={setPage}
77+
isDisabled={loading}
8078
/>
8179
</div>
8280
)}

‎components/patch/comment/Comments.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useEffect, useState } from 'react'
44
import { Card, CardBody } from '@heroui/card'
55
import { Button } from '@heroui/button'
6-
import { Pagination } from '@heroui/pagination'
6+
import { KunPagination } from '~/components/kun/KunPagination'
77
import { KunUser } from '~/components/kun/floating-card/KunUser'
88
import { MessageCircle } from 'lucide-react'
99
import { formatDistanceToNow } from '~/utils/formatDistanceToNow'
@@ -156,13 +156,11 @@ export const Comments = ({
156156

157157
{totalCount > 30 && (
158158
<div className="flex justify-center">
159-
<Pagination
159+
<KunPagination
160160
total={Math.ceil(totalCount / 30)}
161161
page={page}
162-
onChange={(newPage: number) => setPage(newPage)}
163-
showControls
164-
color="primary"
165-
size="lg"
162+
onChange={setPage}
163+
isDisabled={loading}
166164
/>
167165
</div>
168166
)}

‎components/person/Container.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useEffect, useState, useTransition } from 'react'
44
import { useDebounce } from 'use-debounce'
5-
import { Pagination } from '@heroui/pagination'
5+
import { KunPagination } from '~/components/kun/KunPagination'
66
import { useMounted } from '~/hooks/useMounted'
77
import { kunFetchGet, kunFetchPost } from '~/utils/kunFetch'
88
import { PersonList } from './PersonList'
@@ -85,13 +85,11 @@ export const PersonContainer = ({
8585

8686
{total > 72 && !query && (
8787
<div className="flex justify-center">
88-
<Pagination
88+
<KunPagination
8989
total={Math.ceil(total / 72)}
9090
page={page}
9191
onChange={setPage}
92-
showControls
93-
color="primary"
94-
size="lg"
92+
isDisabled={loading}
9593
/>
9694
</div>
9795
)}

0 commit comments

Comments
 (0)