fix: 🐛 datasetmetadata table

src/components/table/car/index.tsx

@@ -1,12 +1,13 @@
 import React from "react"
 import {
-    Table,
     generateTableColumns,
     convertDataToTableItems,
 } from "@unipackage/webkit"
+import { Table } from "antd"
 import { Car } from "@dataswapjs/dataswapjs"
 import { FromType, ValueFields } from "@unipackage/utils"
 import Link from "next/link"
+import type { TablePaginationConfig } from "antd/es/table"
 import { config_datasetDetailPageRoot } from "../../../config/links"
 
 interface CarTabelItem
@@ -20,9 +21,12 @@ interface CarTabelItem
 
 interface IProps {
     data: ValueFields<Car>[]
+    pagination: TablePaginationConfig
+    loading: boolean
+    onChange: (pagination: TablePaginationConfig) => void
 }
 
-export default ({ data }: IProps) => {
+export default ({ data, pagination, loading, onChange }: IProps) => {
     const columns = generateTableColumns<CarTabelItem>({
         carId: "10%",
         datasetId: "18%",
@@ -49,5 +53,13 @@ export default ({ data }: IProps) => {
         size: item.size,
     }))
 
-    return <Table<CarTabelItem> columns={columns} data={tabelItems} />
+    return (
+        <Table<CarTabelItem>
+            columns={columns}
+            dataSource={tabelItems}
+            pagination={pagination}
+            loading={loading}
+            onChange={onChange}
+        />
+    )
 }

src/components/table/carReplica/index.tsx

@@ -1,10 +1,11 @@
 import React from "react"
 import {
-    Table,
     generateTableColumns,
     convertDataToTableItems,
 } from "@unipackage/webkit"
+import { Table } from "antd"
 import { CarReplica } from "@dataswapjs/dataswapjs"
+import type { TablePaginationConfig } from "antd/es/table"
 import { FromType, ValueFields } from "@unipackage/utils"
 
 interface CarReplicaTabelItem
@@ -18,9 +19,12 @@ interface CarReplicaTabelItem
 
 interface IProps {
     data: ValueFields<CarReplica>[]
+    pagination: TablePaginationConfig
+    loading: boolean
+    onChange: (pagination: TablePaginationConfig) => void
 }
 
-export default ({ data }: IProps) => {
+export default ({ data, pagination, loading, onChange }: IProps) => {
     const columns = generateTableColumns<CarReplicaTabelItem>({
         carId: "20%",
         matchingId: "20%",
@@ -40,5 +44,13 @@ export default ({ data }: IProps) => {
         state: item.state,
     }))
 
-    return <Table<CarReplicaTabelItem> columns={columns} data={tabelItems} />
+    return (
+        <Table<CarReplicaTabelItem>
+            columns={columns}
+            dataSource={tabelItems}
+            pagination={pagination}
+            loading={loading}
+            onChange={onChange}
+        />
+    )
 }

src/components/table/dataset/index.tsx

@@ -1,11 +1,12 @@
 import React from "react"
 import {
-    Table,
     generateTableColumns,
     convertDataToTableItems,
 } from "@unipackage/webkit"
+import { Table } from "antd"
 import { DatasetMetadata } from "@dataswapjs/dataswapjs"
 import { FromType, ValueFields } from "@unipackage/utils"
+import type { TablePaginationConfig } from "antd/es/table"
 import Link from "next/link"
 import { config_datasetDetailPageRoot } from "../../../config/links"
 
@@ -24,9 +25,12 @@ interface DatasetTabelItem
 
 interface IProps {
     data: ValueFields<DatasetMetadata>[]
+    pagination: TablePaginationConfig
+    loading: boolean
+    onChange: (pagination: TablePaginationConfig) => void
 }
 
-export default ({ data }: IProps) => {
+export default ({ data, pagination, loading, onChange }: IProps) => {
     const columns = generateTableColumns<DatasetTabelItem>({
         id: "7%",
         name: "15%",
@@ -61,5 +65,13 @@ export default ({ data }: IProps) => {
         accessMethod: item.accessMethod,
     }))
 
-    return <Table<DatasetTabelItem> columns={columns} data={tabelItems} />
+    return (
+        <Table<DatasetTabelItem>
+            columns={columns}
+            dataSource={tabelItems}
+            pagination={pagination}
+            loading={loading}
+            onChange={onChange}
+        />
+    )
 }

src/components/table/dataset/requirement.tsx

@@ -20,13 +20,14 @@
 
 import React from "react"
 import {
-    Table,
     generateTableColumns,
     convertDataToTableItems,
 } from "@unipackage/webkit"
+import { Table } from "antd"
 import { DatasetRequirement } from "@dataswapjs/dataswapjs"
 import Link from "next/link"
 import { FromType, ValueFields } from "@unipackage/utils"
+import type { TablePaginationConfig } from "antd/es/table"
 import { config_datasetDetailPageRoot } from "../../../config/links"
 
 interface DatasetRequirementTabelItem
@@ -45,9 +46,12 @@ interface DatasetRequirementTabelItem
 
 interface IProps {
     data: ValueFields<DatasetRequirement>[]
+    pagination: TablePaginationConfig
+    loading: boolean
+    onChange: (pagination: TablePaginationConfig) => void
 }
 
-export default ({ data }: IProps) => {
+export default ({ data, pagination, loading, onChange }: IProps) => {
     const columns = generateTableColumns<DatasetRequirementTabelItem>({
         index: "10%",
         datasetId: "15%",
@@ -78,7 +82,10 @@ export default ({ data }: IProps) => {
     return (
         <Table<DatasetRequirementTabelItem>
             columns={columns}
-            data={tabelItems}
+            dataSource={tabelItems}
+            pagination={pagination}
+            loading={loading}
+            onChange={onChange}
         />
     )
 }

src/components/table/matching/index.tsx

@@ -20,12 +20,13 @@
 
 import React from "react"
 import {
-    Table,
     generateTableColumns,
     convertDataToTableItems,
 } from "@unipackage/webkit"
+import { Table } from "antd"
 import { MatchingMetadata } from "@dataswapjs/dataswapjs"
 import { FromType, ValueFields } from "@unipackage/utils"
+import type { TablePaginationConfig } from "antd/es/table"
 import Link from "next/link"
 import {
     config_matchingDetailPageRoot,
@@ -48,9 +49,12 @@ interface MatchingTabelItem
 
 interface IProps {
     data: ValueFields<MatchingMetadata>[]
+    pagination: TablePaginationConfig
+    loading: boolean
+    onChange: (pagination: TablePaginationConfig) => void
 }
 
-export default ({ data }: IProps) => {
+export default ({ data, pagination, loading, onChange }: IProps) => {
     const columns = generateTableColumns<MatchingTabelItem>({
         id: "7.5%",
         datasetId: "10%",
@@ -85,5 +89,13 @@ export default ({ data }: IProps) => {
         createdBlockNumber: item.createdBlockNumber,
     }))
 
-    return <Table<MatchingTabelItem> columns={columns} data={tabelItems} />
+    return (
+        <Table<MatchingTabelItem>
+            columns={columns}
+            dataSource={tabelItems}
+            pagination={pagination}
+            loading={loading}
+            onChange={onChange}
+        />
+    )
 }

src/pages/basic/message/index.tsx

@@ -9,6 +9,7 @@ import { ValueFields } from "@unipackage/utils"
 import { QueryParam } from "@/shared/messagehub/queryParams"
 import { TablePaginationConfig } from "antd"
 import { Input, Space } from "antd"
+import { onSearchBasic, handleTableChangeBasic } from "@/shared/table"
 const { Search } = Input
 
 interface IProps {
@@ -64,19 +65,21 @@ export default ({ queryParam }: IProps) => {
     }, [JSON.stringify(pagination), search])
 
     const handleTableChange = (_pagination: TablePaginationConfig) => {
-        console.log("user click page number", _pagination)
-        setPagination(_pagination)
-        // `dataSource` is useless since `pageSize` changed
-        if (_pagination.pageSize !== pagination?.pageSize) {
-            setDataList([])
-        }
+        handleTableChangeBasic({
+            newPagination: _pagination,
+            oldPagination: pagination,
+            setDataList,
+            setPagination,
+        })
     }
 
     const onSearch = (_search: string) => {
-        setSearch(_search)
-        if (_search !== search) {
-            setDataList([])
-        }
+        onSearchBasic({
+            newSearch: _search,
+            oldSearch: search,
+            setSearch,
+            setDataList,
+        })
     }
 
     return (

src/pages/dataset/index.tsx

@@ -5,8 +5,17 @@ import { PlusOutlined } from "@ant-design/icons"
 import { useRouter } from "next/router"
 import { DatasetMetadata } from "@dataswapjs/dataswapjs"
 import DatasetTabel from "@/components/table/dataset"
-import { getDatasetMetadata } from "../../shared/messagehub/get"
+import {
+    getDatasetMetadata,
+    getDatasetMetadataCount,
+} from "../../shared/messagehub/get"
 import { ValueFields } from "@unipackage/utils"
+import { defaultTableQueryParams } from "../../config/params"
+import { Input, Space } from "antd"
+import { TablePaginationConfig } from "antd"
+import { onSearchBasic, handleTableChangeBasic } from "@/shared/table"
+import { QueryParam } from "@/shared/messagehub/queryParams"
+const { Search } = Input
 
 export async function getServerSideProps(context: NextPageContext) {
     return {
@@ -17,21 +26,76 @@ export async function getServerSideProps(context: NextPageContext) {
 export default function IndexPage({}: InferGetServerSidePropsType<
     typeof getServerSideProps
 >) {
-    const [datasetMetaList, setDatasetMetaList] =
-        useState<ValueFields<DatasetMetadata>[]>()
+    const [dataLis, setDataList] = useState<ValueFields<DatasetMetadata>[]>()
+    const [loading, setLoading] = useState<boolean>(false)
+    const [pagination, setPagination] = useState<TablePaginationConfig>({
+        current: defaultTableQueryParams.page,
+        pageSize: defaultTableQueryParams.limit,
+    })
+    const [search, setSearch] = useState<string>("")
     const router = useRouter()
 
+    const currentQueryParams: QueryParam<DatasetMetadata> = {
+        network: "calibration",
+        queryFilter: {
+            page: pagination.current,
+            limit: pagination.pageSize,
+            or: [
+                { conditions: [{ accessMethod: { $regex: search } }] },
+                { conditions: [{ submitter: { $regex: search } }] },
+                { conditions: [{ name: { $regex: search } }] },
+                {
+                    conditions: [
+                        { createdBlockNumber: { $eq: parseInt(search) } },
+                    ],
+                },
+            ],
+        },
+    }
+
+    // get count when refresh page,do one time
+    useEffect(() => {
+        console.log("before getDatasetMetadataCount", pagination)
+        getDatasetMetadataCount(currentQueryParams).then((res) => {
+            const totalRes = res.data
+            setPagination({
+                ...pagination,
+                total: totalRes,
+            })
+        })
+    }, [search])
+
     useEffect(() => {
-        getDatasetMetadata({ network: "calibration" }).then((res) => {
+        setLoading(true)
+        getDatasetMetadata(currentQueryParams).then((res) => {
             const datasetOveriew = res.data
-            setDatasetMetaList(datasetOveriew)
+            setDataList(datasetOveriew)
+            setLoading(false)
         })
-    }, [])
+    }, [JSON.stringify(pagination), search])
 
     const onClick = () => {
         router.push("/dataset/submit/dataset")
     }
 
+    const handleTableChange = (_pagination: TablePaginationConfig) => {
+        handleTableChangeBasic({
+            newPagination: _pagination,
+            oldPagination: pagination,
+            setPagination,
+            setDataList,
+        })
+    }
+
+    const onSearch = (_search: string) => {
+        onSearchBasic({
+            newSearch: _search,
+            oldSearch: search,
+            setSearch,
+            setDataList,
+        })
+    }
+
     return (
         <>
             <div
@@ -49,8 +113,24 @@ export default function IndexPage({}: InferGetServerSidePropsType<
                     </Button>
                 </div>
             </div>
+            <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                <Space direction="vertical">
+                    <Search
+                        placeholder="search:Height/Name/Submitter/accessMethod"
+                        onSearch={onSearch}
+                        style={{ width: 300 }}
+                    />
+                </Space>
+            </div>
 
-            {datasetMetaList && <DatasetTabel data={datasetMetaList} />}
+            {dataLis && (
+                <DatasetTabel
+                    data={dataLis}
+                    pagination={pagination ? pagination : {}}
+                    loading={loading}
+                    onChange={handleTableChange}
+                />
+            )}
         </>
     )
 }