[DDW-1012] Review changes

Author: renanvalentin

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<State>(initialState);
 
@@ -81,7 +84,7 @@ function StakePoolsTableComponent({
   }, []);
 
   const handleSort = useCallback(
-    (newSortBy: keyof StakePool) => {
+    (newSortBy: StakePoolSortableProps) => {
       const { stakePoolsOrder, stakePoolsSortBy } = state;
       let newOrder = defaultTableOrdering[newSortBy];
 

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>) => any;
+  stakePoolsSortBy: StakePoolSortableProps;
+  stakePoolsOrder: StakePoolsOrder;
+  onHandleSort: (name: string) => void;
   children: React.ReactNode;
 };
 

source/renderer/app/components/staking/stake-pools/hooks/index.ts

@@ -3,3 +3,4 @@ export {
   useSortedStakePoolList,
   StakePoolsOrder,
 } from './useSortedStakePoolList';
+export { StakePoolSortableProps } from './types';

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'
+>;

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<StakePool> & {
+  id: StakePoolSortableProps;
+  accessor: StakePoolSortableProps;
+};
+
 export const useCreateColumns = ({
   numberOfRankedStakePools,
   intl,
@@ -38,7 +44,7 @@ export const useCreateColumns = ({
   containerClassName,
   showWithSelectButton,
 }: UseCreateColumnsArgs) =>
-  useMemo<Column<StakePool>[]>(
+  useMemo<StakePoolColumn[]>(
     () => [
       {
         id: 'ranking',

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;
 }