diff --git a/components/account/AccountPagination.tsx b/components/account/AccountPagination.tsx index dceb9817ce2e712078fc0dee27af223a421a305b..ff6199ce1dd2361ca9c94195583f6cdae22ff770 100644 --- a/components/account/AccountPagination.tsx +++ b/components/account/AccountPagination.tsx @@ -1,56 +1,26 @@ import { config } from "@/Config"; import Hive from "@/types/Hive"; -import { getOperationButtonTitle } from "@/utils/UI"; -import { - convertBooleanArrayToIds, - convertIdsToBooleanArray, -} from "@/lib/utils"; -import useAccountOperationTypes from "@/hooks/api/accountPage/useAccountOperationTypes"; import JumpToPage from "../JumpToPage"; -import OperationTypesDialog from "../OperationTypesDialog"; + import CustomPagination from "../CustomPagination"; interface AccountPaginationProps { - accountName: string; page: number; setPage: (page: number | undefined) => void; accountOperations: Hive.OperationsCount; - onOperationsSelect: (filters: boolean[]) => void; - selectedFilters: boolean[]; } const AccountPagination: React.FC<AccountPaginationProps> = ({ - accountName, page, setPage, accountOperations, - onOperationsSelect, - selectedFilters, }) => { - const handleOperationSelect = (filters: number[]) => { - onOperationsSelect(convertIdsToBooleanArray(filters)); - }; - const onLatestButtonClick = () => { setPage(undefined); }; - const { accountOperationTypes } = useAccountOperationTypes(accountName); - return ( <div className="flex-col w-full"> - <div className="flex justify-end w-full flex-wrap"> - <OperationTypesDialog - operationTypes={accountOperationTypes} - setSelectedOperations={handleOperationSelect} - selectedOperations={convertBooleanArrayToIds(selectedFilters)} - buttonClassName="bg-theme" - triggerTitle={getOperationButtonTitle( - convertBooleanArrayToIds(selectedFilters), - accountOperationTypes - )} - /> - </div> <div className="flex w-full justify-center flex-wrap my-4" data-testid="account-top-bar" diff --git a/components/account/tabs/operations/OperationsTabContent.tsx b/components/account/tabs/operations/OperationsTabContent.tsx index 1ad12a75ec96de7e4e8f4fb72c7abe3b8ec62297..2b9ed2bf509890f9a252f4baf9232573079fa21e 100644 --- a/components/account/tabs/operations/OperationsTabContent.tsx +++ b/components/account/tabs/operations/OperationsTabContent.tsx @@ -17,11 +17,15 @@ import { defaultSearchParams } from "@/pages/[accountName]"; import useOperationsFormatter from "@/hooks/common/useOperationsFormatter"; import { convertBooleanArrayToIds, + convertIdsToBooleanArray, convertOperationResultsToTableOperations, } from "@/lib/utils"; import Hive from "@/types/Hive"; import AccountPagination from "../../AccountPagination"; import useAccountOperations from "@/hooks/api/accountPage/useAccountOperations"; +import useAccountOperationTypes from "@/hooks/api/accountPage/useAccountOperationTypes"; +import OperationTypesDialog from "@/components/OperationTypesDialog"; +import { getOperationButtonTitle } from "@/utils/UI"; interface OpeationTabContentProps { liveDataEnabled: boolean; @@ -90,7 +94,11 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({ setFilters([]); }; - const handleOperationTypeChange = (newFilters: boolean[]) => { + const { accountOperationTypes } = + useAccountOperationTypes(accountNameFromRoute); + + const handleOperationSelect = (filters: number[]) => { + const newFilters = convertIdsToBooleanArray(filters); setFilters(newFilters); setParams({ ...paramsState, filters: newFilters, page: undefined }); }; @@ -118,14 +126,11 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({ > {accountOperations && (page || lastPage) && ( <AccountPagination - accountName={accountNameFromRoute} page={page ? page : lastPage || 0} setPage={(page: number | undefined) => setParams({ ...paramsState, page }) } accountOperations={accountOperations} - onOperationsSelect={handleOperationTypeChange} - selectedFilters={filters} /> )} </div> @@ -240,18 +245,32 @@ const OperationTabContent: React.FC<OpeationTabContentProps> = ({ <CardContent> <SearchRanges rangesProps={searchRanges} /> <div className="flex items-center justify-between m-2"> - <Button - onClick={() => handleSearch(true)} - data-testid="apply-filters" - > - <span>Apply filters</span>{" "} - </Button> - <Button - onClick={handleFilterClear} - data-testid="clear-filters" - > - <span>Clear filters</span>{" "} - </Button> + <div className="flex min-w-[120px] gap-2"> + <Button + onClick={() => handleSearch(true)} + data-testid="apply-filters" + > + <span>Apply filters</span>{" "} + </Button> + </div> + <div className="flex w-full justify-end flex-wrap gap-2"> + <OperationTypesDialog + operationTypes={accountOperationTypes} + setSelectedOperations={handleOperationSelect} + selectedOperations={convertBooleanArrayToIds(filters)} + buttonClassName="bg-theme" + triggerTitle={getOperationButtonTitle( + convertBooleanArrayToIds(filters), + accountOperationTypes + )} + /> + <Button + onClick={handleFilterClear} + data-testid="clear-filters" + > + <span>Clear filters</span>{" "} + </Button> + </div> </div> </CardContent> </Card>