diff --git a/package-lock.json b/package-lock.json index 59fc070..9e75e46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.5", "@ethersproject/units": "^5.7.0", - "@oceanprotocol/dbs": "^0.0.2-alpha.25", + "@oceanprotocol/dbs": "^0.0.2-alpha.27", "@oceanprotocol/typographies": "^0.1.0", "@rollup/plugin-commonjs": "^25.0.2", "@rollup/plugin-json": "^6.0.0", @@ -6458,9 +6458,9 @@ } }, "node_modules/@oceanprotocol/dbs": { - "version": "0.0.2-alpha.25", - "resolved": "https://registry.npmjs.org/@oceanprotocol/dbs/-/dbs-0.0.2-alpha.25.tgz", - "integrity": "sha512-1kg7aeBoAadpRmZnvKWa9abLLtfejKKQ2aoo0k4Ckaif1yrOcVVvEvK6xRJzNhAJikF5FgYpOGdtZYG/8Aly+w==", + "version": "0.0.2-alpha.27", + "resolved": "https://registry.npmjs.org/@oceanprotocol/dbs/-/dbs-0.0.2-alpha.27.tgz", + "integrity": "sha512-vmGfDkLDMmoFCyLkE9mP3KTMNMoYp15Qw/4JSks0fnwLaxer0ORv9D+F/spclxQdCPPkzna81wl1aCdGQJFGXg==", "dev": true, "dependencies": { "arweave": "^1.14.4", diff --git a/package.json b/package.json index 219468f..c6ac26c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@oceanprotocol/dbs-ui-lib", - "version": "0.0.2", + "version": "0.1.0", "description": "Ocean Protocol DBS component library", "repository": { "type": "git", @@ -23,7 +23,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.5", "@ethersproject/units": "^5.7.0", - "@oceanprotocol/dbs": "^0.0.2-alpha.25", + "@oceanprotocol/dbs": "^0.0.2-alpha.27", "@oceanprotocol/typographies": "^0.1.0", "@rollup/plugin-commonjs": "^25.0.2", "@rollup/plugin-json": "^6.0.0", diff --git a/src/components/HistoryList/index.tsx b/src/components/HistoryList/index.tsx index 5eae686..b579129 100644 --- a/src/components/HistoryList/index.tsx +++ b/src/components/HistoryList/index.tsx @@ -5,6 +5,7 @@ import { addEllipsesToText } from '../../@utils/textFormat' import Loader from '../Loader'; import { getStatusMessage } from '../../@utils/statusCode' import { getLink } from '../../@utils/linkAsset' +import Pagination from './pagination'; const HistoryList = ({ items, @@ -12,7 +13,10 @@ const HistoryList = ({ uploads, historyUnlocked, getHistoryList, - historyLoading + historyLoading, + historyPage, + historyTotalPages, + changeHistoryPage }: { items: any tabIndex: number @@ -20,6 +24,9 @@ const HistoryList = ({ historyUnlocked: boolean getHistoryList: any historyLoading: boolean + historyPage: number + historyTotalPages: number + changeHistoryPage: any }): ReactElement => { const [files, setFiles] = React.useState({}) @@ -28,59 +35,69 @@ const HistoryList = ({ }, [uploads]) return ( -
- - - - - - - - - - - - {files.length > 0 && files.map((file: any, index: number) => ( - - - - - - + <> +
+
Quote IDStatus MessageStatus CodeDDO Link{'Preview'}
{addEllipsesToText(file.quoteId, 15)}{getStatusMessage(file.status, items[tabIndex].type)}{file.status}{file?.transactionHash || file?.cid} - -
+ + + + + + + - ))} - - { - !historyUnlocked && - - } -
Quote IDStatus MessageStatus CodeDDO Link{'Preview'}
-
+ + + {files.length > 0 && files.map((file: any, index: number) => ( + + {addEllipsesToText(file.quoteId, 15)} + {getStatusMessage(file.status, items[tabIndex].type)} + {file.status} + {file?.transactionHash || file?.cid} + + + + + ))} + + { + !historyUnlocked && + + } + + + { + historyUnlocked && historyTotalPages > 1 && + { changeHistoryPage(page)}} + /> + } + ) } diff --git a/src/components/HistoryList/pagination.module.css b/src/components/HistoryList/pagination.module.css new file mode 100644 index 0000000..4c3a4a6 --- /dev/null +++ b/src/components/HistoryList/pagination.module.css @@ -0,0 +1,89 @@ +.paginationContainer { + display: flex; + justify-content: center; +} + +.pagination { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: var(--spacer); + margin-bottom: var(--spacer); + padding-left: 0; + font-size: var(--font-size-small); + } + + .number { + font-weight: var(--font-weight-bold); + margin-left: -1px; + margin-top: -1px; + display: block; + cursor: pointer; + min-width: 3rem; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-secondary); + } + + li:first-child .number, + :global(li.selected):nth-child(2) .number { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + } + + li:last-child .number { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + + .number, + .number:hover, + .number:focus, + .number:active { + transform: none; + outline: 0; + } + + .number:hover { + color: var(--brand-pink); + } + + .current, + .prev, + .next, + .break { + composes: number; + } + + .current { + cursor: default; + pointer-events: none; + } + + .current > a, + .current:hover, + .current:focus, + .current:active { + color: var(--brand-pink) !important; + } + + .next { + text-align: right; + } + + .prevNextDisabled { + opacity: 0; + } + + .arrow { + width: 1rem; + height: 1rem; + fill: currentColor; + } + + .arrow.previous { + transform: rotate(180deg); + } + \ No newline at end of file diff --git a/src/components/HistoryList/pagination.tsx b/src/components/HistoryList/pagination.tsx new file mode 100644 index 0000000..9c3fa55 --- /dev/null +++ b/src/components/HistoryList/pagination.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import styles from './pagination.module.css'; + +interface PaginationProps { + totalPages: number; + currentPage: number; + onPageChange: (page: number) => void; +} + +const Pagination = ({ totalPages, currentPage, onPageChange }: PaginationProps) => { + // Define the number of pages to show at the beginning and end + const pagesToShow = 3; + + // Calculate the start and end range of pages to display + let startPage = Math.max(1, currentPage - pagesToShow); + let endPage = Math.min(totalPages, currentPage + pagesToShow); + + // If we have less than the required number of pages to show at the beginning, + // adjust the endPage to display enough pages. + if (currentPage <= pagesToShow) { + endPage = Math.min(currentPage + pagesToShow + (pagesToShow - currentPage), totalPages); + } + + // If we have less than the required number of pages to show at the end, + // adjust the startPage to display enough pages. + if (currentPage >= totalPages - pagesToShow) { + startPage = Math.max(currentPage - pagesToShow - (pagesToShow - (totalPages - currentPage - 1)), 1); + } + + // Generate the pageNumbers array based on the calculated startPage and endPage + const pageNumbers = []; + if (startPage > 1) { + pageNumbers.push(1); + if (startPage > 2) { + pageNumbers.push('...'); + } + } + for (let i = startPage; i <= endPage; i++) { + pageNumbers.push(i); + } + if (endPage < totalPages) { + if (endPage < totalPages - 1) { + pageNumbers.push('...'); + } + pageNumbers.push(totalPages); + } + + const handlePageChange = (page: number) => { + if (page < 1 || page > totalPages) return; + onPageChange(page); + }; + + return ( +
+ +
+ ); +}; + +export default Pagination; diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index 382a36b..965653d 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -86,6 +86,10 @@ export default function TabsFile({ const [file, setFile] = useState(); const [submitText, setSubmitText] = useState('Get Quote'); + + const [pageHistory, setPageHistory] = useState(1); + const [pageSizeHistory] = useState(5); + const [totalPagesHistory, setTotalPagesHistory] = useState(1); const isHidden = false @@ -210,7 +214,7 @@ export default function TabsFile({ setUploadIsLoading(false); } // check if there's any failure - if (status == 200 || status == 401) { + if (status == 200 || status == 401 || status == 404) { keepLoading = false; throw new Error('File uploaded failed!'); } @@ -321,29 +325,27 @@ export default function TabsFile({ } }, [step]) - const getHistoryList = async () => { + const getHistoryList = async (pageNumber = 1, pageSize = pageSizeHistory, service = items[tabIndex].type) => { setHistoryLoading(true); try { - const historyList = await dbsClient.getHistory() - console.log('history result:', historyList) - /* - arweave: historyList[0] - filecoin: historyList[1] - */ - historyList.forEach((item: any) => { - console.log('item: ', item[items[tabIndex].type]); - if (item[items[tabIndex].type]) { - setHistoryList(item[items[tabIndex].type]); - setHistoryUnlocked(true); - setHistoryLoading(false); - } - }) + const historyList = await dbsClient.getHistory(pageNumber, pageSize, service) + console.log('history result: ', historyList) + setTotalPagesHistory(historyList?.maxPages); + setHistoryList(historyList?.data); + setHistoryUnlocked(true); + setHistoryLoading(false); + setPageHistory(pageNumber); } catch (error) { console.log(error); setHistoryLoading(false); } } + const changeHistoryPage = (page: number) => { + console.log('requesting history page: ', page); + getHistoryList(page, pageSizeHistory, items[tabIndex].type); + } + useEffect(() => { setHistoryList(mockedDataHistory); }, [items[tabIndex].type]) @@ -498,6 +500,9 @@ export default function TabsFile({ historyUnlocked={historyUnlocked} getHistoryList={getHistoryList} historyLoading={historyLoading} + historyPage={pageHistory} + historyTotalPages={totalPagesHistory} + changeHistoryPage={(page: number) => changeHistoryPage(page)} />