diff --git a/src/ListImage.tsx b/src/ListImage.tsx index 9215041..1f346f6 100644 --- a/src/ListImage.tsx +++ b/src/ListImage.tsx @@ -360,7 +360,6 @@ export default function ListImage() { key: 'imageLabel', width: '10%', render: (imageLabel) => { - console.log(imageLabel, 111); if (imageLabel.length <= 0) { return <>; } diff --git a/src/ListRemoteImage.tsx b/src/ListRemoteImage.tsx index b6861ab..d02cac5 100644 --- a/src/ListRemoteImage.tsx +++ b/src/ListRemoteImage.tsx @@ -15,6 +15,8 @@ import { DockerHubImage, } from './electron/DockerHubAdapter'; +const PAGE_SIZE = 10; + interface ImageTag { key: any; name: string; @@ -29,6 +31,8 @@ export default function ListRemoteImages() { const [tagsLoading, setTagsLoading] = useState({}); const [repos, setRepos] = useState[]>([]); const [loading, setLoading] = useState(true); + const [totalSize, setTotalSize] = useState(0); + const [currentPage, setCurrentPage] = useState(1); const expandedRowRender = ( record: Partial, @@ -163,16 +167,23 @@ export default function ListRemoteImages() { }); }; - const genFetchRepo = () => { + const genFetchRepo = (page = 1, pageSize = PAGE_SIZE) => { return async () => { setLoading(true); - const { repositories, errorMsg } = (await send( - 'list-dockerhub-repositories', {page: 1, pageSize: 100} - )) as { repositories: DockerHubRepository[]; errorMsg: string }; + const { repositories, errorMsg, count } = (await send( + 'list-dockerhub-repositories', + { page, pageSize } + )) as { + repositories: DockerHubRepository[]; + errorMsg: string; + count: number; + }; + setTotalSize(count); if (errorMsg) { errorNotificationHandler(errorMsg); } else { setRepos(repositories); + setCurrentPage(page); } setLoading(false); }; @@ -262,7 +273,21 @@ export default function ListRemoteImages() { className='repo-table' columns={columns} dataSource={repos} - pagination={false} + pagination={ + totalSize / PAGE_SIZE > 1 + ? { + position: ['topLeft', 'bottomLeft'], + current: currentPage, + defaultCurrent: 1, + size: 'default', + pageSize: PAGE_SIZE, + total: totalSize, + onChange: (page, pageSize) => { + genFetchRepo(page, pageSize)(); + }, + } + : false + } loading={loading} expandable={{ expandedRowRender,