ui component for pagination ready

- waiting for dbsjs last updates

package.json

@@ -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.26",
     "@oceanprotocol/typographies": "^0.1.0",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-json": "^6.0.0",

src/components/HistoryList/index.tsx

@@ -5,21 +5,26 @@ 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,
   tabIndex,
   uploads,
   historyUnlocked,
   getHistoryList,
-  historyLoading
+  historyLoading,
+  historyPage,
+  changeHistoryPage
 }: {
   items: any
   tabIndex: number
   uploads: any
   historyUnlocked: boolean
   getHistoryList: any
   historyLoading: boolean
+  historyPage: number
+  changeHistoryPage: any
 }): ReactElement => {
   const [files, setFiles] = React.useState<any>({})
 
@@ -80,6 +85,14 @@ const HistoryList = ({
           </Button>
         }
       </table>
+      {
+        historyUnlocked && 
+        <Pagination 
+          totalPages={25}
+          currentPage={historyPage}
+          onPageChange={(page: number) => { changeHistoryPage(page)}}
+        />
+      }
     </div>
   )
 }

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);
+  }
+

src/components/HistoryList/pagination.tsx

@@ -0,0 +1,98 @@
+import React, { useState } 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 (
+    <div className={styles.paginationContainer}>
+      <ul className={styles.pagination}>
+        <li
+          className={`${currentPage === 1 ? styles.prevNextDisabled : ''}`}
+        >
+          <a
+            className={`${styles.prev}`}
+            onClick={() => handlePageChange(currentPage - 1)}
+          >
+            Previous
+          </a>
+        </li>
+
+        {pageNumbers.map((page) => (
+          <li
+            key={page}
+            className={`${currentPage === page ? styles.current : ''}`}
+          >
+            <a
+              className={`${styles.number}`}
+              onClick={() => { if (typeof page === 'number') handlePageChange(page) }}
+            >
+              {page}
+            </a>
+          </li>
+        ))}
+
+        <li
+          className={`${
+            currentPage === totalPages ? styles.prevNextDisabled : ''
+          }${styles.next}`}
+        >
+          <a
+            className={`${styles.next}`}
+            onClick={() => handlePageChange(currentPage + 1)}
+          >
+            Next
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Pagination;

src/components/TabsFile/index.tsx

@@ -86,6 +86,9 @@ export default function TabsFile({
 
   const [file, setFile] = useState<File>();
   const [submitText, setSubmitText] = useState('Get Quote');
+
+  const [pageHistory, setPageHistory] = useState(1);
+  const [pageSizeHistory] = useState(25);
 
   const isHidden = false
 
@@ -210,7 +213,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!');
       }
@@ -324,7 +327,7 @@ export default function TabsFile({
   const getHistoryList = async () => {
     setHistoryLoading(true);
     try {
-      const historyList = await dbsClient.getHistory()
+      const historyList = await dbsClient.getHistory(pageHistory, pageSizeHistory)
       console.log('history result:', historyList)
       /*
       arweave: historyList[0]
@@ -344,6 +347,12 @@ export default function TabsFile({
     }
   }
 
+  const changeHistoryPage = (page: number) => {
+    console.log('requesting history page: ', page);
+    setPageHistory(page);
+    getHistoryList();
+  }
+
   useEffect(() => {
     setHistoryList(mockedDataHistory);
   }, [items[tabIndex].type])
@@ -498,6 +507,8 @@ export default function TabsFile({
                 historyUnlocked={historyUnlocked}
                 getHistoryList={getHistoryList}
                 historyLoading={historyLoading}
+                historyPage={pageHistory}
+                changeHistoryPage={(page: number) => changeHistoryPage(page)}
               />
 
             </TabPanel>