feat: pagination controls for purchase history table (#164)

* feat: pagination controls for purchase history table * read from environment * fix * rename --------- Co-authored-by: Sergej <[email protected]>
RegionX-Labs · Jun 14, 2024 · 2d49c94 · 2d49c94
1 parent 74cddf3
commit 2d49c94
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 96 deletions.
diff --git a/.env.example b/.env.example
@@ -3,6 +3,6 @@ WS_KUSAMA_CORETIME_CHAIN="WSS endpoint of the coretime chain"
 WS_ROCOCO_RELAY_CHAIN="WSS endpoint of the coretime relay chain"
 WS_KUSAMA_RELAY_CHAIN="WSS endpoint of the coretime relay chain"
 WS_REGIONX_CHAIN="WSS endpoint of the regionx chain"
-ROCOCO_CORETIME_API="API endpoint for Rococo Coretime"
-KUSAMA_CORETIME_API="API endpoint for Kusama Coretime"
+SUBSCAN_CORETIME_ROCOCO_API="API endpoint for Rococo Coretime"
+SUBSCAN_CORETIME_KUSAMA_API="API endpoint for Kusama Coretime"
 EXPERIMENTAL=false
diff --git a/next.config.js b/next.config.js
@@ -7,6 +7,8 @@ const nextConfig = {
   env: {
     WS_ROCOCO_CORETIME_CHAIN: process.env.WS_ROCOCO_CORETIME_CHAIN || '',
     WS_KUSAMA_CORETIME_CHAIN: process.env.WS_KUSAMA_CORETIME_CHAIN || '',
+    SUBSCAN_CORETIME_ROCOCO_API: process.env.SUBSCAN_CORETIME_ROCOCO_API || '',
+    SUBSCAN_CORETIME_KUSAMA_API: process.env.SUBSCAN_CORETIME_KUSAMA_API || '',
     WS_REGIONX_CHAIN: process.env.WS_REGIONX_CHAIN || '',
     WS_ROCOCO_RELAY_CHAIN: process.env.WS_ROCOCO_RELAY_CHAIN,
     WS_KUSAMA_RELAY_CHAIN: process.env.WS_KUSAMA_RELAY_CHAIN,

diff --git a/src/components/Modals/Regions/PurchaseHistory/index.module.scss b/src/components/Modals/Regions/PurchaseHistory/index.module.scss
@@ -6,5 +6,5 @@
 }
 
 .tableContainer {
-  overflow-y: auto;
-}
+  margin-top: 1rem;
+}
diff --git a/src/components/Modals/Regions/PurchaseHistory/index.tsx b/src/components/Modals/Regions/PurchaseHistory/index.tsx
@@ -39,7 +39,7 @@ export const PurchaseHistoryModal = ({
     network,
     regionBegin,
     0,
-    20
+    1000
   );
 
   return (
@@ -65,28 +65,22 @@ export const PurchaseHistoryModal = ({
             current bulk period.
           </Typography>
         </Box>
-        <Box>
-          {loading || isError ? (
-            <Stack
-              alignItems='center'
-              minHeight='10rem'
-              justifyContent='center'
-            >
-              {loading ? (
-                <CircularProgress />
-              ) : (
-                <Stack alignItems='center' direction='row' gap='1rem'>
-                  <Warning color='error' />
-                  <Typography>Failed to fetch purchase history</Typography>
-                </Stack>
-              )}
-            </Stack>
-          ) : (
-            <Box className={styles.tableContainer}>
-              <PurchaseHistoryTable data={data} />
-            </Box>
-          )}
-        </Box>
+        {loading || isError ? (
+          <Stack alignItems='center' minHeight='10rem' justifyContent='center'>
+            {loading ? (
+              <CircularProgress />
+            ) : (
+              <Stack alignItems='center' direction='row' gap='1rem'>
+                <Warning color='error' />
+                <Typography>Failed to fetch purchase history</Typography>
+              </Stack>
+            )}
+          </Stack>
+        ) : (
+          <Box className={styles.tableContainer}>
+            <PurchaseHistoryTable data={data} />
+          </Box>
+        )}
       </DialogContent>
       <DialogActions>
         <Box>

diff --git a/src/components/Tables/PurchaseHistoryTable/index.tsx b/src/components/Tables/PurchaseHistoryTable/index.tsx
@@ -1,13 +1,17 @@
 import {
   Paper,
+  Stack,
   Table,
   TableBody,
   TableContainer,
+  TableFooter,
   TableHead,
+  TablePagination,
   TableRow,
 } from '@mui/material';
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en';
+import { useState } from 'react';
 
 import { planckBnToUnit } from '@/utils/functions';
 
@@ -18,7 +22,7 @@ import { useCoretimeApi } from '@/contexts/apis';
 import { useNetwork } from '@/contexts/network';
 import { PurchaseHistoryItem } from '@/models';
 
-import { StyledTableCell } from '../common';
+import { StyledTableCell, StyledTableRow } from '../common';
 
 interface PurchaseHistoryTableProps {
   data: PurchaseHistoryItem[];
@@ -34,64 +38,103 @@ export const PurchaseHistoryTable = ({ data }: PurchaseHistoryTableProps) => {
     state: { symbol, decimals },
   } = useCoretimeApi();
 
+  // table pagination
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const handleChangePage = (
+    _event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
   return (
-    <TableContainer
-      component={Paper}
-      sx={{ maxHeight: '40rem', maxWidth: '100%' }}
-    >
-      <Table stickyHeader>
-        <TableHead>
+    <Stack direction='column' gap='1em'>
+      <TableContainer component={Paper} sx={{ height: '35rem' }}>
+        <Table stickyHeader>
+          <TableHead>
+            <TableRow>
+              <StyledTableCell>Extrinsic Idx</StyledTableCell>
+              <StyledTableCell>Account</StyledTableCell>
+              <StyledTableCell>Core</StyledTableCell>
+              <StyledTableCell>{`Price (${symbol})`}</StyledTableCell>
+              <StyledTableCell>Sales Type</StyledTableCell>
+              <StyledTableCell>Timestamp</StyledTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map(
+              (
+                { address, core, extrinsic_index, timestamp, price, type },
+                index
+              ) => (
+                <StyledTableRow key={index}>
+                  <StyledTableCell>
+                    <Link
+                      href={`${SUBSCAN_URL[network]}/extrinsic/${extrinsic_index}`}
+                      target='_blank'
+                    >
+                      {extrinsic_index}
+                    </Link>
+                  </StyledTableCell>
+                  <StyledTableCell>
+                    <Link
+                      href={`${SUBSCAN_URL[network]}/account/${address}`}
+                      target='_blank'
+                    >
+                      <Address
+                        value={address}
+                        isCopy={true}
+                        isShort={true}
+                        size={24}
+                      />
+                    </Link>
+                  </StyledTableCell>
+                  <StyledTableCell align='right'>{core}</StyledTableCell>
+                  <StyledTableCell align='right'>
+                    {planckBnToUnit(price.toString(), decimals)}
+                  </StyledTableCell>
+                  <StyledTableCell>{type}</StyledTableCell>
+                  <StyledTableCell>
+                    {timeAgo.format(timestamp * 1000, 'round-minute')}
+                  </StyledTableCell>
+                </StyledTableRow>
+              )
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Stack alignItems='center'>
+        <TableFooter sx={{ alignItems: 'center' }}>
           <TableRow>
-            <StyledTableCell>Extrinsic Idx</StyledTableCell>
-            <StyledTableCell>Account</StyledTableCell>
-            <StyledTableCell>Core</StyledTableCell>
-            <StyledTableCell>{`Price (${symbol})`}</StyledTableCell>
-            <StyledTableCell>Sales Type</StyledTableCell>
-            <StyledTableCell>Timestamp</StyledTableCell>
+            <TablePagination
+              rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
+              colSpan={3}
+              count={data.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              slotProps={{
+                select: {
+                  inputProps: {
+                    'aria-label': 'rows per page',
+                  },
+                  native: true,
+                },
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
           </TableRow>
-        </TableHead>
-        <TableBody>
-          {data.map(
-            (
-              { address, core, extrinsic_index, timestamp, price, type },
-              index
-            ) => (
-              <TableRow key={index}>
-                <StyledTableCell>
-                  <Link
-                    href={`${SUBSCAN_URL[network]}/extrinsic/${extrinsic_index}`}
-                    target='_blank'
-                  >
-                    {extrinsic_index}
-                  </Link>
-                </StyledTableCell>
-                {/** FIXME: replace with the Address component */}
-                <StyledTableCell>
-                  <Link
-                    href={`${SUBSCAN_URL[network]}/account/${address}`}
-                    target='_blank'
-                  >
-                    <Address
-                      value={address}
-                      isCopy={true}
-                      isShort={true}
-                      size={24}
-                    />
-                  </Link>
-                </StyledTableCell>
-                <StyledTableCell align='right'>{core}</StyledTableCell>
-                <StyledTableCell align='right'>
-                  {planckBnToUnit(price.toString(), decimals)}
-                </StyledTableCell>
-                <StyledTableCell>{type}</StyledTableCell>
-                <StyledTableCell>
-                  {timeAgo.format(timestamp * 1000, 'round-minute')}
-                </StyledTableCell>
-              </TableRow>
-            )
-          )}
-        </TableBody>
-      </Table>
-    </TableContainer>
+        </TableFooter>
+      </Stack>
+    </Stack>
   );
 };
diff --git a/src/consts/index.ts b/src/consts/index.ts
@@ -1,8 +1,8 @@
 import { NetworkType } from '@/models';
 
-export const CORETIME_API = {
-  [NetworkType.ROCOCO]: process.env.ROCOCO_CORETIME_API ?? '',
-  [NetworkType.KUSAMA]: process.env.KUSAMA_CORETIME_API ?? '',
+export const SUBSCAN_CORETIME_API = {
+  [NetworkType.ROCOCO]: process.env.SUBSCAN_CORETIME_ROCOCO_API ?? '',
+  [NetworkType.KUSAMA]: process.env.SUBSCAN_CORETIME_KUSAMA_API ?? '',
   [NetworkType.NONE]: '',
 };
 

diff --git a/src/hooks/purchaseHistory.ts b/src/hooks/purchaseHistory.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { CORETIME_API } from '@/consts';
+import { SUBSCAN_CORETIME_API } from '@/consts';
 import {
   NetworkType,
   PurchaseHistoryItem,
@@ -21,14 +21,17 @@ export const usePurchaseHistory = (
     const asyncFetchData = async () => {
       setLoading(true);
       try {
-        const res = await fetch(`${CORETIME_API[network]}/broker/purchased`, {
-          method: 'POST',
-          body: JSON.stringify({
-            region_begin: regionBegin,
-            row,
-            page,
-          }),
-        });
+        const res = await fetch(
+          `${SUBSCAN_CORETIME_API[network]}/api/scan/broker/purchased`,
+          {
+            method: 'POST',
+            body: JSON.stringify({
+              region_begin: regionBegin,
+              row,
+              page,
+            }),
+          }
+        );
         if (res.status !== 200) {
           setError(true);
         } else {