From 02612067ee7b3c9c7aee4087faa017849253c962 Mon Sep 17 00:00:00 2001 From: Renan Ferreira Date: Wed, 6 Apr 2022 14:13:12 -0300 Subject: [PATCH] [DDW-1012] Review changes --- .../staking/stake-pools/StakePoolsTable.tsx | 11 +++++++---- .../stake-pools/StakePoolsTableHeaderCell.tsx | 9 ++++----- .../components/staking/stake-pools/hooks/index.ts | 1 + .../components/staking/stake-pools/hooks/types.ts | 14 ++++++++++++++ .../staking/stake-pools/hooks/useCreateColumns.tsx | 8 +++++++- .../stake-pools/hooks/useSortedStakePoolList.tsx | 3 ++- 6 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 source/renderer/app/components/staking/stake-pools/hooks/types.ts diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index c30b475c66..4fd9214c3f 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -17,9 +17,13 @@ import { useSortedStakePoolList, useCreateColumns, StakePoolsOrder, + StakePoolSortableProps, } from './hooks'; -export const defaultTableOrdering = { +export const defaultTableOrdering: Record< + StakePoolSortableProps, + StakePoolsOrder +> = { ranking: StakePoolsOrder.Asc, ticker: StakePoolsOrder.Asc, saturation: StakePoolsOrder.Asc, @@ -52,7 +56,7 @@ type Props = { type State = { isPreloading: boolean; stakePoolsOrder: StakePoolsOrder; - stakePoolsSortBy: keyof StakePool; + stakePoolsSortBy: StakePoolSortableProps; }; const initialState: State = { isPreloading: true, @@ -72,7 +76,6 @@ function StakePoolsTableComponent({ onOpenExternalLink, containerClassName, onSelect, - selectedPoolId, }: Props) { const [state, setState] = useState(initialState); @@ -81,7 +84,7 @@ function StakePoolsTableComponent({ }, []); const handleSort = useCallback( - (newSortBy: keyof StakePool) => { + (newSortBy: StakePoolSortableProps) => { const { stakePoolsOrder, stakePoolsSortBy } = state; let newOrder = defaultTableOrdering[newSortBy]; diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeaderCell.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeaderCell.tsx index 931b1826c7..22575f18ce 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeaderCell.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeaderCell.tsx @@ -1,18 +1,17 @@ import React, { Component } from 'react'; import { observer } from 'mobx-react'; -import { map } from 'lodash'; import classNames from 'classnames'; import SVGInline from 'react-svg-inline'; import styles from './StakePoolsTable.scss'; -// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../../assets/images/ascendi... Remove this comment to see the full error message import sortIcon from '../../../assets/images/ascending.inline.svg'; import { defaultTableOrdering } from './StakePoolsTable'; +import { StakePoolsOrder, StakePoolSortableProps } from './hooks'; type TableHeaderProps = { name: string; - stakePoolsSortBy: string; - stakePoolsOrder: string; - onHandleSort: (...args: Array) => any; + stakePoolsSortBy: StakePoolSortableProps; + stakePoolsOrder: StakePoolsOrder; + onHandleSort: (name: string) => void; children: React.ReactNode; }; diff --git a/source/renderer/app/components/staking/stake-pools/hooks/index.ts b/source/renderer/app/components/staking/stake-pools/hooks/index.ts index 7e594bc5ff..ac08a1ed77 100644 --- a/source/renderer/app/components/staking/stake-pools/hooks/index.ts +++ b/source/renderer/app/components/staking/stake-pools/hooks/index.ts @@ -3,3 +3,4 @@ export { useSortedStakePoolList, StakePoolsOrder, } from './useSortedStakePoolList'; +export { StakePoolSortableProps } from './types'; diff --git a/source/renderer/app/components/staking/stake-pools/hooks/types.ts b/source/renderer/app/components/staking/stake-pools/hooks/types.ts new file mode 100644 index 0000000000..6b751348b5 --- /dev/null +++ b/source/renderer/app/components/staking/stake-pools/hooks/types.ts @@ -0,0 +1,14 @@ +import StakePool from '../../../../domains/StakePool'; + +export type StakePoolSortableProps = keyof Pick< + StakePool, + | 'ranking' + | 'ticker' + | 'saturation' + | 'cost' + | 'profitMargin' + | 'producedBlocks' + | 'nonMyopicMemberRewards' + | 'pledge' + | 'retiring' +>; diff --git a/source/renderer/app/components/staking/stake-pools/hooks/useCreateColumns.tsx b/source/renderer/app/components/staking/stake-pools/hooks/useCreateColumns.tsx index 7009b01409..f4fcccbdb5 100644 --- a/source/renderer/app/components/staking/stake-pools/hooks/useCreateColumns.tsx +++ b/source/renderer/app/components/staking/stake-pools/hooks/useCreateColumns.tsx @@ -18,6 +18,7 @@ import { toFixedUserFormat, } from '../../../../utils/formatters'; import { messages } from '../StakePoolsTable.messages'; +import { StakePoolSortableProps } from './types'; type UseCreateColumnsArgs = { currentTheme: string; @@ -29,6 +30,11 @@ type UseCreateColumnsArgs = { intl: Intl; }; +type StakePoolColumn = Column & { + id: StakePoolSortableProps; + accessor: StakePoolSortableProps; +}; + export const useCreateColumns = ({ numberOfRankedStakePools, intl, @@ -38,7 +44,7 @@ export const useCreateColumns = ({ containerClassName, showWithSelectButton, }: UseCreateColumnsArgs) => - useMemo[]>( + useMemo( () => [ { id: 'ranking', diff --git a/source/renderer/app/components/staking/stake-pools/hooks/useSortedStakePoolList.tsx b/source/renderer/app/components/staking/stake-pools/hooks/useSortedStakePoolList.tsx index 2c1dbfc1e7..216970e196 100644 --- a/source/renderer/app/components/staking/stake-pools/hooks/useSortedStakePoolList.tsx +++ b/source/renderer/app/components/staking/stake-pools/hooks/useSortedStakePoolList.tsx @@ -1,6 +1,7 @@ import { useMemo } from 'react'; import { orderBy } from 'lodash'; import StakePool from '../../../../domains/StakePool'; +import { StakePoolSortableProps } from './types'; export enum StakePoolsOrder { Asc = 'asc', @@ -9,7 +10,7 @@ export enum StakePoolsOrder { interface UseSortedStakePoolListArgs { stakePoolList: StakePool[]; - sortBy: keyof StakePool; + sortBy: StakePoolSortableProps; order: StakePoolsOrder; }