fix: fix pagination of fiber pages

Magickbase · Oct 21, 2024 · ba7ee9b · ba7ee9b
1 parent ea66611
commit ba7ee9b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/src/pages/Fiber/GraphChannelList/index.tsx b/src/pages/Fiber/GraphChannelList/index.tsx
@@ -7,18 +7,20 @@ import styles from './index.module.scss'
 import Pagination from '../Pagination'
 import { PAGE_SIZE } from '../../../constants/common'
 import GraphChannelListComp from '../../../components/GraphChannelList'
+import { useSearchParams } from '../../../hooks'
 
 const GraphChannelList = () => {
   const [t] = useTranslation()
   const setToast = useSetToast()
+  const { page = 1, page_size: pageSize = PAGE_SIZE } = useSearchParams('page', 'page_size')
 
   const { data } = useQuery({
-    queryKey: ['fiber', 'graph', 'channels'],
-    queryFn: () => explorerService.api.getGraphChannels(),
+    queryKey: ['fiber', 'graph', 'channels', +page, +pageSize],
+    queryFn: () => explorerService.api.getGraphChannels(+page, +pageSize),
   })
 
   const list = data?.data.fiberGraphChannels ?? []
-  const pageInfo = data?.data.meta ?? { total: 1, pageSize: PAGE_SIZE }
+  const pageInfo = data?.meta ?? { total: 1, pageSize: PAGE_SIZE }
   const totalPages = Math.ceil(pageInfo.total / pageInfo.pageSize)
 
   const handleCopy = (e: React.SyntheticEvent) => {

diff --git a/src/pages/Fiber/GraphNodeList/index.tsx b/src/pages/Fiber/GraphNodeList/index.tsx
@@ -14,6 +14,7 @@ import { parseNumericAbbr } from '../../../utils/chart'
 import styles from './index.module.scss'
 import Pagination from '../Pagination'
 import { PAGE_SIZE } from '../../../constants/common'
+import { useSearchParams } from '../../../hooks'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
@@ -126,14 +127,15 @@ const fields = [
 const GraphNodeList = () => {
   const [t] = useTranslation()
   const setToast = useSetToast()
+  const { page = 1, page_size: pageSize = PAGE_SIZE } = useSearchParams('page', 'page_size')
 
   const { data } = useQuery({
-    queryKey: ['fiber', 'graph', 'nodes'],
-    queryFn: () => explorerService.api.getGraphNodes(),
+    queryKey: ['fiber', 'graph', 'nodes', +page, +pageSize],
+    queryFn: () => explorerService.api.getGraphNodes(+page, +pageSize),
   })
 
   const list = data?.data.fiberGraphNodes ?? []
-  const pageInfo = data?.data.meta ?? { total: 1, pageSize: PAGE_SIZE }
+  const pageInfo = data?.meta ?? { total: 1, pageSize: PAGE_SIZE }
   const totalPages = Math.ceil(pageInfo.total / pageInfo.pageSize)
 
   const handleCopy = (e: React.SyntheticEvent) => {

diff --git a/src/pages/Fiber/PeerList/index.tsx b/src/pages/Fiber/PeerList/index.tsx
@@ -14,6 +14,7 @@ import styles from './index.module.scss'
 import AddPeerForm from './AddPeerForm'
 import Pagination from '../Pagination'
 import { PAGE_SIZE } from '../../../constants/common'
+import { useSearchParams } from '../../../hooks'
 
 const fields = [
   {
@@ -122,14 +123,15 @@ const fields = [
 const PeerList = () => {
   const [t] = useTranslation()
   const setToast = useSetToast()
+  const { page = 1, page_size: pageSize = PAGE_SIZE } = useSearchParams('page', 'page_size')
 
   const { data, refetch: refetchList } = useQuery({
-    queryKey: ['fiber', 'peers'],
-    queryFn: () => explorerService.api.getFiberPeerList(),
+    queryKey: ['fiber', 'peers', +page, +pageSize],
+    queryFn: () => explorerService.api.getFiberPeerList(+page, +pageSize),
   })
 
   const list = data?.data.fiberPeers ?? []
-  const pageInfo = data?.data.meta ?? { total: 1, pageSize: PAGE_SIZE }
+  const pageInfo = data?.meta ?? { total: 1, pageSize: PAGE_SIZE }
   const totalPages = Math.ceil(pageInfo.total / pageInfo.pageSize)
 
   const handleCopy = (e: React.SyntheticEvent) => {