fix(page): pagination of data

Magickbase · Oct 7, 2023 · 29ab363 · 29ab363
1 parent becc58f
commit 29ab363
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx
@@ -15,7 +15,7 @@ import TransactionCellScript from '../Transaction/TransactionCellScript'
 import { shannonToCkb, toCamelcase } from '../../utils/util'
 import { localeNumberString } from '../../utils/number'
 import DecimalCapacity from '../../components/DecimalCapacity'
-import { CellInScript, CkbTransactionInScript } from './types'
+import { CellInScript, CkbTransactionInScript, PageInfo } from './types'
 import styles from './styles.module.scss'
 import { QueryResult } from '../../components/QueryResult'
 import AddressText from '../../components/AddressText'
@@ -29,7 +29,7 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
   const { codeHash, hashType } = useParams<{ codeHash: string; hashType: string }>()
 
   const transactionsQuery = useQuery(['scripts_ckb_transactions', codeHash, hashType, page, size], async () => {
-    const { data, meta } = await v2AxiosIns
+    const { data } = await v2AxiosIns
       .get(`scripts/ckb_transactions`, {
         params: {
           code_hash: codeHash,
@@ -39,14 +39,14 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
         },
       })
       .then((res: AxiosResponse) =>
-        toCamelcase<Response.Response<{ ckbTransactions: CkbTransactionInScript[] }>>(res.data),
+        toCamelcase<Response.Response<{ ckbTransactions: CkbTransactionInScript[]; meta: PageInfo }>>(res.data),
       )
 
     if (data == null || data.ckbTransactions == null || data.ckbTransactions.length === 0) {
       throw new Error('Transactions empty')
     }
     return {
-      total: meta?.total ?? 0,
+      total: data.meta.total,
       ckbTransactions: data.ckbTransactions,
     }
   })
@@ -125,7 +125,7 @@ export const ScriptCells = ({
   const { codeHash, hashType } = useParams<{ codeHash: string; hashType: string }>()
 
   const cellsQuery = useQuery([`scripts_${cellType}`, codeHash, hashType, page, size], async () => {
-    const { data, meta } = await v2AxiosIns
+    const { data } = await v2AxiosIns
       .get(`scripts/${cellType}`, {
         params: {
           code_hash: codeHash,
@@ -135,7 +135,9 @@ export const ScriptCells = ({
         },
       })
       .then((res: AxiosResponse) =>
-        toCamelcase<Response.Response<{ deployedCells?: CellInScript[]; referringCells?: CellInScript[] }>>(res.data),
+        toCamelcase<
+          Response.Response<{ deployedCells?: CellInScript[]; referringCells?: CellInScript[]; meta: PageInfo }>
+        >(res.data),
       )
     const camelCellType = camelcase(cellType) as 'deployedCells' | 'referringCells'
     if (data == null) {
@@ -146,7 +148,7 @@ export const ScriptCells = ({
       throw new Error('Cells empty')
     }
     return {
-      total: meta?.total ?? 0,
+      total: data.meta.total ?? 0,
       cells,
     }
   })

diff --git a/src/pages/Script/types.ts b/src/pages/Script/types.ts
@@ -14,6 +14,11 @@ export interface ScriptInfo {
 
 export type ScriptTabType = 'transactions' | 'deployed_cells' | 'referring_cells' | undefined
 
+export type PageInfo = {
+  total: number
+  pageSize: number
+}
+
 export interface CkbTransactionInScript {
   id: number
   txHash: string