fix: type check records correctly (#589)

dydxprotocol · May 24, 2024 · a4ef304 · a4ef304
1 parent 9b64f26
commit a4ef304
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 21 deletions.
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -70,20 +70,27 @@ export type TableItem<TableRowData> = {
 
 export type BaseTableRowData = {};
 
+type SortableColumnDef<TableRowData extends BaseTableRowData | CustomRowConfig> = {
+  allowsSorting?: true;
+  getCellValue: (row: TableRowData) => string | number | undefined | null;
+};
+
+type NonSortableColumnDef = {
+  allowsSorting: false;
+};
+
 export type ColumnDef<TableRowData extends BaseTableRowData | CustomRowConfig> = {
   columnKey: string;
   label: React.ReactNode;
   tag?: React.ReactNode;
   colspan?: number;
   childColumns?: ColumnDef<TableRowData>[];
-  getCellValue: (row: TableRowData) => string | number;
-  allowsSorting?: boolean; // Default true
   allowsResizing?: boolean;
   renderCell: (row: TableRowData) => React.ReactNode;
   isActionable?: boolean;
   hideOnBreakpoint?: MediaQueryKeys;
   width?: ColumnSize;
-};
+} & (SortableColumnDef<TableRowData> | NonSortableColumnDef);
 
 export type TableElementProps<TableRowData extends BaseTableRowData | CustomRowConfig> = {
   label?: string;
@@ -163,8 +170,21 @@ export const Table = <TableRowData extends BaseTableRowData | CustomRowConfig>({
     if (!sortColumn) return 0;
 
     const column = columns.find((c) => c.columnKey === sortColumn);
-    const first = isCustomRow(a) ? 0 : column?.getCellValue(a);
-    const second = isCustomRow(b) ? 0 : column?.getCellValue(b);
+    if (column == null || column.allowsSorting === false) {
+      return 0;
+    }
+    const first = (isCustomRow(a) ? 0 : column.getCellValue(a)) ?? undefined;
+    const second = (isCustomRow(b) ? 0 : column.getCellValue(b)) ?? undefined;
+
+    if (first == null || second == null) {
+      if (first === second) {
+        return 0;
+      }
+      if (first != null) {
+        return 1;
+      }
+      return -1;
+    }
 
     return (
       // Compare the items by the sorted column
@@ -541,7 +561,7 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
     >
       <$Row>
         {column.rendered}
-        {column.props.allowsSorting && (
+        {(column.props.allowsSorting ?? true) && (
           <$SortArrow
             aria-hidden="true"
             sortDirection={

diff --git a/src/pages/portfolio/Fees.tsx b/src/pages/portfolio/Fees.tsx
@@ -109,7 +109,6 @@ export const Fees = () => {
             [
               {
                 columnKey: 'tier',
-                getCellValue: (row) => row.tier,
                 label: stringGetter({ key: STRING_KEYS.TIER }),
                 allowsSorting: false,
                 renderCell: ({ tier }) => (
@@ -125,7 +124,6 @@ export const Fees = () => {
               },
               {
                 columnKey: 'volume',
-                getCellValue: (row) => row.volume,
                 label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
                 allowsSorting: false,
                 renderCell: ({ symbol, volume: vol, makerShare, totalShare }) => (
@@ -143,15 +141,13 @@ export const Fees = () => {
               },
               isNotTablet && {
                 columnKey: 'condition',
-                getCellValue: (row) => row.volume,
                 label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
                 allowsSorting: false,
                 renderCell: ({ totalShare, makerShare }) =>
                   AdditionalConditions({ totalShare, makerShare }),
               },
               {
                 columnKey: 'maker',
-                getCellValue: (row) => row.maker,
                 label: stringGetter({ key: STRING_KEYS.MAKER }),
                 allowsSorting: false,
                 renderCell: ({ maker }) => (
@@ -164,7 +160,6 @@ export const Fees = () => {
               },
               {
                 columnKey: 'taker',
-                getCellValue: (row) => row.taker,
                 label: stringGetter({ key: STRING_KEYS.TAKER }),
                 allowsSorting: false,
                 renderCell: ({ taker }) => (

diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx
@@ -279,7 +279,7 @@ const getFillsTableColumnDef = ({
           </TableCell>
         ),
       },
-    } as Record<FillsTableColumnKey, ColumnDef<FillTableRow>>
+    } satisfies Record<FillsTableColumnKey, ColumnDef<FillTableRow>>
   )[key],
 });
 

diff --git a/src/views/tables/MarketsCompactTable.tsx b/src/views/tables/MarketsCompactTable.tsx
@@ -47,14 +47,12 @@ export const MarketsCompactTable = ({
       [
         {
           columnKey: 'market',
-          getCellValue: (row) => row.market,
           allowsSorting: false,
           label: stringGetter({ key: STRING_KEYS.MARKET }),
           renderCell: ({ asset }) => <AssetTableCell stacked asset={asset} />,
         },
         {
           columnKey: 'oraclePrice',
-          getCellValue: (row) => row.oraclePrice,
           allowsSorting: false,
           label: stringGetter({ key: STRING_KEYS.ORACLE_PRICE }),
           renderCell: ({
@@ -94,7 +92,6 @@ export const MarketsCompactTable = ({
         filters === MarketFilters.NEW
           ? {
               columnKey: 'listing',
-              getCellValue: (row) => row.isNew,
               allowsSorting: false,
               renderCell: ({ listingDate }) => (
                 <$DetailsCell>
@@ -117,7 +114,6 @@ export const MarketsCompactTable = ({
           : {
               columnKey: 'openInterest',
               allowsSorting: false,
-              getCellValue: (row) => row.openInterestUSDC,
               label: stringGetter({ key: STRING_KEYS.OPEN_INTEREST }),
               renderCell: ({ asset, openInterestUSDC, openInterest }) => (
                 <$DetailsCell>

diff --git a/src/views/tables/MarketsTable.tsx b/src/views/tables/MarketsTable.tsx
@@ -114,7 +114,6 @@ export const MarketsTable = ({ className }: { className?: string }) => {
             },
             {
               columnKey: 'priceChange24HChart',
-              getCellValue: (row) => row.priceChange24HPercent,
               label: stringGetter({ key: STRING_KEYS.LAST_24H }),
               renderCell: ({ line, priceChange24HPercent }) => (
                 <div style={{ width: 50, height: 50 }}>

diff --git a/src/views/tables/OrdersTable.tsx b/src/views/tables/OrdersTable.tsx
@@ -297,7 +297,7 @@ const getOrdersTableColumnDef = ({
           </TableCell>
         ),
       },
-    } as Record<OrdersTableColumnKey, ColumnDef<OrderTableRow>>
+    } satisfies Record<OrdersTableColumnKey, ColumnDef<OrderTableRow>>
   )[key],
 });
 

diff --git a/src/views/tables/PositionsTable.tsx b/src/views/tables/PositionsTable.tsx
@@ -366,7 +366,7 @@ const getPositionsTableColumnDef = ({
           />
         ),
       },
-    } as Record<PositionsTableColumnKey, ColumnDef<PositionTableRow>>
+    } satisfies Record<PositionsTableColumnKey, ColumnDef<PositionTableRow>>
   )[key],
 });
 

diff --git a/src/views/tables/TradingRewardHistoryTable.tsx b/src/views/tables/TradingRewardHistoryTable.tsx
@@ -78,7 +78,7 @@ const getTradingRewardHistoryTableColumnDef = ({
           />
         ),
       },
-    } as Record<TradingRewardHistoryTableColumnKey, ColumnDef<HistoricalTradingReward>>
+    } satisfies Record<TradingRewardHistoryTableColumnKey, ColumnDef<HistoricalTradingReward>>
   )[key],
 });
 

diff --git a/src/views/tables/TransferHistoryTable.tsx b/src/views/tables/TransferHistoryTable.tsx
@@ -108,7 +108,7 @@ const getTransferHistoryTableColumnDef = ({
             '-'
           ),
       },
-    } as Record<TransferHistoryTableColumnKey, ColumnDef<SubaccountTransfer>>
+    } satisfies Record<TransferHistoryTableColumnKey, ColumnDef<SubaccountTransfer>>
   )[key],
 });