From bf2450db258eb170cb2f1dbb2467c485d9510497 Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Wed, 8 Nov 2023 13:53:32 +0100 Subject: [PATCH] refactor: fully control pagination values --- src/components/DepositsTable/DataRow.tsx | 9 +++-- .../DepositsTable/DepositsTable.tsx | 3 +- src/components/DepositsTable/HeadRow.tsx | 2 +- .../DepositsTable/PaginatedDepositsTable.tsx | 31 ++++++++-------- .../DepositsTable/cells/ActionsCell.tsx | 11 ++++-- .../Pagination/Pagination.styles.tsx | 9 +++++ src/hooks/usePagination.ts | 37 ------------------- .../PaginatedDepositsTable.stories.tsx | 4 ++ 8 files changed, 44 insertions(+), 62 deletions(-) delete mode 100644 src/hooks/usePagination.ts diff --git a/src/components/DepositsTable/DataRow.tsx b/src/components/DepositsTable/DataRow.tsx index 3216424d6..b07187730 100644 --- 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 index 596dea673..e6f82445e 100644 --- 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 index 6bad3bbae..a6ad5d36f 100644 --- 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 index ea6c1ca18..4f1e5c48b 100644 --- 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 ( <> { - 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} /> diff --git a/src/components/DepositsTable/cells/ActionsCell.tsx b/src/components/DepositsTable/cells/ActionsCell.tsx index 05c7d94ff..62ad43957 100644 --- 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({ ) : null; + const handleClickSpeedUp = useCallback(() => { + onClickSpeedUp?.(deposit); + }, [deposit, onClickSpeedUp]); + const speedUp = deposit.status === "pending" ? ( isProfitable ? ( - + ) : ( - + ) ) : null; diff --git a/src/components/Pagination/Pagination.styles.tsx b/src/components/Pagination/Pagination.styles.tsx index 6b93c769a..4f0206a97 100644 --- 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 deleted file mode 100644 index 1565051f4..000000000 --- a/src/hooks/usePagination.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { useState } from "react"; - -import { paginate } from "components/Pagination"; - -const DEFAULT_PAGE_SIZE = 10; -const DEFAULT_MAX_NAVIGATION_COUNT = 5; - -export function usePagination( - totalCount: number, - options: Partial<{ - maxNavigationCount: number; - initialPageSize: number; - }> = {} -) { - const { maxNavigationCount = DEFAULT_MAX_NAVIGATION_COUNT, initialPageSize } = - options; - - const [currentPage, setCurrentPage] = useState(0); - const [pageSize, setPageSize] = useState( - initialPageSize || DEFAULT_PAGE_SIZE - ); - - const paginateValues = paginate({ - elementCount: totalCount, - currentPage, - maxNavigationCount, - elementsPerPage: pageSize, - }); - - return { - paginateValues, - currentPage, - setPageSize, - setCurrentPage, - pageSize, - }; -} diff --git a/src/stories/PaginatedDepositsTable.stories.tsx b/src/stories/PaginatedDepositsTable.stories.tsx index 7b371582a..17c1130b7 100644 --- a/src/stories/PaginatedDepositsTable.stories.tsx +++ b/src/stories/PaginatedDepositsTable.stories.tsx @@ -163,6 +163,7 @@ export default meta; type Story = StoryObj; const BasicPagination = () => { + const [currentPage, setCurrentPage] = useState(0); const [pageSize, setPageSize] = useState(1); const [deposits, setDeposits] = useState( mockedDeposits.slice(0, 1) @@ -171,9 +172,12 @@ const BasicPagination = () => { return ( { + setCurrentPage(page); setDeposits(mockedDeposits.slice(page, page + pageSize)); }} + currentPageSize={pageSize} onPageSizeChange={(size) => { setPageSize(size); setDeposits(mockedDeposits.slice(0, size));