feat: add pagination to protocol history table

DLC-link · Oct 30, 2024 · 3983cba · 3983cba
1 parent 6a809ae
commit 3983cba
Showing 1 changed file with 56 additions and 24 deletions.
diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -1,4 +1,6 @@
-import { Skeleton, useBreakpointValue } from '@chakra-ui/react';
+import { useState } from 'react';
+
+import { Button, HStack, Skeleton, Spacer, VStack, useBreakpointValue } from '@chakra-ui/react';
 import { GenericTableBody } from '@components/generic-table/components/generic-table-body';
 import { GenericTableHeader } from '@components/generic-table/components/generic-table-header';
 import { GenericTableHeaderText } from '@components/generic-table/components/generic-table-header-text';
@@ -10,31 +12,61 @@ interface ProtocolHistoryTableProps {
 }
 
 export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): React.JSX.Element {
-  const dynamicHeight = items ? items.length * 59 + 20 : 20;
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = items?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const totalPages = Math.ceil((items?.length || 0) / itemsPerPage);
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(prevPage => prevPage + 1);
+    }
+  };
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(prevPage => prevPage - 1);
+    }
+  };
+
   return (
-    <GenericTableLayout height={`${dynamicHeight}px`} width={'50%'} isMobile={isMobile}>
-      <GenericTableHeader>
-        {isMobile ? (
-          <>
-            <GenericTableHeaderText w={'50%'}>Order Book</GenericTableHeaderText>
-            <GenericTableHeaderText w={'50%'}>Transaction</GenericTableHeaderText>
-          </>
-        ) : (
-          <>
-            <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Merchant</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Date</GenericTableHeaderText>
-          </>
-        )}
-      </GenericTableHeader>
-      <Skeleton isLoaded={items !== undefined} height={'50px'} w={'100%'}>
-        <GenericTableBody>
-          {items?.map(item => <ProtocolHistoryTableItem key={item.id} {...item} />)}
-        </GenericTableBody>
-      </Skeleton>
-    </GenericTableLayout>
+    <VStack w={'50%'} spacing={4}>
+      <GenericTableLayout height={'680px'} width={'100%'} isMobile={isMobile}>
+        <GenericTableHeader>
+          {isMobile ? (
+            <>
+              <GenericTableHeaderText w={'50%'}>Order Book</GenericTableHeaderText>
+              <GenericTableHeaderText w={'50%'}>Transaction</GenericTableHeaderText>
+            </>
+          ) : (
+            <>
+              <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
+              <GenericTableHeaderText w={'25%'}>Merchant</GenericTableHeaderText>
+              <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
+              <GenericTableHeaderText w={'25%'}>Date</GenericTableHeaderText>
+            </>
+          )}
+        </GenericTableHeader>
+        <Skeleton isLoaded={items !== undefined} height={'50px'} w={'100%'}>
+          <GenericTableBody>
+            {currentItems?.map(item => <ProtocolHistoryTableItem key={item.id} {...item} />)}
+          </GenericTableBody>
+        </Skeleton>
+        <Spacer />
+        <HStack spacing={4}>
+          <Button onClick={handlePreviousPage} isDisabled={currentPage === 1}>
+            Previous
+          </Button>
+          <Button onClick={handleNextPage} isDisabled={currentPage === totalPages}>
+            Next
+          </Button>
+        </HStack>
+      </GenericTableLayout>
+    </VStack>
   );
 }