refactor: fully control pagination values

across-protocol · Nov 8, 2023 · bf2450d · bf2450d
1 parent 3f46efa
commit bf2450d
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 62 deletions.
diff --git a/src/components/DepositsTable/DataRow.tsx b/src/components/DepositsTable/DataRow.tsx
@@ -28,12 +28,12 @@ type Props = {
   deposit: Deposit;
   headerCells: HeaderCells;
   disabledColumns?: ColumnKey[];
-  onClickSpeedUp?: () => void;
+  onClickSpeedUp?: (deposit: Deposit) => void;
 };
 
 const config = getConfig();
 
-const MAX_PENDING_STATE_TIME_UNTIL_SLOW = 15 * 60; // 15 mins
+const MAX_PENDING_STATE_TIME_UNTIL_SLOW = 30 * 60; // 30 mins
 
 function isColumnDisabled(disabledColumns: ColumnKey[], column: ColumnKey) {
   return disabledColumns.includes(column);
@@ -59,8 +59,9 @@ export function DataRow({
   );
   const isSlowRelay =
     deposit.status === "pending" &&
-    DateTime.fromSeconds(deposit.depositTime).diffNow("seconds").as("seconds") <
-      MAX_PENDING_STATE_TIME_UNTIL_SLOW;
+    Math.abs(
+      DateTime.fromSeconds(deposit.depositTime).diffNow("seconds").as("seconds")
+    ) > MAX_PENDING_STATE_TIME_UNTIL_SLOW;
 
   // Hide unsupported or unknown token deposits
   if (!token) {

diff --git a/src/components/DepositsTable/DepositsTable.tsx b/src/components/DepositsTable/DepositsTable.tsx
@@ -6,7 +6,7 @@ import { Deposit } from "hooks/useDeposits";
 
 export type Props = {
   disabledColumns?: ColumnKey[];
-  onClickSpeedUp?: () => void;
+  onClickSpeedUp?: (deposit: Deposit) => void;
   deposits: Deposit[];
 };
 
@@ -42,7 +42,6 @@ const Wrapper = styled.div`
 `;
 
 const StyledTable = styled.table`
-  width: 1666px;
   white-space: nowrap;
   table-layout: fixed;
 `;
diff --git a/src/components/DepositsTable/HeadRow.tsx b/src/components/DepositsTable/HeadRow.tsx
@@ -19,7 +19,7 @@ export const headerCells = {
   },
   route: {
     label: "Route",
-    width: 206,
+    width: 144,
   },
   address: {
     label: "Address",

diff --git a/src/components/DepositsTable/PaginatedDepositsTable.tsx b/src/components/DepositsTable/PaginatedDepositsTable.tsx
@@ -1,12 +1,13 @@
 import styled from "@emotion/styled";
 
-import Pagination from "components/Pagination";
-import { usePagination } from "hooks/usePagination";
+import Pagination, { paginate } from "components/Pagination";
 import { DepositsTable, Props as DepositsTableProps } from "./DepositsTable";
 
 type Props = DepositsTableProps & {
-  onPageChange: (currentPage: number) => void;
-  onPageSizeChange: (currentPageSize: number) => void;
+  currentPage: number;
+  onPageChange: (newPage: number) => void;
+  currentPageSize: number;
+  onPageSizeChange: (newPageSize: number) => void;
   totalCount: number;
   initialPageSize?: number;
   pageSizes?: number[];
@@ -15,29 +16,29 @@ type Props = DepositsTableProps & {
 const DEFAULT_PAGE_SIZES = [10, 25, 50];
 
 export function PaginatedDepositsTable({
+  currentPage,
   onPageChange,
+  currentPageSize,
   onPageSizeChange,
   totalCount,
   initialPageSize = DEFAULT_PAGE_SIZES[0],
   pageSizes = DEFAULT_PAGE_SIZES,
   ...depositsTableProps
 }: Props) {
-  const { pageSize, currentPage, setCurrentPage, setPageSize, paginateValues } =
-    usePagination(totalCount, { initialPageSize });
+  const paginateValues = paginate({
+    elementCount: totalCount,
+    currentPage,
+    maxNavigationCount: 5,
+    elementsPerPage: currentPageSize,
+  });
 
   return (
     <>
       <DepositsTable {...depositsTableProps} />
       <PaginationWrapper>
         <Pagination
-          onPageChange={(newPage) => {
-            setCurrentPage(newPage);
-            onPageChange(newPage);
-          }}
-          onPageSizeChange={(newPageSize) => {
-            setPageSize(newPageSize);
-            onPageSizeChange(newPageSize);
-          }}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
           pageList={paginateValues.pageList}
           activeIndex={paginateValues.activeIndex}
           disableBack={paginateValues.disableBack}
@@ -46,7 +47,7 @@ export function PaginatedDepositsTable({
           hideEnd={paginateValues.hideEnd}
           lastPage={paginateValues.lastPage}
           currentPage={currentPage}
-          pageSize={pageSize}
+          pageSize={currentPageSize}
           pageSizes={pageSizes}
         />
       </PaginationWrapper>

diff --git a/src/components/DepositsTable/cells/ActionsCell.tsx b/src/components/DepositsTable/cells/ActionsCell.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import styled from "@emotion/styled";
 
 import { ReactComponent as ZapIcon } from "assets/zap.svg";
@@ -11,7 +12,7 @@ type Props = {
   deposit: Deposit;
   isSlowRelay?: boolean;
   isProfitable?: boolean;
-  onClickSpeedUp?: () => void;
+  onClickSpeedUp?: (deposit: Deposit) => void;
 };
 
 export function ActionsCell({
@@ -41,12 +42,16 @@ export function ActionsCell({
       </Tooltip>
     ) : null;
 
+  const handleClickSpeedUp = useCallback(() => {
+    onClickSpeedUp?.(deposit);
+  }, [deposit, onClickSpeedUp]);
+
   const speedUp =
     deposit.status === "pending" ? (
       isProfitable ? (
-        <ZapIconOnHover id="speed-up-icon" onClick={onClickSpeedUp} />
+        <ZapIconOnHover id="speed-up-icon" onClick={handleClickSpeedUp} />
       ) : (
-        <ZapIconPersistent onClick={onClickSpeedUp} />
+        <ZapIconPersistent onClick={handleClickSpeedUp} />
       )
     ) : null;
 

diff --git a/src/components/Pagination/Pagination.styles.tsx b/src/components/Pagination/Pagination.styles.tsx
@@ -38,6 +38,11 @@ export const PageSizeSelectButton = styled(UnstyledButton)`
   svg {
     margin-left: 6px;
   }
+
+  @media ${QUERIESV2.sm.andDown} {
+    margin-bottom: 1rem;
+    padding: 10px 20px;
+  }
 `;
 
 const PageSelectDropdownRevealAnimation = keyframes`
@@ -83,6 +88,10 @@ export const PageSizeOptiontButton = styled(UnstyledButton)`
     background-color: var(--color-primary);
     color: var(--color-gray);
   }
+
+  @media ${QUERIESV2.sm.andDown} {
+    padding: 6px 20px;
+  }
 `;
 
 export const PaginationElements = styled.div`

diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
diff --git a/src/stories/PaginatedDepositsTable.stories.tsx b/src/stories/PaginatedDepositsTable.stories.tsx
@@ -163,6 +163,7 @@ export default meta;
 type Story = StoryObj<typeof PaginatedDepositsTable>;
 
 const BasicPagination = () => {
+  const [currentPage, setCurrentPage] = useState(0);
   const [pageSize, setPageSize] = useState(1);
   const [deposits, setDeposits] = useState<Deposit[]>(
     mockedDeposits.slice(0, 1)
@@ -171,9 +172,12 @@ const BasicPagination = () => {
   return (
     <PaginatedDepositsTable
       deposits={deposits}
+      currentPage={currentPage}
       onPageChange={(page) => {
+        setCurrentPage(page);
         setDeposits(mockedDeposits.slice(page, page + pageSize));
       }}
+      currentPageSize={pageSize}
       onPageSizeChange={(size) => {
         setPageSize(size);
         setDeposits(mockedDeposits.slice(0, size));